/*
Theme Name: WOWSPORT
Theme URI: https://gowowsport.com
Author: Shenzhen Wangjun Technology Co., Ltd.
Description: Lightweight WooCommerce theme built for WOWSPORT bike accessories. No jQuery, no external font requests, native CSS Grid, tuned for LiteSpeed Cache and fast delivery to Australian visitors.
Version: 1.6.25
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wowsport
Tags: e-commerce, custom-menu, featured-images, custom-colors
*/

/* ============================================================
   1. 设计变量
   ============================================================ */
:root {
  /* ---- 品牌色（取自官方 logo，逐像素采样） ---- */
  --brand-navy: #1e224f;
  --brand-red: #b3193b;
  /* 深蓝底上的红字必须提亮：#b3193b 在 #1e224f 上只有 2.2:1，这个 4.5:1 */
  --brand-red-bright: #f2567a;

  --navy: var(--brand-navy);
  --navy-2: #2a3070;
  --navy-3: #141736;

  /* 历史命名：早期没有 logo 时用橙色做强调色，现在统一成品牌红。
     保留 --orange* 变量名，避免全站 50+ 处引用逐条改名出错。 */
  --orange: var(--brand-red);
  --orange-d: #96152f;
  --orange-soft: #fcf0f2;
  /* 白底上的红字必须够深：#b3193b 本身 6.7:1 已达标，小字用这个更稳（9.2:1） */
  --orange-ink: #8e1229;
  /* 红浅底上的红字（9.7:1） */
  --orange-ink-2: #7d1127;
  --ink: #1d2430;
  --muted: #5f6877;
  --line: #e7eaef;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --ok: #087a5e;
  --danger: #c81e1e;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(30, 34, 79, 0.06);
  --shadow: 0 6px 24px rgba(30, 34, 79, 0.1);
  --shadow-lg: 0 18px 48px rgba(30, 34, 79, 0.16);
  --maxw: 1240px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   2. 基础重置
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.ws-locked {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================
   3. 顶部促销条
   ============================================================ */
.ws-promo {
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-promo b {
  color: var(--orange);
  font-weight: 700;
}

/* 手机上只留第一句，否则「免运费 · 退货 · 保修」会折成两行 */
@media (max-width: 640px) {
  .ws-promo .ws-promo-extra,
  .ws-promo .ws-promo-sep {
    display: none;
  }
  .ws-promo {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* ============================================================
   4. 页头
   ============================================================ */
.ws-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.ws-header .ws-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 66px;
}

.ws-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* 矢量 logo 的视觉高度；宽度按原比例自动 */
  --logo-h: 34px;
}

.ws-logo img,
.ws-logo .custom-logo,
.ws-brand-img {
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: none;
}

/* 后台「站点标识」上传的自定义 logo（the_custom_logo 的输出） */
.ws-logo .custom-logo-link {
  display: block;
  line-height: 0;
}

.ws-logo .custom-logo-link img {
  height: var(--logo-h);
  width: auto;
}

@media (max-width: 560px) {
  .ws-logo {
    --logo-h: 27px;
  }
}

.ws-nav {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-nav li {
  margin: 0;
  padding: 0;
}

/* 只作用于一级项。面板内部的链接和按钮不能继承下划线动画与 nowrap。 */
.ws-nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
}

.ws-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width 0.2s var(--ease);
}

.ws-nav-link:hover,
.ws-nav-item.is-open > .ws-nav-link {
  color: var(--orange-ink);
}

.ws-nav-link:hover::after,
.ws-nav-item.is-open > .ws-nav-link::after {
  width: 100%;
}

.ws-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ws-search {
  display: flex;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  gap: 8px;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.ws-search:focus-within {
  border-color: var(--navy);
  background: #fff;
}

.ws-search input {
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  width: 150px;
  color: var(--ink);
}

.ws-search button {
  background: none;
  border: 0;
  /* 图标 17px 但可点区域要 ≥24：用负 margin 撑开还不改视觉 */
  padding: 8px;
  margin: -8px;
  color: var(--muted);
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.14s var(--ease);
}

.ws-search button:hover {
  color: var(--navy);
}

.ws-cart-btn {
  position: relative;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  white-space: nowrap;
  flex-shrink: 0;

  align-items: center;
  gap: 7px;
  transition: background 0.15s var(--ease);
}

.ws-cart-btn:hover {
  background: var(--navy-2);
  color: #fff;
}

.ws-cart-btn .count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  font-weight: 800;
}

.ws-burger {
  display: none;
  background: none;
  border: 0;
  padding: 6px;
  color: var(--navy);
  line-height: 0;
}

/* ============================================================
   4b. 大型导航面板（mega menu）
   交互参考 vegogarden：悬停一级项 → 全宽面板下落，
   左侧两张大图卡 / 右侧三列链接 / 底部一条 CTA。
   ============================================================ */
.ws-nav-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ws-nav-caret {
  display: inline-grid;
  place-items: center;
  /* 触屏可点区域：WCAG 2.2 要求 ≥24×24，原来 16×24 点不中 */
  width: 24px;
  height: 32px;
  margin-left: -4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  opacity: 0.45;
  cursor: pointer;
  transition: transform 0.18s var(--ease), opacity 0.15s var(--ease),
    color 0.15s var(--ease);
}

.ws-nav-item:hover .ws-nav-caret,
.ws-nav-item.is-open .ws-nav-caret {
  opacity: 1;
  color: var(--orange-ink);
}

.ws-nav-item.is-open .ws-nav-caret {
  transform: rotate(180deg);
}

/* 面板本体：贴住页头底边、满宽下落。
   position 锚定到 .ws-header（sticky 元素就是定位容器），
   所以 left/right: 0 等于整屏宽，和参考站一致。 */
.ws-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 26px 50px -14px rgba(30, 34, 79, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s var(--ease), transform 0.22s var(--ease),
    visibility 0.2s var(--ease);
}

.ws-nav-item:hover > .ws-panel,
.ws-nav-item:focus-within > .ws-panel,
.ws-nav-item.is-open > .ws-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ws-panel-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.ws-panel-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 38px;
  padding: 28px 0 24px;
}

/* ---- 左侧图卡 ---- */
.ws-panel-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}

.ws-pc {
  display: block;
  border-radius: 12px;
  color: inherit;
}

.ws-pc-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  /* 商品图为纯白底，图区必须同为纯白，否则会露出灰底形成色差白框 */
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.ws-pc-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  transition: transform 0.35s var(--ease);
}

.ws-pc:hover .ws-pc-media img {
  transform: scale(1.05);
}

.ws-pc-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--orange-soft);
  color: var(--orange-ink-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
}

.ws-pc-body {
  display: block;
  padding: 11px 2px 0;
}

.ws-pc-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
}

/* 悬停时右下角浮出一个小箭头，比在标题后加「›」更耐长标题 */
.ws-pc-media::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L8.5 3.5M8.5 3.5H4.5M8.5 3.5v4'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.ws-pc:hover .ws-pc-media::after {
  opacity: 1;
  transform: translateY(0);
}

.ws-pc:hover .ws-pc-name {
  color: var(--orange-ink);
}

.ws-pc-meta {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- 右侧链接列 ---- */
.ws-panel-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding-top: 4px;
}

.ws-panel-col h3 {
  display: inline-block;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}

.ws-panel-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-panel-col a {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 行高 19px 手指点不中，做成 36px 的行，hover 有底 */
  min-height: 36px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #3c495c;
  transition: color 0.14s var(--ease), background 0.14s var(--ease);
}

.ws-panel-col a > .t {
  flex: 1 1 auto;
  min-width: 0;
}

.ws-panel-col a:hover {
  background: var(--bg-soft);
  color: var(--orange-ink);
}

.ws-panel-col .n {
  flex: none;
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- 底部 CTA 条 ---- */
.ws-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--line);
}

.ws-panel-foot p {
  margin: 0;
  max-width: 660px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.ws-panel-actions {
  display: flex;
  flex: none;
  gap: 10px;
}

.ws-panel-actions .ws-btn {
  padding: 11px 20px;
  font-size: 13.5px;
  border-radius: 10px;
  box-shadow: none;
}

.ws-panel-actions .ws-btn-ghost {
  background: #fff;
  border: 1px solid #d5dbe5;
  color: var(--navy);
}

.ws-panel-actions .ws-btn-ghost:hover {
  background: #fff;
  border-color: var(--navy);
  transform: none;
}

.ws-panel-actions .ws-btn-primary:hover {
  box-shadow: 0 8px 18px rgba(179, 25, 59, 0.26);
}

/* ---- 收窄屏：先压缩间距，再切换成手风琴 ---- */
@media (max-width: 1240px) {
  .ws-header .ws-bar {
    gap: 18px;
  }

  .ws-nav {
    gap: 12px;
  }

  .ws-search {
    padding: 7px 12px;
  }

  .ws-search input {
    width: 104px;
  }

  .ws-panel-main {
    gap: 30px;
  }

  .ws-panel-cols {
    gap: 20px;
  }

  .ws-panel-col a {
    font-size: 13px;
  }
}

@media (max-width: 1140px) {
  .ws-nav {
    display: none;
  }

  .ws-burger {
    display: block;
  }

  .ws-search {
    display: none;
  }

  .ws-nav.open {
    display: flex;
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #fff;
    padding: 4px 20px 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ws-nav.open .ws-nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }

  .ws-nav.open .ws-nav-link {
    flex: 1;
    padding: 14px 0;
    font-size: 15px;
  }

  .ws-nav.open .ws-nav-link::after {
    display: none;
  }

  .ws-nav.open .ws-nav-caret {
    width: 44px;
    height: 44px;
    opacity: 1;
  }

  /* 移动端面板复用同一份 DOM，改成手风琴，不重新输出链接 */
  .ws-nav.open .ws-panel {
    position: static;
    display: none;
    flex: 0 0 100%;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-top: 0;
    box-shadow: none;
  }

  .ws-nav.open .ws-nav-item.is-open > .ws-panel {
    display: block;
  }

  .ws-nav.open .ws-panel-in {
    padding: 0 0 6px;
  }

  .ws-nav.open .ws-panel-main {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 4px 0 16px;
  }

  .ws-nav.open .ws-pc-media {
    aspect-ratio: 16 / 9;
  }

  .ws-nav.open .ws-panel-cols {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .ws-nav.open .ws-panel-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 0 6px;
  }

  .ws-nav.open .ws-panel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ws-nav.open .ws-panel-actions .ws-btn {
    padding: 12px 14px;
  }
}

@media (max-width: 560px) {
  .ws-nav.open .ws-panel-cols,
  .ws-nav.open .ws-panel-actions {
    grid-template-columns: 1fr;
  }

  /* 手机上卡片保持两列：竖排两张会把菜单拉得过长 */
  .ws-nav.open .ws-panel-cards {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ws-nav.open .ws-pc-media {
    aspect-ratio: 1 / 1;
  }

  .ws-nav.open .ws-pc-media img {
    padding: 8px;
  }

  .ws-nav.open .ws-pc-name {
    font-size: 12.5px;
    min-height: 2.7em;
  }

  .ws-nav.open .ws-pc-meta {
    font-size: 11.5px;
  }

  .ws-nav.open .ws-pc-tag {
    top: 6px;
    left: 6px;
    font-size: 9px;
    padding: 4px 7px;
  }

  /* 单列时数量不要被推到屏幕最右边，紧跟在名字后面更像一句话 */
  .ws-nav.open .ws-panel-col a > .t {
    flex: 0 1 auto;
  }

  .ws-nav.open .ws-panel-col .n {
    margin-left: 0;
  }
}

/* ============================================================
   5. 按钮
   ============================================================ */
.ws-btn,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease),
    background 0.14s var(--ease), color 0.14s var(--ease);
}

.ws-btn-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--orange);
  /* 品牌红底上白字 6.72:1（AA）；深蓝字只有 2.59:1，不能用 */
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(179, 25, 59, 0.28);
}

.ws-btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  /* hover 加深而不是提亮：红底提亮会让白字对比掉下去 */
  background: var(--orange-d);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(179, 25, 59, 0.34);
}

.ws-btn-dark {
  background: var(--navy);
  color: #fff;
}

.ws-btn-dark:hover {
  background: var(--navy-2);
  transform: translateY(-1px);
}

.ws-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.ws-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.ws-btn-outline {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}

.ws-btn-outline:hover {
  background: var(--navy);
  color: #fff;
}

.ws-btn-block {
  width: 100%;
}

/* ============================================================
   6. 首页 Hero
   ============================================================ */
.ws-hero {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 58%, #1d3a66 100%);
  color: #fff;
  padding: 76px 0 84px;
  overflow: hidden;
  position: relative;
}

.ws-hero::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -110px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(179, 25, 59, 0.3), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ws-hero .ws-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ws-hero .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-red-bright);
  margin-bottom: 16px;
}

.ws-hero h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  line-height: 1.06;
}

.ws-hero p {
  font-size: 17px;
  color: #c7d2e0;
  max-width: 470px;
  margin: 0 0 30px;
}

.ws-hero .ws-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ws-hero-art {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.ws-hero-art .chip {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 20px;
  font-weight: 600;
  font-size: 13px;
  color: #dfe7f2;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ws-hero-art .chip b {
  color: var(--brand-red-bright);
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

/* ============================================================
   7. 通用区块
   ============================================================ */
.ws-section {
  padding: 64px 0;
}

.ws-section.soft {
  background: var(--bg-soft);
}

.ws-sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
}

.ws-sec-head h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}

.ws-sec-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.ws-sec-head .more {
  color: var(--orange-ink);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.ws-sec-head .more:hover {
  color: var(--orange-ink-2);
}

/* 分段切换 */
.ws-toggle {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}

.ws-toggle button {
  border: 0;
  background: transparent;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  transition: all 0.15s var(--ease);
}

.ws-toggle button.on {
  background: var(--navy);
  color: #fff;
}

/* ============================================================
   8. 产品网格与卡片
   ============================================================ */
.ws-grid-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.ws-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease),
    border-color 0.18s var(--ease);
  position: relative;
}

.ws-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: transparent;
}

.ws-card .thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  overflow: hidden;
}

.ws-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.ws-card:hover .thumb img {
  transform: scale(1.045);
}

.ws-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  color: #fff;
  z-index: 2;
}

.ws-badge.sale {
  background: var(--orange);
  color: #fff;
}

.ws-badge.new {
  background: var(--ok);
}

.ws-badge.sold {
  background: #9aa3ad;
}

.ws-badge.best {
  background: var(--navy);
}

.ws-card .body {
  padding: 15px 17px 17px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ws-card .cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

.ws-card h3 {
  font-size: 15px;
  margin: 0;
  font-weight: 700;
  line-height: 1.38;
}

.ws-card h3 a:hover {
  color: var(--orange-ink);
}

.ws-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.ws-price .now {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.ws-price .was {
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
}

.ws-price .na {
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

.ws-card .add {
  border: 1.5px solid var(--navy);
  background: #fff;
  color: var(--navy);
  border-radius: 999px;
  padding: 10px;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
  /* 卡片 .body 是 flex 纵向容器，按钮是 flex item；必须显式居中，
     否则 inline 内容默认靠左，与下方 Amazon CTA 的对齐不一致。 */
  display: block;
  text-align: center;
  transition: all 0.15s var(--ease);
}

.ws-card .add:hover {
  background: var(--navy);
  color: #fff;
}

.ws-card .stars {
  font-size: 12px;
  color: var(--orange-d);
  letter-spacing: 1px;
}

/* ============================================================
   9. 品类块
   ============================================================ */
.ws-cat-blocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ws-cat-block {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  color: #fff;
  isolation: isolate;
}

.ws-cat-block .bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 0.5s var(--ease);
}

.ws-cat-block:hover .bg {
  transform: scale(1.06);
}

.ws-cat-block .bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 21, 43, 0.05) 0%, rgba(6, 21, 43, 0.82) 100%);
}

.ws-cat-block h3 {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
}

.ws-cat-block .go {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.92;
}

.ws-cat-block .count {
  font-size: 12px;
  opacity: 0.75;
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   10. 图文左右区块
   ============================================================ */
.ws-feature-row {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 44px;
  align-items: center;
}

.ws-feature-row.flip .col-img {
  order: 2;
}

.ws-feature-row .col-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
  /* 配图取自商品图库，全部是 1:1 的方图（亚马逊主图规范：方图 + 卖点标注）。
     容器用 16:10 的横框再 cover，上下各切掉约 20% —— 顶部大标题和底部
     尺寸标注会被切掉。改成 1:1，源图原样呈现，零裁切。 */
  aspect-ratio: 1 / 1;
}

.ws-feature-row .col-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-feature-row h2 {
  font-size: 32px;
  color: var(--navy);
  margin: 0 0 12px;
}

.ws-feature-row p {
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 22px;
}

.ws-feature-row ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.ws-feature-row li {
  position: relative;
  padding: 0 0 10px 28px;
  color: var(--ink);
  font-size: 15px;
}

.ws-feature-row li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange-soft);
  border: 2px solid var(--orange);
}

/* ============================================================
   11. 服务保障条
   ============================================================ */
.ws-service {
  background: var(--navy);
  color: #fff;
  padding: 44px 0;
}

.ws-service .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ws-service .item {
  text-align: center;
  padding: 8px;
}

.ws-service .ic {
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--orange);
}

.ws-service b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.ws-service span {
  color: #aab6c6;
  font-size: 13px;
}

/* ============================================================
   12. 评价
   ============================================================ */
.ws-rev-summary {
  text-align: center;
  margin-bottom: 34px;
}

.ws-rev-summary .score {
  font-size: 56px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.03em;
}

.ws-stars {
  color: var(--orange-d);
  font-size: 19px;
  letter-spacing: 3px;
}

.ws-rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ws-rev {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.ws-rev .ws-stars {
  font-size: 14px;
  letter-spacing: 2px;
}

.ws-rev p {
  color: var(--ink);
  margin: 12px 0;
  font-size: 15px;
  line-height: 1.6;
}

.ws-rev .who {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-rev .verified {
  color: var(--ok);
  font-size: 12px;
}

/* ============================================================
   13. 博客
   ============================================================ */
.ws-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.ws-post {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

.ws-post:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.ws-post .thumb {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--bg-soft);
  overflow: hidden;
}

.ws-post .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-post .body {
  padding: 18px 20px 22px;
}

.ws-post .date {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ws-post h3 {
  font-size: 17px;
  margin: 8px 0 8px;
}

.ws-post h3 a:hover {
  color: var(--orange);
}

.ws-post p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* ============================================================
   14. Newsletter
   ============================================================ */
.ws-newsletter {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  padding: 60px 0;
}

.ws-newsletter .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.ws-newsletter h2 {
  font-size: 30px;
  margin: 0 0 10px;
}

.ws-newsletter p {
  color: #c7d2e0;
  margin: 0;
}

/* 订阅表单未配置时的替代 CTA：按钮在深色底上要够醒目。
   .ws-btn-primary 的 color 带 !important，这里必须同样加，否则白底白字看不见。 */
.ws-nl-cta,
.ws-newsletter .ws-nl-cta {
  background: #fff;
  border-color: #fff;
  color: var(--navy) !important;
}

.ws-nl-cta:hover,
.ws-newsletter .ws-nl-cta:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff !important;
}

.ws-nl-form {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 6px;
}

.ws-nl-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
  font-family: inherit;
  min-width: 0;
}

.ws-nl-form input[type="email"]::placeholder {
  color: #93a3b8;
}

.ws-nl-form button {
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  padding: 12px 26px;
  font-size: 15px;
  white-space: nowrap;
  transition: background 0.15s var(--ease);
}

.ws-nl-form button:hover {
  background: var(--orange-d);
}

.ws-nl-note {
  font-size: 12px;
  color: #93a3b8;
  margin: 12px 0 0 20px;
}

/* ============================================================
   15. 页脚
   ============================================================ */
.ws-footer {
  background: var(--navy-3);
  color: #c7d2e0;
  padding: 56px 0 28px;
}

.ws-footer .cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}

.ws-footer h4 {
  color: #fff;
  font-size: 14px;
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}

.ws-footer a {
  display: block;
  color: #aab6c6;
  font-size: 13px;
  padding: 5px 0;
}

.ws-footer a:hover {
  color: var(--orange);
}

.ws-footer .logo {
  margin-bottom: 16px;
  line-height: 0;
}

.ws-footer .logo img {
  display: block;
  height: 38px;
  width: auto;
}

@media (max-width: 560px) {
  .ws-footer .logo img {
    height: 32px;
  }
}

.ws-footer .about {
  font-size: 13px;
  color: #93a3b8;
  max-width: 280px;
  line-height: 1.65;
}

.ws-footer .bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 36px;
  padding-top: 20px;
  font-size: 12px;
  color: #7d8ba0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.ws-pay-icons {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.ws-pay-icons span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 3px 6px;
  color: #aab6c6;
}

/* 站内不收款，页脚只标注成交渠道，不摆卡组织标 */
.ws-pay-icons--amazon span {
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 5px 9px;
}

/* ============================================================
   16. 购物车抽屉
   ============================================================ */
.ws-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 21, 43, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
  z-index: 100;
}

.ws-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.ws-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 400px;
  max-width: 92vw;
  background: #fff;
  z-index: 101;
  transform: translateX(100%);
  transition: transform 0.26s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(6, 21, 43, 0.18);
}

.ws-drawer.show {
  transform: translateX(0);
}

.ws-drawer .head {
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ws-drawer .head b {
  font-size: 16px;
  color: var(--navy);
}

.ws-drawer .close {
  border: 0;
  background: none;
  font-size: 24px;
  color: var(--muted);
  line-height: 1;
  padding: 4px;
}

.ws-drawer .items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px;
}

.ws-ci {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.ws-ci img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-soft);
  flex: none;
}

.ws-ci .info {
  flex: 1;
  min-width: 0;
}

.ws-ci h4 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.35;
}

.ws-ci .v {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.ws-ci .qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.ws-ci .qty button {
  width: 28px;
  height: 28px;
  border: 0;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
}

.ws-ci .qty span {
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.ws-ci .right {
  text-align: right;
  flex: none;
}

.ws-ci .price {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}

.ws-ci .rm {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  padding: 0;
}

.ws-drawer .foot {
  padding: 20px 22px;
  border-top: 1px solid var(--line);
}

.ws-ship-bar {
  height: 7px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 9px;
}

.ws-ship-bar i {
  display: block;
  height: 100%;
  background: var(--ok);
  width: 0;
  transition: width 0.35s var(--ease);
}

.ws-ship-note {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}

.ws-drawer .subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 14px;
  color: var(--navy);
}

.ws-drawer .checkout {
  width: 100%;
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 15px;
  font-weight: 800;
  font-size: 15px;
  transition: background 0.15s var(--ease);
}

.ws-drawer .checkout:hover {
  background: var(--orange-d);
}

.ws-empty {
  color: var(--muted);
  text-align: center;
  padding: 60px 0;
  font-size: 14px;
}

/* 提示条 */
.ws-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: #fff;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s var(--ease);
  z-index: 300;
  box-shadow: var(--shadow-lg);
}

.ws-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   17. 商品详情页（WooCommerce single product）
   ============================================================ */
.ws-breadcrumb {
  padding: 18px 0;
  font-size: 13px;
  color: var(--muted);
}

.ws-breadcrumb a:hover {
  color: var(--orange-ink);
}

.woocommerce div.product {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: start;
  margin-bottom: 64px;
}

.woocommerce div.product div.images {
  margin: 0;
  width: 100%;
  float: none;
}

.woocommerce div.product div.images img {
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 12px 0 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100%;
  float: none;
  margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  border-radius: 10px;
  border: 2px solid transparent;
  opacity: 0.75;
  transition: all 0.15s var(--ease);
  cursor: pointer;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--orange);
}

.woocommerce div.product div.summary {
  float: none;
  width: 100%;
  position: sticky;
  top: 92px;
}

.woocommerce div.product .product_title {
  font-size: 34px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -0.025em;
}

.woocommerce div.product .ws-product-tagline {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 18px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.woocommerce div.product p.price del {
  font-size: 18px;
  color: var(--muted);
  font-weight: 500;
  opacity: 1;
}

.woocommerce div.product p.price ins {
  text-decoration: none;
}

.ws-tax-note {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 22px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 22px;
}

.woocommerce div.product form.cart {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 20px;
}

.woocommerce div.product form.cart .quantity {
  display: flex;
  align-items: center;
}

.woocommerce .quantity input.qty {
  width: 74px;
  height: 52px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  padding: 0;
  background: #fff;
}

.woocommerce div.product form.cart .button {
  flex: 1;
  height: 52px;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
}

.woocommerce div.product form.cart .button:hover {
  background: var(--orange-d);
}

.woocommerce div.product .stock {
  font-size: 13px;
  font-weight: 700;
  color: #0a8f6b;
  margin-bottom: 14px;
}

.woocommerce div.product .stock.out-of-stock {
  color: var(--danger);
}

/* 变体选择 */
.woocommerce div.product form.cart .variations {
  width: 100%;
  margin-bottom: 16px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.woocommerce div.product form.cart .variations th {
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0;
  width: 90px;
  vertical-align: middle;
}

.woocommerce div.product form.cart .variations td {
  padding: 0;
}

.woocommerce div.product form.cart .variations select {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}

.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: 14px;
}

/* 信任点 */
.ws-trust {
  display: grid;
  gap: 10px;
  margin: 24px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ws-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  list-style: none;
}

.ws-trust li svg {
  flex: none;
  margin-top: 2px;
  color: var(--ok);
}

.ws-trust {
  padding-left: 0;
  list-style: none;
}

/* 商品 tabs */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: 20px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--navy);
  border-bottom-color: var(--orange);
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 0;
  margin: 0;
  max-width: 820px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
  font-size: 22px;
  color: var(--navy);
}

/* 规格表（vegogarden 风格：外框 + 斑马纹，值列白底更醒目） */
.ws-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 14px;
  border: 1px solid var(--line);
}

.ws-specs th,
.ws-specs td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.ws-specs tr:last-child th,
.ws-specs tr:last-child td {
  border-bottom: 0;
}

.ws-specs th {
  width: 38%;
  color: var(--navy);
  font-weight: 700;
  background: var(--bg-soft);
}

.ws-specs td {
  color: var(--ink);
  background: var(--bg);
}

.ws-specs tbody tr:nth-child(even) td {
  background: #fbfcfe;
}

.ws-specs tr:first-child th {
  border-radius: 10px 0 0 0;
}

.ws-specs tr:first-child td {
  border-radius: 0 10px 0 0;
}

/* 相关内容 */
.woocommerce div.product .related,
.woocommerce div.product .upsells {
  grid-column: 1 / -1;
  margin-top: 20px;
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 24px;
}

/* ============================================================
   18. 商品列表页 / 归档
   ============================================================ */
.ws-page-head {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  padding: 52px 0;
  margin-bottom: 44px;
}

.ws-page-head h1 {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 10px;
}

.ws-page-head p {
  color: #c7d2e0;
  margin: 0;
  max-width: 620px;
  font-size: 16px;
}

.ws-shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.woocommerce .woocommerce-result-count {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.woocommerce .woocommerce-ordering select {
  height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0 40px 0 16px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7585' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0 0 40px;
  padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.woocommerce ul.products li.product a img {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--bg-soft);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  padding: 14px 16px 4px;
  line-height: 1.38;
}

.woocommerce ul.products li.product .price {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  padding: 0 16px;
  margin: 0 0 14px;
}

.woocommerce ul.products li.product .price del {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  opacity: 1;
  margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

.woocommerce ul.products li.product .button {
  margin: 0 16px 16px;
  width: calc(100% - 32px);
  background: #fff;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy);
  box-shadow: none;
  padding: 10px;
  font-size: 14px;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--navy);
  color: #fff !important;
}

.woocommerce ul.products li.product .onsale {
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 11px;
  min-height: 0;
  min-width: 0;
  line-height: 1.4;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: 8px;
  justify-content: center;
  border: 0;
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ============================================================
   19. 购物车 / 结账 / 通知
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: 0;
  border-left: 4px solid var(--ok);
  background: #f2fbf8;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--ink);
  list-style: none;
}

.woocommerce-info {
  border-left-color: #3a86ff;
  background: #f2f7ff;
}

.woocommerce-error {
  border-left-color: var(--danger);
  background: #fff4f4;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

.woocommerce-message .button,
.woocommerce-info .button {
  background: var(--navy);
  color: #fff;
  padding: 8px 18px;
  font-size: 13px;
  border-radius: 999px;
  margin-left: 12px;
}

.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin-bottom: 28px;
}

.woocommerce table.shop_table th {
  background: var(--bg-soft);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 14px 16px;
  border: 0;
}

.woocommerce table.shop_table td {
  padding: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}

.woocommerce table.cart img {
  width: 72px;
  border-radius: 8px;
}

.woocommerce table.cart td.actions {
  padding: 16px;
}

.woocommerce table.cart td.actions .coupon {
  display: flex;
  gap: 10px;
  float: none;
  margin-bottom: 10px;
}

.woocommerce table.cart td.actions .coupon input.input-text {
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
  font-size: 14px;
  font-family: inherit;
}

.woocommerce .cart-collaterals .cart_totals {
  width: 100%;
  float: none;
}

.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: 20px;
  color: var(--navy);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0 16px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  width: 100%;
}

.woocommerce form .form-row textarea {
  height: auto;
  padding: 14px 16px;
  min-height: 110px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--navy);
  outline: none;
}

.woocommerce form .form-row label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

/* PayPal 智能按钮容器 */
.ws-paypal-wrap {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.ws-paypal-label {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ws-paypal-label::before,
.ws-paypal-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ============================================================
   20. 内容页（About / Support / 博客正文）
   ============================================================ */
.ws-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 72px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
}

.ws-content h2 {
  font-size: 28px;
  color: var(--navy);
  margin: 42px 0 16px;
}

.ws-content h3 {
  font-size: 21px;
  color: var(--navy);
  margin: 32px 0 12px;
}

.ws-content img {
  border-radius: var(--radius);
  margin: 24px 0;
}

.ws-content ul,
.ws-content ol {
  padding-left: 22px;
}

.ws-content li {
  margin-bottom: 8px;
}

.ws-content blockquote {
  border-left: 3px solid var(--orange);
  margin: 24px 0;
  padding: 4px 0 4px 22px;
  color: var(--muted);
  font-size: 17px;
}

/* FAQ 折叠 */
.ws-faq {
  max-width: 820px;
  margin: 0 auto;
}

.ws-faq details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.ws-faq summary {
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.ws-faq summary::-webkit-details-marker {
  display: none;
}

.ws-faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--orange);
  flex: none;
  transition: transform 0.2s var(--ease);
}

.ws-faq details[open] summary::after {
  transform: rotate(45deg);
}

.ws-faq details p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}

/* ============================================================
   21. 表单（WPForms / 原生）
   ============================================================ */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea,
.ws-form input,
.ws-form textarea,
.ws-form select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}

.wpforms-container input:focus,
.wpforms-container textarea:focus,
.ws-form input:focus,
.ws-form textarea:focus {
  border-color: var(--navy);
  outline: none;
}

.ws-form button {
  margin-top: 8px;
}

/* ============================================================
   22. 响应式
   ============================================================ */
@media (max-width: 1100px) {
  .ws-hero .ws-hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ws-hero h1 {
    font-size: 44px;
  }

  .ws-grid-products,
  .ws-cat-blocks,
  .woocommerce ul.products {
    grid-template-columns: repeat(3, 1fr);
  }

  .woocommerce div.product {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .woocommerce div.product div.summary {
    position: static;
  }
}

@media (max-width: 860px) {
  .ws-grid-products,
  .ws-cat-blocks,
  .ws-rev-grid,
  .ws-blog-grid,
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  .ws-feature-row,
  .ws-feature-row.flip {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .ws-feature-row.flip .col-img {
    order: 0;
  }

  .ws-service .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ws-newsletter .inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .ws-footer .cols {
    grid-template-columns: 1fr 1fr;
  }

  .ws-sec-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ws-sec-head h2,
  .ws-hero h1 {
    font-size: 30px;
  }

  .ws-page-head h1 {
    font-size: 30px;
  }

  .ws-page-head {
    padding: 38px 0;
  }

  .ws-section {
    padding: 44px 0;
  }
}

@media (max-width: 560px) {
  .ws-grid-products,
  .ws-cat-blocks,
  .ws-rev-grid,
  .ws-blog-grid,
  .ws-service .grid,
  .ws-footer .cols,
  .woocommerce ul.products {
    grid-template-columns: 1fr;
  }

  .ws-hero {
    padding: 48px 0 56px;
  }

  .ws-hero h1 {
    font-size: 32px;
  }

  .ws-hero-art {
    grid-template-columns: 1fr 1fr;
  }

  .woocommerce div.product .product_title {
    font-size: 26px;
  }

  .ws-cta .ws-btn {
    width: 100%;
  }

  .ws-nl-form {
    flex-direction: column;
    border-radius: 16px;
  }

  .ws-nl-form button {
    width: 100%;
  }
}

/* ============================================================
   23. 模板补充元素
   ============================================================ */
.ws-page-head.compact {
  padding: 32px 0;
}

.ws-page-head.compact h1 {
  font-size: 27px;
  margin: 0;
}

/* 无副标题的页头：收紧上下留白，避免深色块里只有一行标题 */
.ws-page-head.no-sub {
  padding: clamp(26px, 4vw, 40px) 0;
  margin-bottom: clamp(24px, 4vw, 36px);
}

.ws-page-head.no-sub h1 {
  margin: 0;
}

/* 博客分页 */
.ws-pagination {
  margin-top: 44px;
}

.ws-pagination .nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.ws-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  transition: all 0.15s var(--ease);
}

.ws-pagination .page-numbers.current,
.ws-pagination .page-numbers:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.ws-pagination .page-numbers.dots {
  border-color: transparent;
}

/* 文章首图 */
.ws-post-hero {
  max-width: 940px;
  margin: 0 auto 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
}

.ws-post-hero img {
  width: 100%;
  margin: 0;
}

/* 相关文章 */
.ws-related {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.ws-related h2 {
  font-size: 26px;
  color: var(--navy);
  margin: 0 0 26px;
}

/* ---- 文章页：对应产品卡片 ---- */
.ws-featured-product {
  margin-top: 48px;
  padding: 24px;
  background: #fdfcfa;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.ws-fp-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 14px;
}
.ws-fp-card {
  display: flex;
  gap: 20px;
  align-items: center;
}
.ws-fp-thumb {
  flex: 0 0 132px;
  width: 132px;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.ws-fp-thumb img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: contain;
}
.ws-fp-body { flex: 1 1 auto; min-width: 0; }
.ws-fp-body h3 {
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--navy);
  line-height: 1.3;
}
.ws-fp-body h3 a { color: inherit; text-decoration: none; }
.ws-fp-body h3 a:hover { color: var(--brand-red); }
.ws-fp-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.ws-fp-price del { color: #94a3b8; font-weight: 500; margin-right: 6px; }
.ws-fp-note {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.55;
}
.ws-fp-cta { display: inline-block; }
.ws-fp-amz {
  display: inline-block;
  margin-left: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
}
.ws-fp-amz:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .ws-fp-card { flex-direction: column; align-items: stretch; text-align: center; }
  .ws-fp-thumb { width: 100%; flex-basis: auto; max-width: 200px; margin: 0 auto; }
  .ws-fp-thumb img { height: auto; aspect-ratio: 1 / 1; }
  .ws-fp-cta { display: block; }
  .ws-fp-amz { display: block; margin: 12px 0 0; }
}

/* 页脚菜单 li 重置 */
.ws-footer li {
  list-style: none;
  margin: 0;
}

.ws-footer ul {
  margin: 0;
  padding: 0;
}

/* 商品价格 del/ins 在卡片内的呈现 */
.ws-price ins {
  text-decoration: none;
  color: inherit;
}

/* WooCommerce 默认占位图（商品完全没图时才会出现）
   注意：只针对 woocommerce-placeholder，不要把品牌占位图也算进来 */
.ws-card .thumb img[src*="woocommerce-placeholder"],
.woocommerce ul.products li.product a img[src*="woocommerce-placeholder"] {
  object-fit: contain;
  padding: 18%;
  opacity: 0.55;
}

/* ============================================================
   20. 商品卡片（归档 / 促销 / 相关共用）
   ============================================================ */
/* 导航里的促销入口 */
.ws-nav .ws-nav-sale {
  color: var(--orange);
  font-weight: 800;
}

.ws-nav .ws-nav-sale:hover {
  color: var(--orange-d);
}

.ws-card .thumb {
  display: block;
}

.ws-card .thumb .ws-card-img-main,
.ws-card .thumb .ws-card-img-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ws-card .thumb .ws-card-img-alt {
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

@media (hover: hover) {
  .ws-card:hover .ws-card-img-alt {
    opacity: 1;
  }
  .ws-card:hover .thumb img {
    transform: scale(1.04);
  }
}

/* 无图占位：不是破图，是刻意留白 */
.ws-card .thumb .ws-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #b3bcc9;
  background: repeating-linear-gradient(
    135deg,
    var(--bg-soft),
    var(--bg-soft) 10px,
    #f1f4f8 10px,
    #f1f4f8 20px
  );
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* WooCommerce 价格元素在卡片里的呈现 */
.ws-card .ws-price .woocommerce-Price-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.ws-card .ws-price del .woocommerce-Price-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.ws-card .ws-price del {
  text-decoration: line-through;
  margin-right: 8px;
}

.ws-card .ws-price ins {
  text-decoration: none;
  background: none;
}

.ws-card .add.is-disabled {
  background: #e8ecf1;
  color: #98a2b3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   21. 商品详情页（PDP）
   ============================================================ */
/*
 * 包裹层重置：模板里加了 .woocommerce > .product 以激活下文所有
 * 「.woocommerce div.product ...」规则，但 .woocommerce div.product 本身
 * 是两列 grid，会与内层 .ws-pdp 打架，这里把它压回普通块级容器。
 */
.woocommerce div.product.ws-pdp-product {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin-bottom: 0;
}

.ws-notices {
  padding-top: 8px;
}

.ws-notices .woocommerce-message,
.ws-notices .woocommerce-info,
.ws-notices .woocommerce-error {
  border-radius: var(--radius-sm);
  border-top: 0;
  padding: 14px 18px;
  font-size: 14px;
  background: #eef7f2;
  color: #0a6b4f;
  list-style: none;
  margin: 0 0 12px;
}

.ws-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-bottom: 48px;
}

/* --- 图廊 --- */
.ws-pdp-media {
  position: sticky;
  top: 96px;
}

.ws-pdp-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-pdp-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
  transition: opacity 0.16s var(--ease);
}

/* 切换图片时轻微降透明度做过渡，避免大图解码那一下的硬跳 */
.ws-pdp-stage img.is-swapping {
  opacity: 0.55;
}

.ws-pdp-flag {
  /* 不再绝对定位压在主图上：商品主图都带卖点文字，叠上去必压字。
     现在是右侧信息区里的一枚行内徽标。 */
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.ws-pdp-flag.best {
  background: var(--navy);
}

.ws-pdp-nophoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #b3bcc9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ws-pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, 86px);
  justify-content: start;
  gap: 10px;
  margin-top: 12px;
}

.ws-pdp-thumb {
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color 0.2s var(--ease);
}

.ws-pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.ws-pdp-thumb:hover {
  border-color: #c9d3df;
}

.ws-pdp-thumb.active {
  border-color: var(--orange);
}

/* --- 购买面板 --- */
.ws-pdp-info {
  padding-top: 4px;
}

.ws-pdp-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}

.ws-pdp-title {
  font-size: 34px;
  line-height: 1.18;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  text-wrap: balance;
}

.ws-pdp-tagline {
  font-size: 16px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.ws-pdp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

.ws-pdp-price .woocommerce-Price-amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
}

.ws-pdp-price del .woocommerce-Price-amount {
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
}

.ws-pdp-price del {
  text-decoration: line-through;
  margin-right: 10px;
}

.ws-pdp-price ins {
  text-decoration: none;
  background: none;
}

.ws-pdp-off {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(179, 25, 59, 0.08);
  padding: 5px 10px;
  border-radius: 999px;
}

.ws-pdp-summary {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: 22px;
}

/* ---- 颜色 / 款式切换色板 ---- */
.ws-color-switch {
  margin: 2px 0 20px;
}

.ws-cs-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 9px;
}

.ws-cs-label b {
  color: var(--ink);
  font-weight: 700;
}

.ws-cs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.ws-cs-swatch {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}

.ws-cs-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ws-cs-swatch:hover {
  transform: translateY(-1px);
  border-color: #cfd5e0;
}

.ws-cs-swatch.is-current {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 2px rgba(179, 25, 59, 0.25);
}

.ws-cs-dot {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  padding: 2px;
  color: var(--ink);
}

.ws-pdp-summary p:last-child {
  margin-bottom: 0;
}

/* 摘要要点：亚马逊五点太长，压成 13.5px 清单，粗体带出要点前缀 */
.ws-pdp-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-pdp-summary li {
  position: relative;
  margin: 0 0 7px;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.ws-pdp-summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.ws-pdp-summary li strong {
  color: var(--ink);
  font-weight: 700;
}

.ws-pdp-buy form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 0 0 16px;
}

.ws-pdp-buy .quantity {
  display: flex;
}

.ws-pdp-buy .quantity .qty {
  width: 74px;
  height: 52px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}

.ws-pdp-buy .single_add_to_cart_button {
  flex: 1;
  min-width: 180px;
  height: 52px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
}

/* 亚马逊成交按钮（澳线：站内只做内容，成交在 Amazon） */
.ws-btn-amz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  border-radius: 999px;
  background: #131a22;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(19, 26, 34, 0.9);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

.ws-btn-amz:hover {
  background: #232f3e;
  color: #fff;
}

.ws-btn-amz:active {
  transform: translateY(1px);
}

.ws-btn-amz svg {
  opacity: 0.85;
}

.ws-pdp-amz-note {
  margin: 10px 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* 未选规格时的禁用态：WooCommerce 默认给的是品牌紫，和本站完全不搭 */
.woocommerce div.product.ws-pdp-product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product.ws-pdp-product form.cart .single_add_to_cart_button:disabled,
.ws-pdp-buy .single_add_to_cart_button.disabled,
.ws-pdp-buy .single_add_to_cart_button:disabled {
  background: #e8ecf1;
  color: #98a2b3;
  cursor: not-allowed;
  opacity: 1;
  box-shadow: none;
}

.ws-pdp-buy .variations_button {
  display: flex;
  gap: 12px;
  width: 100%;
}

.ws-pdp-buy .reset_variations {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
}

.ws-pdp-buy .woocommerce-variation-availability p {
  font-size: 13px;
  margin: 0 0 10px;
}

.ws-pdp-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #0a8f6b;
  margin: 0 0 18px;
}

.ws-pdp-stock .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ws-pdp-stock.out-of-stock {
  color: var(--danger);
}

.ws-pdp-pay {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.ws-pdp-pay .lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 无 ASIN 的商品：不摆支付图标，只给一个联系入口 */
.ws-pdp-pay .ws-pdp-pay-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ws-pdp-pay .ws-pdp-pay-link:hover {
  color: var(--navy);
}

.ws-pdp-pay .ws-pay-icons {
  margin-top: 0;
}

.ws-pdp-pay .ws-pay-icons span {
  border-color: var(--line);
  color: #5f6b7d;
  background: #fff;
}

/* .ws-pdp-sku 已移除：站内 SKU 是图片目录名（AUWKickStandsAluBLK 之类），
   对买家没有意义，露出来反而像占位符。详情页不再渲染这一行。 */

/* --- 卖点图标行 --- */
.ws-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0 0 56px;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
}

.ws-benefits li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

.ws-benefits .ico {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(179, 25, 59, 0.07);
  color: var(--orange);
  margin-bottom: 4px;
}

.ws-benefits strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}

.ws-benefits .ws-benefit-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* --- 产品故事 --- */
.ws-pdp-story-wrap {
  background: var(--bg-soft);
  padding: 64px 0;
  margin-bottom: 0;
}

.ws-pdp-story-head {
  margin-bottom: 26px;
}

.ws-pdp-story-head .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}

.ws-pdp-story-head h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 100%;
  line-height: 1.25;
}

/* --- 故事区（交替模块）、规格、FAQ 统一节奏；交替模块与规格同宽（1080px） --- */
.ws-pdp-zig,
.ws-pdp-specs {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.ws-pdp-faq {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --- 规格 --- */
.ws-pdp-specs {
  padding: 60px 0 20px;
}

/* --- 一左一右交替模块（详情页故事区，参照 vegogarden 排版）--- */
.ws-zig-lead {
  max-width: 760px;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0 0 8px;
}

.ws-zig-lead p {
  margin: 0 0 18px;
}

.ws-zig-lead p:last-child {
  margin-bottom: 0;
}

.ws-zig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  padding: 42px 0 6px;
  margin-top: 42px;
  border-top: 1px solid var(--line);
}

.ws-zig-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.ws-zig.rev .ws-zig-media {
  order: 2;
}

.ws-zig-text h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.3;
}

.ws-zig-copy {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
}

.ws-zig-copy p {
  margin: 0 0 14px;
}

.ws-zig-copy p:last-child {
  margin-bottom: 0;
}

.ws-zig-copy em {
  color: var(--muted);
}

.ws-zig-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.ws-zig-points li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.ws-zig-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #f8e3e8;
}

.ws-zig-points li::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 5.5px;
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3193b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 移动端：图上文下堆叠，不再交替（交替在窄屏会让人误以为图配错了位置） */
@media (max-width: 900px) {
  .ws-zig {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 28px 0 4px;
    margin-top: 28px;
  }

  .ws-zig.rev .ws-zig-media {
    order: 0;
  }

  .ws-zig-media img {
    border-radius: 10px;
  }

  .ws-zig-text h3 {
    font-size: 19px;
  }

  .ws-zig-points {
    gap: 9px;
  }
}

/* --- FAQ --- */
.ws-pdp-faq {
  padding: 30px 0 60px;
}

.ws-faq-product {
  max-width: 100%;
  margin: 0;
}

.ws-faq-product summary::after {
  display: none;
}

.ws-faq-product summary svg {
  flex: none;
  color: var(--orange);
  transition: transform 0.2s var(--ease);
}

.ws-faq-product details[open] summary svg {
  transform: rotate(180deg);
}

.ws-faq-product .ws-faq-body {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

.ws-faq-product .ws-faq-body p:last-child {
  margin-bottom: 0;
}

/* --- 服务保障 --- */
.ws-assurance {
  background: var(--navy);
  padding: 56px 0;
}

.ws-assurance-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.ws-assurance-card {
  color: #c7d2e0;
}

.ws-assurance-card .ico {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--orange);
  margin-bottom: 14px;
}

.ws-assurance-card strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 7px;
}

.ws-assurance-card p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
  color: #9fb0c4;
}

/* --- 相关商品 --- */
.ws-pdp-related {
  padding: 64px 0;
}

/* --- 吸底购买条（桌面 + 移动） ---
   Vego 式 sticky ATC：主购买区滚出视口后出现，回到购买区 / 滚到页脚自动收起。
   桌面显示完整（缩略图 / 名称 / 价格 / 数量 / 双 CTA），小屏收紧到一行。 */
.ws-sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 26px rgba(30, 34, 79, 0.09);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 0.28s var(--ease), visibility 0.28s;
}

.ws-sticky-buy.show {
  transform: translateY(0);
  visibility: visible;
}

.ws-sticky-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.ws-sticky-thumb {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
}

.ws-sticky-thumb-empty { display: block; }

.ws-sticky-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-sticky-info strong {
  font-size: 14px;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-sticky-price { font-size: 13px; line-height: 1.35; }
.ws-sticky-price .woocommerce-Price-amount { font-size: 16px; font-weight: 800; color: var(--orange); }
.ws-sticky-price del { color: var(--muted); font-size: 12px; margin-right: 6px; }
.ws-sticky-price ins { text-decoration: none; }

.ws-sticky-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ws-sticky-qty {
  display: flex;
  align-items: center;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.ws-sticky-qty[hidden] { display: none; }
.ws-sticky-qty button {
  width: 34px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ws-sticky-qty button:hover { background: var(--bg-soft); }
.ws-sticky-qty input {
  width: 42px;
  height: 100%;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  -moz-appearance: textfield;
}
.ws-sticky-qty input::-webkit-outer-spin-button,
.ws-sticky-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ws-sticky-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.ws-sticky-btn:active { transform: translateY(1px); }
.ws-sticky-btn.primary { background: var(--navy); color: #fff; }
.ws-sticky-btn.primary:hover { background: var(--navy-2); }
.ws-sticky-btn.ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.ws-sticky-btn.ghost:hover { border-color: var(--navy); }

/* 滚回主购买区时给个短暂高亮，告诉用户按钮在哪 */
.ws-pdp-buy.ws-pulse form.cart { animation: ws-pulse 1.1s var(--ease); }
@keyframes ws-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 25, 59, 0); }
  35% { box-shadow: 0 0 0 4px rgba(179, 25, 59, 0.18); }
}

@media (max-width: 900px) {
  .ws-sticky-inner { padding: 8px 16px; gap: 10px; }
  .ws-sticky-thumb { width: 44px; height: 44px; }
  .ws-sticky-info strong { font-size: 12px; }
  .ws-sticky-qty { display: none; }
  .ws-sticky-btn { height: 38px; padding: 0 14px; font-size: 13px; }
}

@media (max-width: 600px) {
  .ws-sticky-thumb { display: none; }
  .ws-sticky-info { max-width: 42%; }
  .ws-sticky-btn.ghost { display: none; }
}
/* ============================================================
   22. 商品列表页（Collection）
   ============================================================ */
.ws-coll-hero {
  position: relative;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  padding: 26px 0 46px;
  overflow: hidden;
}

.ws-coll-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.28;
}

.ws-coll-hero.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(30, 34, 79, 0.9) 0%, rgba(30, 34, 79, 0.55) 100%);
}

.ws-coll-hero-inner {
  position: relative;
  z-index: 2;
}

.ws-coll-hero h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}

.ws-coll-desc {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.7;
  color: #c7d2e0;
}

.ws-coll-desc p:last-child {
  margin-bottom: 0;
}

.ws-coll-count {
  display: inline-block;
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa3ba;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 6px 14px;
}

.ws-breadcrumb.light,
.ws-breadcrumb.light a,
.ws-breadcrumb.light span {
  color: rgba(255, 255, 255, 0.62);
}

.ws-breadcrumb.light a:hover {
  color: var(--orange);
}

.ws-breadcrumb.light .current {
  color: #fff;
}

/* 分类 Chips */
.ws-chips-bar {
  padding: 22px 0 6px;
}

.ws-chips {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.ws-chips::-webkit-scrollbar {
  display: none;
}

.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  transition: all 0.16s var(--ease);
  white-space: nowrap;
}

.ws-chip .n {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

.ws-chip:hover {
  border-color: var(--navy);
  color: var(--navy);
}

.ws-chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.ws-chip.active .n {
  color: rgba(255, 255, 255, 0.6);
}

/* 工具栏 */
.ws-shop-bar .ws-result,
.ws-shop-bar .ws-result .woocommerce-result-count {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}

.ws-shop-bar .ws-order .woocommerce-ordering {
  margin: 0;
}

.ws-shop-bar .woocommerce-ordering select {
  height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 0 34px 0 14px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}

.ws-coll-body {
  padding-top: 18px;
  padding-bottom: 70px;
}

/* 空状态 */
.ws-coll-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--muted);
}

.ws-coll-empty svg {
  color: #c9d3df;
  margin-bottom: 18px;
}

.ws-coll-empty h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 10px;
}

.ws-coll-empty p {
  font-size: 15px;
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto 24px;
}

/* 底部说明 */
.ws-coll-foot {
  background: var(--bg-soft);
  padding: 60px 0;
}

.ws-coll-foot-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}

.ws-coll-foot h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.ws-coll-foot p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}

.ws-coll-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.ws-coll-points li {
  margin: 0;
  padding-left: 16px;
  border-left: 2.5px solid var(--orange);
}

.ws-coll-points strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 3px;
}

.ws-coll-points span {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ============================================================
   23. 促销页（Sale）
   ============================================================ */
.ws-sale-hero {
  background: linear-gradient(115deg, #8c2f0d 0%, var(--orange) 62%, #ff9066 100%);
  color: #fff;
  padding: 26px 0 52px;
}

.ws-sale-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe0d1;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
}

.ws-sale-hero h1 {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  line-height: 1;
}

.ws-sale-sub {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.ws-sale-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.ws-sale-stats > div {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  min-width: 132px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ws-sale-stats strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ws-sale-stats span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

.ws-sale-more {
  padding-bottom: 70px;
}

.ws-sale-more-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 38px;
}

.ws-sale-more-card h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 7px;
}

.ws-sale-more-card p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

.ws-sale-terms {
  background: var(--bg-soft);
  padding: 48px 0;
}

.ws-sale-terms h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 16px;
}

.ws-sale-terms ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 820px;
}

.ws-sale-terms li {
  position: relative;
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.ws-sale-terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

/* ============================================================
   24. 三个页面的响应式
   ============================================================ */
@media (max-width: 1024px) {
  .ws-pdp {
    gap: 36px;
  }

  .ws-benefits,
  .ws-assurance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ws-pdp-title {
    font-size: 30px;
  }

  .ws-coll-foot-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 900px) {
  .ws-pdp {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .ws-pdp-media {
    position: static;
  }

  .ws-pdp-title {
    font-size: 26px;
  }

  .ws-pdp-price .woocommerce-Price-amount {
    font-size: 26px;
  }

  .ws-pdp-story-wrap {
    padding: 44px 0;
  }

  .ws-pdp-story-head h2,
  .ws-coll-foot h2 {
    font-size: 22px;
  }

  .ws-coll-hero h1 {
    font-size: 32px;
  }

  .ws-sale-hero h1 {
    font-size: 40px;
  }

  .ws-assurance {
    padding: 40px 0;
  }

  .ws-pdp-related,
  .ws-pdp-specs {
    padding: 44px 0 10px;
  }
}

@media (max-width: 560px) {
  .ws-benefits,
  .ws-assurance-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ws-pdp-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }

  .ws-sale-stats {
    gap: 8px;
  }

  .ws-sale-stats > div {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
  }

  .ws-sale-stats strong {
    font-size: 20px;
  }

  .ws-sale-more-card {
    padding: 24px;
  }

  .ws-coll-hero {
    padding: 18px 0 36px;
  }

  .ws-coll-hero h1 {
    font-size: 26px;
  }
}

/* ============================================================
   25. 交付级修正
   对应 docs/UI设计标准.md 第 3.2 / 12 节 与 docs/交付标准.md D-06
   这一节只放"验收标准要求、但散落修复容易漏"的规则
   ============================================================ */

/* 25.1 可点区域：面包屑与文字链接高度只有 17–22px，手指点不中
   WCAG 2.2 SC 2.5.8 要求 ≥ 24×24；用 padding 撑高、负 margin 抵消视觉位移 */
.ws-breadcrumb a,
.ws-sec-head .more,
.ws-card .cat a,
.ws-card h3 a {
  display: inline-block;
  padding-block: 6px;
  margin-block: -6px;
}

/* 商品卡标题链接：20px 高，撑到 26px 更好点 */
.ws-card h3 a {
  display: block;
  padding-block: 3px;
  margin-block: -3px;
}

/* 25.2 键盘焦点必须可见（不许 outline: none） */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

.ws-hero :focus-visible,
.ws-footer :focus-visible,
.ws-newsletter :focus-visible,
.ws-panel :focus-visible {
  outline-color: var(--orange);
}

/* 25.3 作者头像：不请求 gravatar（海外访问超时，默认头像还会 404）
   filter 在 functions.php: ws_local_avatar() */
.ws-avatar,
.author-avatar img,
.sab-avatar img {
  border-radius: 50%;
  background: var(--navy);
  object-fit: cover;
}

/* 25.4 价格数字等宽，避免加购时抖动 */
.ws-price,
.ws-card .price,
.woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}

/* 25.6 WooCommerce 变体「Clear」链接：17px 高，手指点不中 */
.reset_variations {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
}

/* 25.5 减少动效偏好：系统设置关闭动画时全部降级 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   26. 移动端兼容基线（真机适配）
   ------------------------------------------------------------
   这一节解决的都是「桌面浏览器永远复现不了、只有真机才出」的问题。
   改动前请先读懂每一项的原因，不要为了"看起来更整齐"删掉。
   ============================================================ */

/* 26.1 刘海屏 / 全面屏安全区
 *
 * iPhone X 之后的机型底部有 home 指示条（约 34px），安卓全面屏有手势条。
 * 吸底按钮如果不让出这块，会正好落在手势区：用户一按就退出浏览器/切后台。
 * env() 在不支持的浏览器里返回 0，等于不生效，安全。
 *
 * ⚠️ 前提：<meta viewport> 必须带 viewport-fit=cover，否则 env() 在真机上永远返回 0，
 * 这一整套等于白写。（iOS 11+ 的行为，很多人踩过）
 */
:root {
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* 加到主屏当 App 打开时（standalone），页面会顶到刘海底下，
 * 必须自己让出顶部安全区，否则 logo 被刘海切掉。
 * 只在 standalone 生效，普通 Safari 里一行都不影响。 */
@media (display-mode: standalone) {
  body {
    padding-top: var(--safe-t);
  }
}

/* 吸底购买条：底部内边距 = 常规 10px + 安全区 */
.ws-sticky-inner {
  padding-bottom: calc(10px + var(--safe-b));
}

/* 提示条浮在底部，同样要抬离手势区 */
.ws-toast {
  bottom: calc(26px + var(--safe-b));
}

/* 购物车抽屉：内容贴到底部时补安全区，避免最后一行按钮被挡 */
.ws-drawer {
  padding-bottom: var(--safe-b);
}

/* 横屏时刘海在左右两侧，正文左右各让一点，否则字被切
 * 注意 .wrap 原本是 padding: 0 20px，这里必须用 max(20px, ...) 而不是写死 20px 以下，
 * 否则会悄悄把全站左右留白改窄。 */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(20px, var(--safe-l));
    padding-right: max(20px, var(--safe-r));
  }
}

/* 26.2 iOS 输入框缩放
 *
 * iOS Safari 在输入框 font-size < 16px 时，聚焦会自动把整个页面放大，
 * 用户输完还得手动捏回来 —— 这是移动端电商最常见的体验事故。
 * 桌面端保持原字号不影响，所以只在移动断点里抬到 16px。
 */
@media (max-width: 1024px) {
  .ws-search input,
  .ws-search input[type="search"],
  .ws-nl-form input,
  input#ws-nl-email,
  .ws-form input,
  .ws-form textarea,
  .ws-form select,
  .wpforms-container input[type="text"],
  .wpforms-container input[type="email"],
  .wpforms-container input[type="tel"],
  .wpforms-container input[type="url"],
  .wpforms-container input[type="number"],
  .wpforms-container textarea,
  .wpforms-container select,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce-page table.cart td.actions .coupon .input-text,
  .woocommerce #content table.cart td.actions .coupon .input-text,
  .select2-container--default .select2-search--dropdown .select2-search__field,
  .woocommerce-input-wrapper input,
  .woocommerce-input-wrapper textarea,
  select.orderby,
  .woocommerce-ordering select,
  /* 这两条选择器权重更高，不写上会被 2284 / 3775 行的 13.5~14px 盖掉 */
  .woocommerce .woocommerce-ordering select,
  .ws-shop-bar .woocommerce-ordering select {
    font-size: 16px;
  }
}

/* 26.3 移动浏览器地址栏导致 100vh 跳动
 *
 * 手机上 100vh 是「地址栏收起时」的高度，地址栏一出现内容就被压。
 * dvh 会跟着可视区域实时变，Apple Safari 15.4+ / Chrome 108+ 都支持。
 * 先写 vh 兜底，再写 dvh 覆盖，老浏览器忽略后者。
 */
@media (max-width: 1140px) {
  .ws-nav {
    max-height: calc(100vh - 66px);
    max-height: calc(100dvh - 66px - var(--safe-t));
  }
}

/* 26.4 支付徽标与角标：10px 在 360px 屏上读不出来 */
.ws-pay-icons span {
  font-size: 11px;
}

.ws-badge,
.ws-card .badge,
.ws-product-badge {
  font-size: 11px;
}

/* 26.5 目录插件的锚点高度 23px，差 1px 到 WCAG 2.2 的 24px 底线 */
.ez-toc-link {
  display: inline-block;
  padding-block: 2px;
}

/* 26.5b 商品页分类小标签：11px + 18px 高，手机上点不中（实际只有 41×18）
 * 只抬高点击区，视觉位置和字号不变 */
.ws-pdp-cat {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-block: 3px;
  margin-block: -3px 7px;
}

/* 26.6 隐私弹窗（CookieYes）在全面屏上被手势条压住
 *
 * 插件自己的 DOM 不改不了，只能从外面兜一层。
 * 它默认 fixed bottom:0，加安全区后按钮才点得到。
 */
.cky-consent-container.cky-box-bottom-left,
.cky-consent-container.cky-box-bottom-right,
.cky-consent-container.cky-banner-bottom {
  bottom: var(--safe-b) !important;
}

.cky-btn-accept,
.cky-btn-reject,
.cky-btn-customize {
  min-height: 44px;
}

/* 26.7 触摸设备去掉 hover 态的粘滞
 *
 * 手机点完按钮后 :hover 会一直粘着，颜色回不去，看着像卡死。
 * 用 hover:none 精确命中触摸设备，桌面不受影响。
 */
@media (hover: none) {
  .ws-btn:hover,
  .ws-card:hover,
  .ws-cat-card:hover {
    transform: none;
  }
}

/* 26.8 购物车/订单表格在窄屏的形态
 *
 * ⚠️ 曾经这里写成 `display:block + overflow-x:auto`（横向滚动）。
 * 那是错的：WooCommerce 的 shop_table_responsive 本来会把每行变成卡片，
 * 一旦把 table 改成 block 容器，列宽塌掉，商品名会被挤成 10px 宽、竖排 481px 高的一根线。
 * 正确做法是交给 WooCommerce 原生响应式，只把可能撑破的容器兜一层。
 */
@media (max-width: 640px) {
  .woocommerce-cart-form,
  .woocommerce-order-details {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 万一某个表格没有 shop_table_responsive 类，至少不让它撑破页面 */
  .woocommerce table.shop_table:not(.shop_table_responsive) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 26.9 长英文单词 / SKU 不许撑破容器 */
.ws-pdp-title,
.ws-card-title,
.ws-order-item-name,
.product-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 26.10 iOS 横屏会自动放大正文字号（阅读器行为），把设计稿的字阶打乱。
 * 声明 100% 表示"按我 CSS 写的来"，不跟随系统放大。
 * 注意：这不影响用户在浏览器设置里手动调字号（那是无障碍需求，必须保留）。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 26.11 滚动链隔离
 *
 * 手机上滑购物车抽屉/移动菜单到底部时，继续滑会把背后整页一起带动，
 * 观感像"页面在抖"。contain 让滚动到边界就停住。
 */
.ws-nav,
.ws-drawer,
.ws-drawer-body,
.ws-panel,
.cky-consent-container {
  overscroll-behavior: contain;
}

/* 26.12 点击反馈：去掉 Android Chrome 的蓝色高亮方块，
 * 改用主题自己的 :active 态（否则按下去是一个难看的矩形色块） */
a,
button,
.ws-btn,
.ws-card {
  -webkit-tap-highlight-color: rgba(30, 34, 79, 0.08);
}

/* 26.13 移动端搜索入口
 *
 * 页头搜索框在 ≤1140 是隐藏的，移动菜单里必须有替代品，否则手机上无法搜索。
 * 桌面端这一行不显示，不影响 mega menu。
 */
.ws-msearch-row {
  display: none;
}

@media (max-width: 1140px) {
  .ws-nav.open .ws-msearch-row {
    display: block;
    padding: 12px 0 14px;
  }

  .ws-msearch {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 4px 5px 4px 15px;
  }

  .ws-msearch input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    /* 16px 是 iOS 不放大页面的下限，别改小 */
    font-size: 16px;
    padding: 9px 0;
    outline: none;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
  }

  .ws-msearch button {
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .ws-msearch input::placeholder {
    color: var(--muted);
  }
}

/* 26.14 隐私弹窗的品牌化（CookieYes）
 *
 * 插件默认是亮蓝 #1863DC，在深蓝+品牌红的站上非常扎眼；
 * 而且它把颜色写成行内 style，必须 !important 才压得住。
 *
 * 层级设计：Accept 是实心品牌红（主动作），其余为描边（次要动作），
 * 不用三个同色实心按钮 —— 那等于没有推荐路径。
 */
.cky-btn-accept {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}

.cky-btn-accept:hover {
  background-color: var(--orange-d) !important;
  border-color: var(--orange-d) !important;
}

.cky-btn-reject,
.cky-btn-customize {
  background-color: transparent !important;
  border-color: rgba(30, 34, 79, 0.32) !important;
  color: var(--navy) !important;
}

.cky-btn-reject:hover,
.cky-btn-customize:hover {
  border-color: var(--navy) !important;
  background-color: #f4f6fa !important;
}

/* 右下角那个「重新打开设置」的小圆钮 */
.cky-btn-revisit-wrapper {
  background-color: var(--navy) !important;
}

/* 弹窗正文在 360px 屏上别用 14px 以下，读起来费劲 */
.cky-preference-content-wrapper,
.cky-consent-message,
.cky-title + p {
  font-size: 14px;
  line-height: 1.6;
}

/* 26.15 购物车 / 结账的移动端细节
 *
 * ⚠️ 作用域按「触摸能力」而不是纯宽度：
 * iPhone 横屏是 844px 宽，超过 768，但依然是手指在点。
 * 只用 max-width 判断会漏掉横屏手机（实测就是这样漏的）。
 *
 * 这几条都是"点了才出问题"的尺寸，桌面加大一点也无害，所以直接全局。
 */
.woocommerce a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  /* WooCommerce 默认 21×21（1em×1em @1.5em），手指很难点中 */
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
}

.woocommerce .shipping-calculator-button,
.woocommerce a.showlogin,
.woocommerce a.showcoupon {
  display: inline-block;
  min-height: 26px;
  padding-block: 3px;
}

@media (max-width: 768px) {
  .woocommerce table.cart td.product-remove {
    text-align: right;
    padding-bottom: 0;
  }

  /* 卡片里商品名给足宽度，别被右侧价格挤扁 */
  .woocommerce table.cart td.product-name {
    text-align: left;
  }

  .woocommerce table.cart td.product-name a {
    display: inline-block;
    font-size: 15px;
    line-height: 1.45;
    padding-block: 3px;
  }
}

/* 优惠券输入框：16px 是 iOS 不放大页面的下限。
 * 命中条件放宽到「窄屏 或 触摸设备」，横屏手机也能覆盖。 */
@media (max-width: 1024px), (hover: none) {
  .woocommerce table.cart td.actions .coupon .input-text,
  .woocommerce-page table.cart td.actions .coupon .input-text,
  #coupon_code {
    font-size: 16px;
    min-height: 44px;
  }
}

/* 26.16 小屏收一收竖向留白，把首屏还给内容
 *
 * 手机上 44px 的标题区下边距 + 38px 内边距，加起来就占掉小半屏，
 * 购物车/结账这种"要赶紧干活"的页面尤其浪费。
 */
@media (max-width: 640px) {
  .ws-page-head,
  .ws-page-head.compact {
    margin-bottom: 26px;
  }

  /* 通知条上下留白也收一点 */
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    padding: 13px 16px;
    margin-bottom: 16px;
  }
}

/* WooCommerce 的 info 框默认是亮蓝 #3a86ff 左边条，和品牌无关，换成品牌深蓝 */
.woocommerce-info {
  border-left-color: var(--navy);
  background: #f4f6fb;
}

/* 打印 */
@media print {
  .ws-header,
  .ws-footer,
  .ws-promo,
  .ws-drawer,
  .ws-overlay {
    display: none;
  }
}

/* ==========================================================================
 * 26.17 交付前观感修复（真机截图暴露、自动化指标抓不到的三个问题）
 *
 * 这三个都属于"跑分全过但看着别扭"，只能靠人眼在截图上看出来：
 *   1. 标题区下边距 26px + 内容区上内边距 44px，手机首屏白白空掉 70px
 *   2. 优惠券输入框被"Apply coupon"按钮挤到 150px，placeholder 显示成
 *      "Coupon cod"，用户不知道该填什么
 *   3. 隐私插件的"重新查看同意"浮动小圆标压在表单标签上
 * ========================================================================== */

@media (max-width: 640px) {
  /* 1. 标题区紧跟内容区时，去掉内容区那段上内边距
   *    标题区自己已有 26px 下边距，足够了 */
  .ws-page-head + .ws-section,
  .ws-page-head + .wrap.ws-section {
    padding-top: 8px;
  }

  /* 2. 购物车优惠券：输入框独占一行，按钮另起一行
   *    原来 input 和按钮抢宽度，input 只剩 150px，placeholder 被切成 "Coupon cod" */
  .woocommerce table.cart td.actions .coupon,
  .woocommerce-page table.cart td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    float: none;
  }

  .woocommerce table.cart td.actions .coupon .input-text,
  .woocommerce table.cart td.actions .coupon #coupon_code {
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
  }

  .woocommerce table.cart td.actions .coupon .button {
    flex: 1 1 100%;
    width: 100%;
  }

  .woocommerce table.cart td.actions .button[name="update_cart"],
  .woocommerce table.cart td.actions > .button {
    width: 100%;
    margin-top: 10px;
  }
}

/* 3. 隐私插件的浮动重访按钮：直接隐藏，改用页脚的正式入口
 *    CookieYes 默认一个 48px 圆标钉在左下角，手机上压住购物车的
 *    "Apply coupon" 和结账表单的字段标签，还会抢走误触的点击。
 *    页脚已有 "Cookie settings" 按钮（footer.php），走的是同一个按钮的 click()，
 *    所以隐藏这里不影响撤回同意的能力——只是把入口从"角落里的谜之图标"
 *    换成了一个有文字、能聚焦、能被屏幕阅读器读到的链接。 */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left,
.cky-revisit-hide {
  display: none !important;
}

/* 页脚的隐私设置入口：低调但可点，24×24 以上 */
.ws-cookie-settings {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 0;
  min-height: 24px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: .78;
}

.ws-cookie-settings:hover,
.ws-cookie-settings:focus-visible {
  opacity: 1;
}

.ws-cookie-settings[hidden] {
  display: none !important;
}

/* 悬浮标是全局固定元素，给它让出一点边距，避免最底部内容被吃掉 */
@media (max-width: 640px) {
  .woocommerce-cart .ws-section,
  .woocommerce-checkout .ws-section {
    padding-bottom: calc(26px + var(--safe-b));
  }
}

/* ==========================================================================
 * 26.18 矮屏优先：手机横屏 / 折叠屏外屏（高度 ≤520px）
 *
 * 横屏 iPhone 是 844×390 —— 宽度宽了，高度只剩 390px。
 * 竖屏那套留白照搬过来，首屏就变成"促销条 + 页头 + 标题区"三个色块，
 * 正文一个字都看不到。
 *
 * 这类视口要按高度断，不能按宽度断：844px 宽在宽度断点里算"桌面"，
 * 但它比任何一台手机都矮。用 @media (max-height) 才抓得住。
 * ========================================================================== */

@media (max-height: 520px) and (orientation: landscape) {
  /* 页头瘦身：66px → 52px，logo 34 → 26 */
  .ws-header .ws-bar {
    height: 52px;
    gap: 14px;
  }

  .ws-logo {
    --logo-h: 26px;
  }

  /* 标题区从 101px 压到 48px 左右 */
  .ws-page-head,
  .ws-page-head.compact {
    padding: 10px 0;
    margin-bottom: 12px;
  }

  .ws-page-head h1 {
    font-size: 23px;
    margin: 0;
  }

  .ws-page-head p {
    display: none;
  }

  /* 区块留白收一半，把内容往上提 */
  .ws-section {
    padding: 22px 0;
  }

  .ws-page-head + .ws-section {
    padding-top: 6px;
  }

  /* 横屏时吸底购买条会吃掉本就不多的高度，改成更紧凑的一行 */
  .ws-sticky-inner {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .ws-sticky-thumb { width: 38px; height: 38px; }
}

/* ==========================================================================
 * 27. 右侧滑出购物车（Cart Drawer）
 *
 * 交互参照 vegogarden：详情页点「Add to cart」从右侧滑出，页面不跳转。
 * 结构：
 *   .ws-cd（固定层，含遮罩）
 *     └ .ws-cd-panel（白色面板，translateX 进出）
 *         ├ .ws-cd-head（标题 + 关闭）
 *         └ .ws-cd-body#ws-cart-drawer-body（fragments 整块替换的就是这一层）
 *              └ .ws-cd-grid ─┬ .ws-cd-main（商品行 + 汇总）
 *                             └ .ws-cd-up（You may also like）
 *
 * 断点策略：≥1025 双栏（购物车 + 推荐），≤1024 单栏（推荐落到合计下面）。
 * 手机全宽，横屏/矮屏沿用 26.18 的紧凑留白。
 * ========================================================================== */

.ws-cd {
  position: fixed;
  inset: 0;
  z-index: 210;
  visibility: hidden;
  pointer-events: none;
}

.ws-cd.is-open {
  visibility: visible;
  pointer-events: auto;
}

.ws-cd-ov {
  position: absolute;
  inset: 0;
  background: rgba(20, 23, 54, 0.44);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.ws-cd.is-open .ws-cd-ov {
  opacity: 1;
}

.ws-cd-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  width: min(960px, 96vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.34s var(--ease);
  box-shadow: -24px 0 64px rgba(6, 21, 43, 0.22);
  padding-bottom: var(--safe-b);
  outline: none;
}

.ws-cd.is-open .ws-cd-panel {
  transform: none;
}

/* ---- 头部 ---- */
.ws-cd-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.ws-cd-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  display: flex;
  align-items: baseline;
  gap: 8px;
  outline: none;
}

.ws-cd-n {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.ws-cd-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
    border-color 0.14s var(--ease);
}

.ws-cd-close:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.ws-cd-close:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ---- 主体 ---- */
.ws-cd-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ws-cd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  /* stretch 而不是 start：让右栏的浅灰底撑满整条抽屉，不会在内容结束时断掉 */
  align-items: stretch;
  min-height: 100%;
}

.ws-cd-main {
  padding: 16px 24px 28px;
  min-width: 0;
}

/* ---- 免运费进度 ---- */
.ws-cd-ship {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  margin-bottom: 6px;
}

.ws-cd-ship p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink);
}

.ws-cd-ship p .amount {
  font-weight: 700;
  color: var(--orange-ink);
}

.ws-cd-ship-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #e3e8f1;
  overflow: hidden;
}

.ws-cd-ship-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--orange);
  transition: width 0.4s var(--ease);
}

.ws-cd-ship.is-done {
  background: #eef8f3;
}

.ws-cd-ship.is-done p {
  color: var(--ok);
  font-weight: 600;
}

.ws-cd-ship.is-done .ws-cd-ship-bar i {
  background: var(--ok);
}

/* ---- 商品行 ---- */
.ws-cd-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-cd-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.ws-cd-thumb {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  overflow: hidden;
}

.ws-cd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ws-cd-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-cd-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ws-cd-name:hover {
  color: var(--orange-ink);
}

.ws-cd-var {
  font-size: 12.5px;
  color: var(--muted);
}

.ws-cd-stock {
  font-size: 12px;
  color: var(--ok);
  font-weight: 600;
}

/* 商品行内直达 Amazon listing 的链接（替代原中转页） */
.ws-cd-amz {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--orange-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ws-cd-amz:hover {
  text-decoration: underline;
}

.ws-cd-qty {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.ws-cd-qbtn {
  width: 34px;
  height: 34px;
  border: 0;
  background: #fff;
  color: var(--navy);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ws-cd-qbtn:hover {
  background: var(--bg-soft);
}

.ws-cd-qty input {
  width: 42px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: 16px; /* iOS 聚焦不放大 */
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  -moz-appearance: textfield;
}

.ws-cd-qty input::-webkit-outer-spin-button,
.ws-cd-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ws-cd-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 74px;
}

.ws-cd-price .now {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.ws-cd-price .was {
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: line-through;
}

.ws-cd-rm {
  margin-top: 4px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ws-cd-rm:hover {
  background: var(--orange-soft);
  color: var(--danger);
}

/* ---- 汇总 ---- */
.ws-cd-sum {
  padding-top: 16px;
}

.ws-cd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--ink);
  padding: 5px 0;
}

.ws-cd-row > span:last-child {
  font-weight: 600;
  color: var(--navy);
}

.ws-cd-row.is-coupon > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
  font-weight: 600;
}

.ws-cd-row.is-coupon .minus {
  color: var(--ok);
}

.ws-cd-rm-coupon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ws-cd-rm-coupon:hover {
  background: var(--bg-soft);
  color: var(--danger);
}

.ws-cd-row.is-total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
}

.ws-cd-row.is-total > span:last-child {
  font-size: 20px;
}

.ws-cd-save {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-ink);
}

.ws-cd-tools {
  padding: 6px 0;
}

.ws-cd-link {
  border: 0;
  background: none;
  padding: 4px 0;
  min-height: 24px;
  font: inherit;
  font-size: 13.5px;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ws-cd-link:hover {
  color: var(--orange-ink);
}

.ws-cd-coupon {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ws-cd-coupon[hidden],
.ws-cd-note[hidden] {
  display: none;
}

.ws-cd-coupon input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}

.ws-cd-coupon input:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.ws-cd-coupon .ws-btn {
  padding: 10px 20px;
  font-size: 14px;
}

.ws-cd-coupon-msg {
  font-size: 13px;
  margin-top: 6px;
}

.ws-cd-coupon-msg.is-error {
  color: var(--danger);
}

.ws-cd-coupon-msg.is-ok {
  color: var(--ok);
}

.ws-cd-note textarea {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  resize: vertical;
}

.ws-cd-checkout {
  width: 100%;
  margin-top: 14px;
  min-height: 52px;
  font-size: 16px;
}

.ws-cd-viewcart {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ws-cd-viewcart:hover {
  color: var(--navy);
}

.ws-cd-trust {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--muted);
}

.ws-cd-trust li {
  position: relative;
  padding-left: 12px;
}

.ws-cd-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok);
}

/* ---- 右栏推荐 ---- */
.ws-cd-up {
  background: var(--bg-soft);
  border-left: 1px solid var(--line);
  padding: 18px 18px 24px;
  min-height: 100%;
}

.ws-cd-up h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-transform: uppercase;
}

.ws-cd-up-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-cd-up-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  align-items: center;
}

.ws-cd-up-img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-soft);
}

.ws-cd-up-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ws-cd-up-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-cd-up-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ws-cd-up-name:hover {
  color: var(--orange-ink);
}

.ws-cd-up-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.ws-cd-up-price .amount {
  color: var(--navy);
}

.ws-cd-up-price del {
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
}

.ws-cd-up-add {
  align-self: flex-start;
  min-height: 32px;
  padding: 5px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--navy);
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}

.ws-cd-up-add:hover {
  background: var(--navy);
  color: #fff;
}

.ws-cd-up-add.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* ---- 空车 ---- */
.ws-cd-empty {
  padding: 56px 24px;
  text-align: center;
  max-width: 380px;
  margin: 0 auto;
}

.ws-cd-empty-ico {
  display: inline-flex;
  color: var(--muted);
  margin-bottom: 12px;
}

.ws-cd-empty-t {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
}

.ws-cd-empty-s {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--muted);
}

/* ---- 加载态 ---- */
.ws-cd :is(.ws-btn, .ws-cd-up-add).is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* ---- 单栏：平板 / 手机 ---- */
@media (max-width: 1024px) {
  .ws-cd-panel {
    width: 100%;
    max-width: 520px;
  }

  .ws-cd-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws-cd-up {
    border-left: 0;
    border-top: 1px solid var(--line);
    min-height: 0;
    order: 2;
  }

  .ws-cd-main {
    order: 1;
  }
}

@media (max-width: 640px) {
  .ws-cd-panel {
    max-width: none;
  }

  .ws-cd-head {
    padding: 12px 16px;
  }

  .ws-cd-main {
    padding: 12px 16px 22px;
  }

  .ws-cd-line {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .ws-cd-thumb,
  .ws-cd-up-img {
    width: 64px;
    height: 64px;
  }

  .ws-cd-name {
    font-size: 14px;
  }

  .ws-cd-checkout {
    min-height: 48px;
  }
}

/* 矮屏（横屏）：压缩头部，别让标题吃掉四分之一屏 */
@media (max-height: 520px) and (orientation: landscape) {
  .ws-cd-head {
    padding: 8px 18px;
  }

  .ws-cd-head h2 {
    font-size: 16px;
  }

  .ws-cd-main {
    padding: 10px 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-cd-panel,
  .ws-cd-ov,
  .ws-cd-ship-bar i {
    transition: none;
  }
}

/* ============================================================
   28. 首页平台评价墙（Amazon / eBay）
   ------------------------------------------------------------
   两块面板上下叠：Amazon 有星级、eBay 有好评率，头部结构不同，
   卡片区共用同一套横向滚动逻辑（原生 scroll-snap，无轮播库）。
   ============================================================ */
.ws-sp {
  --sp-star: #c77700; /* 琥珀橙：白底 3.9:1，比 #ff9900 稳 */
  --sp-ebay-e: #0064d2;
  --sp-ebay-b: #e53238;
  --sp-ebay-a: #f5af02;
  --sp-ebay-y: #86b817;
  padding-top: 40px;
}

/* ---- 预告提示（只有管理员看得见） ---- */
.ws-sp-demo-note {
  background: #fff8e6;
  border: 1px solid #f0d79b;
  border-radius: var(--radius-sm);
  color: #6b4a00;
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 14px;
  margin: 0 0 28px;
}

/* ---- 区块标题 ---- */
.ws-sp-head {
  max-width: 720px;
  margin-bottom: 34px;
}

.ws-sp-head h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--navy);
  margin: 6px 0 10px;
  line-height: 1.25;
}

.ws-sp-head p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
}

/* ---- 面板 ---- */
.ws-sp-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 22px 24px 24px;
  margin-bottom: 20px;
}

.ws-sp-panel:last-child {
  margin-bottom: 0;
}

/* ---- 品牌头部 ---- */
.ws-sp-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.ws-sp-panel--ebay .ws-sp-brand {
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* Amazon 黑底 a 图标 + 橙色笑弧 */
.ws-amazon {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: #131921;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-amazon b {
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-3px);
}

.ws-amazon .smile {
  position: absolute;
  left: 11px;
  right: 9px;
  bottom: 9px;
  height: 8px;
  border-bottom: 2.5px solid #ff9900;
  border-radius: 0 0 55% 45% / 0 0 100% 100%;
}

.ws-amazon .smile::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -4px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 4px solid #ff9900;
  transform: rotate(-18deg);
}

.ws-sp-brand-txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ws-sp-name {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
}

.ws-sp-rate {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ws-sp-rate .num {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.ws-sp-rate .cnt {
  color: var(--muted);
  font-size: 13px;
}

/* ---- 星级（SVG 图形，灰底 + 按百分比裁剪的实心层，支持 4.7） ----
   用图形而不是 ★ 字符：字符在不同系统字重和间距不一致，
   半星靠两层文字裁剪边角会发虚；图形还能避免被对比度检查当成正文文本。 */
.ws-sp-stars {
  position: relative;
  display: inline-block;
  width: 84px;
  height: 15px;
  vertical-align: -2px;
  flex: 0 0 auto;
}

.ws-sp-stars svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ws-sp-stars-base polygon {
  fill: #dfe3ea;
}

.ws-sp-stars-fill {
  clip-path: inset(0 calc(100% - var(--pct, 100%)) 0 0);
}

.ws-sp-stars-fill polygon {
  fill: var(--sp-star);
}

.ws-sp-stars--big {
  width: 92px;
  height: 16.5px;
}

.ws-sp-stars--small {
  width: 70px;
  height: 12.6px;
  vertical-align: -1px;
}

/* ---- eBay 四色字标 ---- */
.ws-ebay {
  display: inline-flex;
  align-items: baseline;
  font-size: 26px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.045em;
  line-height: 1;
  user-select: none;
}

.ws-ebay i {
  font-style: italic;
}

.ws-ebay i:nth-child(1) {
  color: var(--sp-ebay-e);
}

.ws-ebay i:nth-child(2) {
  color: var(--sp-ebay-b);
}

.ws-ebay i:nth-child(3) {
  color: var(--sp-ebay-a);
}

.ws-ebay i:nth-child(4) {
  color: var(--sp-ebay-y);
}

.ws-sp-ebay-figs {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.ws-sp-ebay-rate {
  font-size: 15px;
  color: var(--ink);
}

.ws-sp-ebay-rate em {
  font-style: normal;
  color: var(--muted);
}

.ws-sp-ebay-rate b {
  font-size: 17px;
  font-weight: 800;
  color: var(--ok);
}

.ws-sp-ebay-count {
  font-size: 13px;
  color: var(--muted);
}

/* ---- 横向滚动条 ---- */
.ws-sp-rail-wrap {
  position: relative;
  padding: 0 4px;
}

.ws-sp-rail {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 2px 0 4px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ws-sp-rail::-webkit-scrollbar {
  display: none;
}

.ws-sp-rail:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---- 评价卡 ---- */
.ws-sp-card {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
  background: #f7f8fa;
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
}

.ws-sp-panel--ebay .ws-sp-card {
  flex: 0 0 calc((100% - 48px) / 4);
  min-height: 122px;
}

.ws-sp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.ws-sp-who {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-sp-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.ws-sp-check {
  color: #1a73e8;
  flex: 0 0 auto;
}

.ws-sp-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}

.ws-sp-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* eBay 卡：绿色 Positive + 右侧小字标 */
.ws-sp-pos {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ok);
  font-size: 13.5px;
}

.ws-sp-pos .ws-sp-check {
  color: var(--ok);
}

.ws-sp-pos b {
  font-weight: 600;
}

.ws-sp-card--ebay .ws-ebay {
  font-size: 17px;
  flex: 0 0 auto;
}

/* ---- 左右箭头 ---- */
.ws-sp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.18s var(--ease), background 0.18s var(--ease);
}

.ws-sp-nav--prev {
  left: -20px;
}

.ws-sp-nav--next {
  right: -20px;
}

.ws-sp-nav:hover {
  background: var(--bg-soft);
}

.ws-sp-nav:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.ws-sp-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* ---- 平板 ---- */
@media (max-width: 1024px) {
  .ws-sp-head h2 {
    font-size: 27px;
  }

  .ws-sp-card {
    flex: 0 0 calc((100% - 16px) / 2);
  }

  .ws-sp-panel--ebay .ws-sp-card {
    flex: 0 0 calc((100% - 32px) / 3);
  }
}

/* ---- 手机：单卡 + 露出下一张边缘，提示可滑 ---- */
@media (max-width: 720px) {
  .ws-sp {
    padding-top: 24px;
  }

  .ws-sp-head {
    margin-bottom: 24px;
  }

  .ws-sp-head h2 {
    font-size: 23px;
  }

  .ws-sp-head p {
    font-size: 14.5px;
  }

  .ws-sp-panel {
    padding: 16px 14px 16px;
    border-radius: var(--radius);
  }

  .ws-sp-panel--ebay .ws-sp-brand {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* 换行后品牌字标单独占一行，靠右对齐，别贴在左边显得散 */
  .ws-sp-panel--ebay .ws-sp-brand > .ws-ebay {
    margin-left: auto;
  }

  .ws-sp-card,
  .ws-sp-panel--ebay .ws-sp-card {
    flex: 0 0 84%;
    min-height: 0;
  }

  .ws-sp-rail-wrap {
    padding: 0;
  }

  .ws-sp-rail {
    gap: 12px;
    padding-bottom: 6px;
  }

  /* 手机上用手指滑，箭头占地方且难点，隐藏 */
  .ws-sp-nav {
    display: none;
  }

  .ws-ebay {
    font-size: 22px;
  }

  .ws-sp-card--ebay .ws-ebay {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-sp-rail {
    scroll-behavior: auto;
  }

  .ws-sp-nav {
    transition: none;
  }
}

/* ============================================================
   29. 全站 FAQ（首页 / collection / 详情页）
   ------------------------------------------------------------
   位置压在页面最底、默认全部折叠：它是给搜索引擎看的，不该占版面。
   折叠态内容仍在 DOM 里，Google / Bing 都能读到全文。
   桌面「左标题 + 右列表」两栏，≤900px 单栏。
   加减号用纯 CSS 画两条 2px 线，不用字符，避免被对比度审计当文本判定。
   ============================================================ */
.ws-faq-sec {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 34px 0 36px;
}

.ws-faq-sec-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px 52px;
  align-items: start;
}

.ws-faq-sec-head .eyebrow {
  display: block;
  margin-bottom: 9px;
}

.ws-faq-sec-head h2 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0 0 10px;
}

.ws-faq-sec-head p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

/* ---- 列表 ---- */
.ws-faq-compact {
  max-width: none;
  margin: 0;
}

.ws-faq-compact details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}

.ws-faq-compact details:first-child {
  border-top: 1px solid var(--line);
}

.ws-faq-compact summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 2px;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

.ws-faq-compact summary::-webkit-details-marker {
  display: none;
}

/* 覆盖第 20 节那段通用的字符加号 */
.ws-faq-compact summary::after {
  content: none;
}

.ws-faq-q {
  flex: 1 1 auto;
  min-width: 0;
}

.ws-faq-compact summary:hover .ws-faq-q {
  color: var(--orange-ink);
}

.ws-faq-compact summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.ws-faq-compact details[open] summary {
  color: var(--orange-ink);
}

/* ---- 圆圈加减号 ---- */
.ws-faq-ic {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid #cfd6e0;
  border-radius: 50%;
  background: var(--bg);
}

.ws-faq-ic::before,
.ws-faq-ic::after {
  content: "";
  position: absolute;
  background: var(--orange);
  border-radius: 2px;
  transition: transform 0.2s var(--ease);
}

.ws-faq-ic::before {
  left: 5px;
  right: 5px;
  top: 8.5px;
  height: 2px;
}

.ws-faq-ic::after {
  top: 5px;
  bottom: 5px;
  left: 8.5px;
  width: 2px;
}

.ws-faq-compact details[open] .ws-faq-ic::after {
  transform: scaleY(0);
}

/* ---- 答案 ---- */
.ws-faq-compact .ws-faq-body {
  padding: 0 44px 14px 2px;
  font-size: 13.8px;
  line-height: 1.72;
  color: var(--muted);
}

.ws-faq-compact .ws-faq-body p {
  margin: 0 0 10px;
}

.ws-faq-compact .ws-faq-body p:last-child {
  margin-bottom: 0;
}

/* ---- 平板 / 手机：单栏，标题在上 ---- */
@media (max-width: 900px) {
  .ws-faq-sec {
    padding: 26px 0 28px;
  }

  .ws-faq-sec-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ws-faq-sec-head h2 {
    font-size: 19px;
  }

  .ws-faq-sec-head p {
    font-size: 13px;
  }

  .ws-faq-compact summary {
    font-size: 14px;
    padding: 10px 0;
  }

  .ws-faq-compact .ws-faq-body {
    padding: 0 6px 14px 0;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-faq-ic::before,
  .ws-faq-ic::after {
    transition: none;
  }
}

/* ============================================================
   30. 空车 / 空结账
   ============================================================ */
.ws-cart-empty {
  max-width: 720px;
  padding: 8px 0 24px;
}

.ws-cart-empty-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.ws-cart-empty-title {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--navy);
}

.ws-cart-empty-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 24px;
}

.ws-cart-empty-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.ws-cart-empty-sub {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.ws-cart-empty-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-cart-empty-grid li a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ws-cart-empty-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}

.ws-cart-empty-grid .t {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

.ws-cart-empty-grid .p {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--body);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .ws-cart-empty-title {
    font-size: 25px;
  }

  .ws-cart-empty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .ws-cart-empty-cta .ws-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* WooCommerce 自带的空车提示与上面的说明重复，只留一份 */
.ws-content .wc-empty-cart-message,
.ws-content .cart-empty.woocommerce-info {
  display: none;
}

/* 空车页的次要按钮：ws-btn-ghost 默认是给深色底用的白字，这里是浅底 */
.ws-cart-empty-cta .ws-btn-ghost {
  color: var(--navy);
  border-color: var(--line);
  background: transparent;
}

.ws-cart-empty-cta .ws-btn-ghost:hover {
  border-color: var(--navy);
  background: var(--bg-soft);
}

/* ==========================================================================
 * 31. 结账页：把终点接回 Amazon
 *
 * 站内不成单，结账页只做一件事 —— 把购物车里的 ASIN 推给亚马逊。
 * 这块横幅必须比页面里任何东西都显眼，否则买家会先填一堆地址才发现不能付款。
 * ========================================================================== */
.ws-checkout-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 30px;
}

.ws-checkout-bridge-copy {
  flex: 1 1 320px;
  min-width: 0;
}

.ws-checkout-bridge-copy strong {
  display: block;
  font-size: 17px;
  margin-bottom: 6px;
}

.ws-checkout-bridge-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #c7d2e0;
}

.ws-checkout-bridge .ws-btn {
  flex: 0 0 auto;
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.ws-checkout-bridge .ws-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

@media (max-width: 640px) {
  .ws-checkout-bridge {
    padding: 18px 18px;
    gap: 16px;
  }

  .ws-checkout-bridge .ws-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 地址表单 / 登录 / 优惠券：站内不成单，这些填了也到不了亚马逊，直接收起 */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login {
  display: none;
}

/* 表单收起后，订单摘要要顶上来，不要留一段空白 */
.woocommerce-checkout #order_review_heading {
  margin-top: 0;
}

/* 运费与总价：运费由亚马逊按买家地址算，站内这两个数字一定是错的
 * （当前后台配的是 Standard shipping $12.95，跟澳洲买家实际付的没半点关系）。
 * 只保留商品小计，运费让亚马逊去算。 */
.woocommerce-checkout .woocommerce-shipping-totals,
.woocommerce-checkout .order-total,
.woocommerce-cart .woocommerce-shipping-totals,
.woocommerce-cart .order-total {
  display: none;
}

/* 顶部横幅已经说清「本站不收款、点按钮去亚马逊」，支付区那条同义提示就不重复了 */
.woocommerce-checkout #payment .woocommerce-info {
  display: none;
}

/* 支付区只剩一个去亚马逊的按钮，去掉原来那块灰色的网关外壳 */
.woocommerce-checkout #payment {
  background: transparent;
  padding: 0;
}

/* ==========================================================================
 * 32. PDP「选品清单」次按钮
 *
 * 主出口是 Shop on Amazon（橙色），加购只是把商品攒进清单，到结账页一次性
 * 推给亚马逊。两个按钮都做成主色会让人以为站内能下单，所以这里压成描边款。
 * ========================================================================== */
.ws-pdp-buy .ws-pdp-list form.cart {
  margin: 12px 0 8px;
}

/* 特异性要压过 .woocommerce button.button.alt（它把 color 写成了 #fff !important），
   否则白底白字，按钮看着是空的。 */
.woocommerce .ws-pdp-buy .ws-pdp-list .single_add_to_cart_button {
  background: #fff !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  box-shadow: none !important;
}

.woocommerce .ws-pdp-buy .ws-pdp-list .single_add_to_cart_button:hover {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}

.ws-pdp-buy .ws-pdp-list-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 12px;
}

/* ============================================================
   锁具安全等级梯 + 交叉推荐（PDP，仅 Locks 分类）
   等级数据来自 functions 里的 _ws_sec_level（1-5）
   ============================================================ */
.ws-pdp-ladder-hint {
  margin: 0 0 10px;
  font-size: 13px;
}

.ws-pdp-ladder-hint a {
  color: var(--orange-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(142, 18, 41, 0.3);
  padding-bottom: 1px;
}

.ws-pdp-ladder-hint a:hover {
  border-bottom-color: var(--orange-ink);
}

.ws-lock-ladder {
  padding: 76px 0;
  border-top: 1px solid var(--line);
  background: #fff;
}

.ws-lock-ladder .ws-sec-head {
  margin-bottom: 0;
}

/* ---- 阶梯条：5 段 ---- */
.ws-ladder {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.ws-ladder-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ws-ladder-step:hover {
  border-color: #cfd5e0;
  transform: translateY(-2px);
}

/* 可点击的阶梯段：整卡为拉伸链接，点击跳到该等级的代表锁 */
.ws-ladder-step.is-link {
  cursor: pointer;
}

.ws-ladder-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ws-ladder-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.ws-ladder-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.ws-ladder-spec {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

.ws-ladder-anti {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--orange-ink);
  line-height: 1.35;
}

.ws-ladder-step.is-current {
  border-color: var(--brand-red);
  background: var(--orange-soft);
  box-shadow: 0 10px 28px rgba(179, 25, 59, 0.13);
}

.ws-ladder-step.is-current .ws-ladder-num {
  background: var(--brand-red);
}

.ws-ladder-you {
  position: absolute;
  top: -10px;
  left: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}

.ws-ladder-soon {
  margin-top: 2px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- 推荐组 ---- */
.ws-lock-group {
  margin-top: 34px;
}

.ws-lock-group h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
}

.ws-lock-group h3 span {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
}

.ws-lock-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.ws-lock-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ws-lock-card:hover {
  border-color: #cfd5e0;
  box-shadow: 0 10px 26px rgba(30, 34, 79, 0.08);
}

.ws-lock-card-link {
  display: flex;
  gap: 13px;
  padding: 13px;
  text-decoration: none;
  color: inherit;
}

.ws-lock-card-media {
  position: relative;
  flex: 0 0 86px;
  width: 86px;
  height: 86px;
  border-radius: 10px;
  /* 同上：商品图纯白底，图区也用纯白 + 细描边，避免灰白接缝 */
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}

.ws-lock-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ws-lock-card-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.ws-lock-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ws-lock-card-body b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.ws-lock-card-why {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.ws-lock-card-price {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.ws-lock-card-amz {
  margin-top: auto;
  padding: 9px 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--orange-ink);
  text-decoration: none;
  background: #fcfcfd;
}

.ws-lock-card-amz:hover {
  background: var(--orange-soft);
  color: var(--orange-ink-2);
}

/* ---- 断点 ---- */
@media (max-width: 1100px) {
  .ws-ladder {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 平板竖屏（641-780）保持三列，只有手机才转横滑 —— 
   780 宽度下 62% 的卡片会被右边缘切一半，看着像坏了。 */
@media (max-width: 640px) {
  .ws-lock-ladder {
    padding: 52px 0;
  }

  /* 手机横滚：5 段塞不进两列，横滑比堆 3 屏更好读 */
  .ws-ladder {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin: 24px -20px 0;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
  }

  .ws-ladder::-webkit-scrollbar {
    display: none;
  }

  .ws-ladder-step {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  .ws-lock-group {
    margin-top: 28px;
  }

  .ws-lock-cards {
    grid-template-columns: 1fr;
  }
}

/* Related guides on product pages (v1.5.0): reverse internal links for
   crawler discovery and generative-engine citations. */
.ws-pdp-guides {
  max-width: 1120px;
  margin: 42px auto 0;
  padding: 26px 28px 30px;
  background: #faf8f3;
  border: 1px solid #e9e4d8;
  border-radius: 14px;
}
.ws-pdp-guides h2 {
  font-size: 20px;
  margin: 0 0 14px;
  color: #1e224f;
}
.ws-pdp-guides ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
}
.ws-pdp-guides li a {
  color: #1e224f;
  text-decoration: none;
  border-bottom: 1px solid #d8d2c4;
}
.ws-pdp-guides li a:hover {
  color: #b3193b;
  border-color: #b3193b;
}
@media (max-width: 700px) {
  .ws-pdp-guides ul { grid-template-columns: 1fr; }
}

/* ============================================================
   Vego Garden 可取精华 8 项 · 新增样式（2026-11-06）
   只增不覆盖：所有选择器带 ws- 前缀，不动任何既有规则。
   ============================================================ */

/* A5 产品卡：决策信息前置 + 次 CTA */
.ws-decision { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 10px; font-size: 12px; line-height: 1.45; color: #5b6577; }
.ws-decision span:first-child { font-weight: 700; color: #1e224f; }
/* Buy on Amazon AU：深蓝实心主按钮，供想一步直达 Amazon AU 的访客直接点击。
   选择器带 .ws-card .add 前缀，特异性高于卡片通用按钮规则，确保深色真正生效。 */
.ws-card .add.ws-add-amazon {
  display: block;
  margin-top: 8px;
  background: var(--navy);
  border: 1.5px solid var(--navy);
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 8px rgba(30, 34, 79, 0.14);
}
.ws-card .add.ws-add-amazon:hover {
  background: var(--navy-3);
  border-color: var(--navy-3);
  color: #fff;
  box-shadow: 0 6px 16px rgba(30, 34, 79, 0.26);
}
.ws-add-check { background: #f5f6f9; border: 1px dashed #c9d0dd; color: #4a5568 !important; font-size: 12px; text-align: center; }

/* A5 Notify me 内联表单 */
.ws-notify-btn { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; background: transparent; border: 1px solid #d5dbe6; border-radius: 8px; color: #1e224f; font-size: 12px; font-weight: 600; cursor: pointer; }
.ws-notify-btn:hover { border-color: #1e224f; }
.ws-notify-btn:disabled { opacity: .6; cursor: default; }
.ws-notify-form { margin-top: 8px; padding: 12px; background: #fafbfd; border: 1px solid #dfe4ec; border-radius: 10px; font-size: 12px; }
.ws-notify-form > label.ws-notify-title { display: block; margin: 0 0 7px; color: #39465b; font-weight: 600; line-height: 1.4; }
.ws-notify-form input[type=email] { width: 100%; padding: 8px 10px; border: 1px solid #ccd5e2; border-radius: 6px; font: inherit; }
/* 同意文案整体包进 span：flex 只排「复选框 + 一段文字」，链接不再被挤成右列 */
.ws-notify-consent { display: flex !important; gap: 8px; align-items: flex-start; margin: 9px 0 0 !important; color: #5b6577 !important; font-weight: 400 !important; line-height: 1.4; cursor: pointer; }
.ws-notify-consent input { flex: none; width: 15px; height: 15px; margin: 1px 0 0; accent-color: #1e224f; cursor: pointer; }
.ws-notify-consent span { min-width: 0; }
.ws-notify-consent a { color: #1558a6; text-decoration: underline; }
.ws-notify-actions { display: flex; gap: 8px; margin-top: 10px; }
.ws-notify-actions button { padding: 7px 12px; border-radius: 6px; border: 1px solid #ccd5e2; background: #fff; font: inherit; cursor: pointer; }
.ws-notify-actions button:disabled { opacity: .55; cursor: default; }
.ws-notify-submit { background: #1e224f !important; color: #fff; border-color: #1e224f !important; }
.ws-notify-msg { margin: 8px 0 0; color: #2e8b6b; }
.ws-notify-msg.is-error { color: #b3261e; }
.ws-notify-done { margin: 0; color: #2e8b6b; font-weight: 600; line-height: 1.45; }

/* A1 / A4 场景 hub */
.ws-hub { max-width: 900px; }
.ws-hub-lead { font-size: 17px; line-height: 1.7; color: #39465b; }
.ws-hub-h { margin: 38px 0 14px; font-size: 24px; color: #122a49; letter-spacing: -.01em; }
.ws-hub-note { font-size: 13px; color: #6b788d; margin: 10px 0 0; }
.ws-hub-evidence, .ws-hub-guides { padding-left: 0; list-style: none; margin: 0; }
.ws-hub-evidence li { padding: 10px 0; border-bottom: 1px solid #eceff5; }
.ws-hub-evidence a { font-weight: 700; color: #1558a6; }
.ws-hub-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px; }
.ws-hub-guides li { padding: 7px 0 7px 14px; border-left: 2px solid #e1e6ef; font-size: 14px; }
.ws-hub-guides a { color: #1e224f; text-decoration: none; }
.ws-hub-guides a:hover { color: #b3193b; }
.ws-hub-faq h3 { font-size: 16px; margin: 20px 0 6px; color: #122a49; }
.ws-hub-faq p { margin: 0; color: #4b5970; }
.ws-last-checked { margin-top: 34px; padding-top: 12px; border-top: 1px solid #e5e9f0; font-size: 12.5px; color: #8792a4; }
.ws-hub-related { margin-top: 38px; padding: 20px 22px; background: #f7f9fc; border-left: 3px solid #1e224f; border-radius: 0 10px 10px 0; }
.ws-hub-related h2 { font-size: 19px; margin: 0 0 6px; }
.ws-hub-related p { margin: 0 0 10px; font-size: 13px; color: #5b6577; }
.ws-hub-related ul { margin: 0; padding-left: 18px; }
.ws-hub-related a { color: #1558a6; font-weight: 600; }
.ws-goal-grid { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ws-goal-grid a { display: block; height: 100%; padding: 18px 20px; border: 1px solid #e2e7ef; border-radius: 12px; background: #fff; text-decoration: none; }
.ws-goal-grid a:hover { border-color: #1e224f; }
.ws-goal-grid strong { display: block; color: #122a49; font-size: 16px; margin-bottom: 5px; }
.ws-goal-grid span { display: block; color: #6b788d; font-size: 13px; }
.ws-asseenin-empty { padding: 18px; background: #fafbfd; border: 1px dashed #d9a441; border-radius: 10px; color: #6b788d; }

/* A7 三段混排 / 分类页导购条 */
.ws-tier { margin-bottom: 34px; }
.ws-tier-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; padding-left: 12px; border-left: 3px solid #b3193b; }
.ws-tier-head h3 { margin: 0; font-size: 20px; color: #122a49; }
.ws-tier-head p { margin: 0; font-size: 13px; color: #6b788d; }
.ws-tier-nav { margin: 0 0 28px; padding: 18px 20px; background: #f7f9fc; border: 1px solid #e5e9f0; border-radius: 12px; }
.ws-tier-nav-lead { margin: 0 0 12px; font-size: 13px; color: #5b6577; }
.ws-tier-nav-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ws-tier-nav-grid a { display: block; padding: 13px 15px; background: #fff; border: 1px solid #e2e7ef; border-radius: 9px; text-decoration: none; }
.ws-tier-nav-grid a:hover { border-color: #1e224f; }
.ws-tier-nav-grid strong { display: block; color: #122a49; font-size: 14px; }
.ws-tier-nav-grid span { display: block; margin-top: 3px; color: #6b788d; font-size: 12px; }

/* A8 吸底条关闭按钮 */
.ws-sticky-close { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid #dfe4ec; border-radius: 50%; color: #6b788d; cursor: pointer; }
.ws-sticky-close:hover { color: #b3193b; border-color: #b3193b; }

@media (max-width: 700px) {
  .ws-hub-guides, .ws-goal-grid, .ws-tier-nav-grid { grid-template-columns: 1fr; }
  .ws-tier-head { gap: 4px; }
  .ws-sticky-close { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; }
  .ws-sticky-inner { position: relative; padding-right: 42px; }
}

/* ============================================================
   Hero background motion (WS_HERO_MEDIA) - enhancements ONLY.
   Critical layout (absolute positioning, poster, scrim) is INLINED in
   inc/hero-media.php, so a stale/cached stylesheet can never break the
   hero again. See that file for the 2026-11-06 compatibility fix.
   With WS_HERO_MEDIA=off this whole block is inert.
   ============================================================ */
.ws-hero.has-hero-media {
  --ws-hero-pos: 62% 30%;
  min-height: 540px;
  padding: 96px 0 104px;
}
.ws-hero.has-hero-media .ws-hero-grid { z-index: 2; }
.ws-hero.has-hero-media::after { z-index: 1; }
.ws-hero.has-hero-media .ws-hero-art .chip {
  background: rgba(6,20,40,.66);
  border-color: rgba(255,255,255,.24);
}

/* Breakpoints: --ws-hero-pos is consumed by the inlined background
   and object-position declarations, so it still works without CSS vars
   (those browsers fall back to the literal 62% 30% written first). */
@media (max-width: 1200px) {
  .ws-hero.has-hero-media { --ws-hero-pos: 66% 28%; min-height: 500px; }
}
@media (max-width: 1024px) {
  .ws-hero.has-hero-media { --ws-hero-pos: 70% 26%; min-height: 0; padding: 72px 0 80px; }
}
@media (max-width: 700px) {
  .ws-hero.has-hero-media { --ws-hero-pos: 58% 24%; min-height: 0; padding: 64px 0 72px; }
  .ws-hero.has-hero-media .ws-hero-video { display: none; }
  /* Narrow/tall hero crops a 16:9 frame hard; calm the photo so the
     headline, paragraph and chips stay clearly readable. */
  .ws-hero.has-hero-media .ws-hero-media::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(4,14,31,.34) 0%, rgba(4,14,31,.58) 48%, rgba(4,14,31,.78) 100%);
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ws-hero.has-hero-media .ws-hero-video { display: none; }
}
/* Very old engines without object-fit: keep the CSS poster background. */
@supports not (object-fit: cover) {
  .ws-hero.has-hero-media .ws-hero-video { display: none; }
}

/* ============================================================
   Homepage tier grids: 3 columns so 6 / 3 / 3 cards fill every row
   (2026-11-06 22:25). Scoped to .ws-tier only — shop/category grids
   and topic-hub cards keep their original 4-column layout.
   Specificity 0,2,0 beats the global 3-col / 2-col breakpoints, so
   the 3-card tiers never drop to a half-empty 2-column row.
   ============================================================ */
.ws-tier .ws-grid-products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Phones: single column, so no partial row can exist. */
@media (max-width: 560px) {
  .ws-tier .ws-grid-products { grid-template-columns: 1fr; }
}

/* ============================================================
   25.7  Article author box (Simple Author Box), 2026-11-07.
   All 115 published guides share one editorial byline and the author
   bio is empty, so the plugin's 100px brand logo + bordered card was
   mostly blank space. Collapse it to one compact signature line.
   Keep the rel="author" /about/ link and the Person microdata in the
   HTML — only the presentation changes. Specificity 0,2,0+ beats the
   plugin's inline <style> rules regardless of stylesheet order.
   ============================================================ */
.ws-content .saboxplugin-wrap,
.ws-content .saboxplugin-wrap .saboxplugin-tab {
  border: 0;
  background: none;
  overflow: visible;
  padding: 0;
  margin: 0;
}
.ws-content .saboxplugin-wrap {
  margin: 30px 0 0;
  padding-top: 14px;
  border-top: 1px solid #e3e8f0;
}
.ws-content .saboxplugin-wrap .saboxplugin-tab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ws-content .saboxplugin-wrap .saboxplugin-gravatar {
  float: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  line-height: 0;
}
.ws-content .saboxplugin-wrap .saboxplugin-gravatar img {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1e224f; /* visible dot even if the SVG has not loaded yet */
}
.ws-content .saboxplugin-wrap .saboxplugin-authorname {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: #5b6577;
}
.ws-content .saboxplugin-wrap .saboxplugin-authorname::before {
  content: "By ";
}
.ws-content .saboxplugin-wrap .saboxplugin-authorname a {
  color: #1e224f;
  text-decoration: none;
}
.ws-content .saboxplugin-wrap .saboxplugin-authorname a:hover {
  text-decoration: underline;
}
/* The bio is empty on every article; hide its reserved block. */
.ws-content .saboxplugin-wrap .saboxplugin-desc,
.ws-content .saboxplugin-wrap .clearfix {
  display: none;
}

/* ============================================================
   25.8  Comment form at the end of article pages (2026-11-07).
   WordPress 7.1 theme-compat fallback outputs bare browser controls:
   the label sat to the LEFT of the textarea and the submit button was an
   unstyled system button. Copy is rewritten via core filters in
   functions.php (ws_comment_form_defaults / ws_comment_form_fields).
   Scoped to .ws-content #respond so WooCommerce review forms are untouched.
   ============================================================ */
.ws-content #respond {
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid #e3e8f0;
}
.ws-content #respond .comment-reply-title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
  color: #1e224f;
}
.ws-content #respond .comment-reply-title small {
  margin-left: 8px;
  font-size: 13px;
  font-weight: 400;
}
.ws-content #respond .ws-comment-notes {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #5b6577;
}
.ws-content #respond .ws-comment-notes a { color: #1558a6; }
.ws-content .ws-comment-form > p { margin: 0 0 14px; }
.ws-content .ws-comment-form label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #1e224f;
}
.ws-content .ws-comment-form .required { color: #b3193b; }
.ws-content .ws-comment-form textarea,
.ws-content .ws-comment-form input[type="text"],
.ws-content .ws-comment-form input[type="email"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccd5e2;
  border-radius: 8px;
  background: #fff;
  color: #1e224f;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
}
.ws-content .ws-comment-form textarea { min-height: 128px; resize: vertical; }
.ws-content .ws-comment-form textarea::placeholder,
.ws-content .ws-comment-form input::placeholder { color: #98a2b3; }
.ws-content .ws-comment-form textarea:focus,
.ws-content .ws-comment-form input[type="text"]:focus,
.ws-content .ws-comment-form input[type="email"]:focus {
  outline: 2px solid #1e224f;
  outline-offset: 1px;
  border-color: #1e224f;
}
.ws-content .ws-comment-consent label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: #5b6577;
  cursor: pointer;
}
.ws-content .ws-comment-consent input[type="checkbox"] {
  flex: none;
  margin-top: 3px;
}
.ws-content .ws-comment-form .form-submit { margin: 4px 0 0; }
.ws-content .ws-comment-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: #1e224f;
  color: #fff !important;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ws-content .ws-comment-submit:hover { background: #141736; }

/* Desktop: Name + Email side by side, everything else full width. */
@media (min-width: 700px) {
  .ws-content .ws-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
  }
  .ws-content .ws-comment-form > p { grid-column: 1 / -1; }
  .ws-content .ws-comment-form > .comment-form-author { grid-column: 1; }
  .ws-content .ws-comment-form > .comment-form-email { grid-column: 2; }
}
@media (max-width: 699px) {
  .ws-content #respond { margin-top: 34px; padding-top: 22px; }
}

/* ==========================================================================
 * 25.9 Ride by Goal 大菜单：摊开右侧留白、把面板压矮（凌总 2026-11-07）
 *
 * 根因：.ws-panel-main 是「图卡 1fr + 链接列 1.25fr」两列网格，但 goals
 * 面板没有 .ws-panel-cards 子元素，唯一内容只落在左侧窄列；.ws-panel-cols
 * 又固定 3 列，两个链接列各只剩约 160px，标题与右侧短标签抢宽度 → 标题折
 * 成 2-3 行、8 项撑出约 400px 高，右侧 1.25fr 整片空白。
 * 这里只改 #ws-panel-goals，Shop / Journal / Locks 等面板一行未动。
 * ========================================================================== */
#ws-panel-goals .ws-panel-main {
  grid-template-columns: minmax(0, 1fr);
  padding: 24px 0 20px;
}
#ws-panel-goals .ws-panel-cols {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px;
  padding-top: 0;
}
/* 8 个场景按列分栏：左 1-4 / 右 5-8，行数 8 → 4，顺序与原来一致 */
#ws-panel-goals .ws-panel-col:first-child ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px 28px;
}
#ws-panel-goals .ws-panel-col a {
  min-height: 34px;
  padding: 5px 8px;
  gap: 8px;
}

/* 25.9.1 去除同义重复（凌总 2026-11-07）
 * ws_nav_panel_goals() 把每个 hub 的 title（正式名）与 nav_label（短名）
 * 同时渲染进同一个 <a>：左侧 "Commuting & Bike Theft" / 右侧 "Commuting & theft"
 * 指向同一个 URL，分栏后又集中成两列，读起来像两套重复入口。
 * 这里只在 goals 面板的第一列隐藏短名，保留正式名、链接与 hub 配置数据；
 * MORE WAYS IN 列右侧的 6 / Original / Creators / Guides 是说明标签，不受影响。 */
#ws-panel-goals .ws-panel-col:first-child .n {
  display: none;
}

/* 窄屏仍按原有抽屉规则回退，避免 ID 特异性压过移动端单列布局 */
@media (max-width: 1140px) {
  #ws-panel-goals .ws-panel-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  #ws-panel-goals .ws-panel-col:first-child ul {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  #ws-panel-goals .ws-panel-cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * 25.10 Journal 大菜单：品类列分栏压矮、三组铺满整行（凌总 2026-11-07）
 *
 * 与 25.9 同源：Journal 面板也没有 .ws-panel-cards，三组链接全挤在
 * .ws-panel-main 左侧 1fr 里，右侧 1.25fr 整片空；8 个品类竖排撑高面板。
 * 只改 #ws-panel-journal，Shop / Ride by Goal / 品类面板一行未动。
 * ========================================================================== */
#ws-panel-journal .ws-panel-main {
  grid-template-columns: minmax(0, 1fr);
  padding: 24px 0 20px;
}
#ws-panel-journal .ws-panel-cols {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-top: 0;
}
/* 8 个品类按列分栏：左 1-4 / 右 5-8，行数 8 → 4，顺序与原来一致 */
#ws-panel-journal .ws-panel-col:first-child ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-auto-columns: minmax(0, 1fr);
  gap: 2px 24px;
}
#ws-panel-journal .ws-panel-col a {
  min-height: 34px;
  padding: 5px 8px;
  gap: 8px;
}

@media (max-width: 1140px) {
  #ws-panel-journal .ws-panel-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  #ws-panel-journal .ws-panel-col:first-child ul {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  #ws-panel-journal .ws-panel-cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * 25.11 即时联想搜索浮层（凌总 2026-11-07）
 * 点搜索框弹出带默认内容的面板；输入时纯前端实时匹配，参考 VegoGarden
 * 的「左建议/文章 + 右产品卡」形态。不接管表单提交、不改后端搜索。
 * ========================================================================== */
.ws-live {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 8;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 26px 50px -14px rgba(30, 34, 79, 0.22);
}
.ws-live[hidden] { display: none; }
.ws-live-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 24px 28px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  max-height: min(70vh, 620px);
  overflow-y: auto;
}
.ws-live h3 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.ws-live-block { margin-bottom: 22px; }
.ws-live-block[hidden] { display: none; }
.ws-live-left ul { list-style: none; margin: 0; padding: 0; }
.ws-live-left li a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  color: #3c495c;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.14s var(--ease), background 0.14s var(--ease);
}
.ws-live-left li a:hover,
.ws-live-left li a.is-active { background: var(--bg-soft); color: var(--orange-ink); }
.ws-live-left .ico { flex: none; width: 16px; height: 16px; color: var(--muted); }
.ws-live-left .ico svg { display: block; width: 100%; height: 100%; }
.ws-live-left .t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-live-none { padding: 6px 0; color: var(--muted); font-size: 13px; }
.ws-live-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.ws-live-all:hover { background: #141736; color: #fff; }
.ws-live-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ws-live-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  padding-bottom: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.ws-live-card:hover {
  border-color: var(--navy);
  box-shadow: 0 8px 20px -10px rgba(30, 34, 79, 0.35);
}
.ws-live-card .pic { display: block; height: 110px; background: #fff; overflow: hidden; }
.ws-live-card .pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ws-live-noimg { display: block; width: 100%; height: 100%; background: var(--bg-soft); }
.ws-live-card .nm {
  display: block;
  min-height: 2.4em;
  padding: 10px 12px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.ws-live-card .pr { display: block; padding: 4px 12px 0; font-size: 13px; font-weight: 700; color: var(--brand-red); }
.ws-live-empty { margin: 10px 0 0; color: var(--muted); font-size: 13px; }

@media (max-width: 1140px) {
  .ws-live-in {
    /* 必须 minmax(0,1fr)：用 1fr 时子网格的固有最小宽度会把轨道撑出视口，
       实测 375px 容器被撑成 419px，第二列产品卡被裁掉。 */
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 18px 20px 24px;
    max-height: calc(100vh - 66px);
  }
  .ws-live-products { min-width: 0; }
  .ws-live-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-live-card .pic { height: 100px; }
}
@media (max-width: 560px) {
  .ws-live-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ws-live-card .pic { height: 88px; }
  .ws-live-card .nm { font-size: 12px; padding: 8px 9px 0; }
  .ws-live-card .pr { font-size: 12px; padding: 3px 9px 0; }
}