/*
 * Foshan Select — Retail：商城相关页面的视觉。
 *
 * ── 2026-08-13 大改：从"米色/衬线/金色"换成 Woodmart 风格 ──
 * 用户看了 https://woodmart.xtemos.com/home-rtl/?rtl 之后明确要求商城改成那个样式。
 * 色值和字体是**在那个页面上用 JS 读 CSS 变量实测取到的**，不是目测：
 *   --wd-primary-color: #83b735   （主点缀色，草绿；价格、按钮、角标）
 *   --wd-alternative-color: #fbbc34（次点缀色，琥珀；促销/提示）
 *   --wd-title-color: #242424     （标题）
 *   --wd-text-color: #767676      （正文）
 *   --wd-link-color: #333333      （链接）
 *   背景 #fff，边框 rgba(0,0,0,.1)，字体 Lato 无衬线，正文 15px，标题 600 不大写
 *
 * ── 作用范围 ──
 * 用户选的是"只改商城相关页"：商城首页 /shop/、单品页、购物车、结账。产品介绍页
 * （/products.html 那一套 B2B 页面）和站点其余页面**仍然是原来的米色/衬线/金色**，
 * 完全不受影响——这跟之前定的"商城跟产品介绍要分开"是一致的，现在两边视觉上也彻底分开了。
 * 本文件只在 WooCommerce 页面被 enqueue（见 inc/theme-assets.php），不会外溢。
 *
 * 注意：站点的页头/页脚仍然是主题自己的（深色页脚、衬线品牌字），所以商城页面会是
 * "Woodmart 风格的内容区 + Foshan Select 的页头页脚"。这是刻意的，不然要改主题文件。
 */

.woocommerce,
.woocommerce-page {
  /* 商城专用色板。变量名用 --fs-shop-* 前缀，跟站点原有的 --fs-cream/--fs-gold 区分开，
     免得以后有人在别的页面误用了商城的色。 */
  /* 2026-08-15 方案C「明快集市」：主色从 Woodmart 草绿换成 琥珀+藏青。
     琥珀继承自原 Woodmart 次色 #fbbc34（微调到 #F5A524），藏青是新引入的主深色。
     圆角整体加大（--fs-shop-r），卡片从"细线分隔的货架"改成"留白+圆角瓷砖"。 */
  --fs-shop-primary: #F5A524;
  --fs-shop-primary-dark: #e0940f;
  --fs-shop-navy: #1D2B4F;
  --fs-shop-alt: #fbbc34;
  --fs-shop-title: #1c2333;
  --fs-shop-text: #4d5568;
  --fs-shop-link: #1D2B4F;
  --fs-shop-bg: #fff;
  --fs-shop-soft: #f2f4f8;
  --fs-shop-brd: rgba(0, 0, 0, 0.08);
  --fs-shop-r: 14px;
  --fs-shop-font: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;

  font-family: var(--fs-shop-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--fs-shop-text);
  background: var(--fs-shop-bg);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.woocommerce-page h4 {
  font-family: var(--fs-shop-font);
  font-weight: 600;
  color: var(--fs-shop-title);
  text-transform: none;
  letter-spacing: 0;
}

.woocommerce a,
.woocommerce-page a {
  color: var(--fs-shop-link);
}

.woocommerce a:hover,
.woocommerce-page a:hover {
  color: var(--fs-shop-primary);
}

/* ───────────────────────── 按钮 ─────────────────────────
 * Woodmart 的主按钮是实心草绿、微圆角、大写小字距。
 *
 * 关于权重：WooCommerce 给主行动按钮加的是 class="button alt"，它自己的规则
 * `.woocommerce button.button.alt` 是 (0,2,1)，比 `.woocommerce button.button` (0,1,1) 高，
 * 所以主按钮必须单独用重复类名 `.alt.alt` 抬到 (0,3,1) 才盖得住。这是 2026-08-12 加购按钮
 * 一直是 WooCommerce 品牌紫的原因，别再踩一次。不用 !important——那会把支付插件给按钮定的
 * 状态色（禁用中/加载中）也锁死，反而更难调。
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce a.button.alt.alt,
.woocommerce button.button.alt.alt,
.woocommerce input.button.alt.alt,
.woocommerce #respond input#submit.alt.alt,
.woocommerce div.product form.cart .button.single_add_to_cart_button {
  background-color: var(--fs-shop-primary);
  border: 1px solid var(--fs-shop-primary);
  color: var(--fs-shop-navy);
  border-radius: 24px;
  font-family: var(--fs-shop-font);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 12px 26px;
  line-height: 1.4;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt.alt:hover,
.woocommerce button.button.alt.alt:hover,
.woocommerce input.button.alt.alt:hover,
.woocommerce #respond input#submit.alt.alt:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background-color: var(--fs-shop-primary-dark);
  border-color: var(--fs-shop-primary-dark);
  color: var(--fs-shop-navy);
}

.woocommerce button.button.alt.alt:disabled,
.woocommerce button.button.alt.alt:disabled[disabled] {
  background-color: #c3c3c3;
  border-color: #c3c3c3;
  color: #fff;
}

/* ─────────────────── 商城首页 hero（方案C：藏青色块 + 琥珀 CTA + 右侧大图）─────────────────── */
.woocommerce .fs-retail-shop-hero,
.woocommerce-page .fs-retail-shop-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  overflow: hidden;
  background: var(--fs-shop-navy);
  border: 0;
  border-radius: 20px;
  padding: 0;
  margin: 0 0 44px;
}

.fs-retail-shop-hero__content {
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fs-retail-shop-hero__pill {
  align-self: flex-start;
  background: rgba(245, 165, 36, 0.18);
  color: var(--fs-shop-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 16px;
  padding: 6px 14px;
  margin: 0 0 16px;
}

.fs-retail-shop-hero__eyebrow { display: none; }

.woocommerce .fs-retail-shop-hero__title,
.woocommerce-page .fs-retail-shop-hero__title {
  margin: 0 0 14px;
  font-family: var(--fs-shop-font);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
}

.fs-retail-shop-hero__intro {
  margin: 0 0 26px;
  max-width: 440px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #c8d2e8;
}

.fs-retail-shop-hero__actions {
  margin: 0;
  display: flex;
  gap: 12px;
}

.woocommerce .fs-retail-shop-hero__link,
.woocommerce-page .fs-retail-shop-hero__link {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 26px;
  background: var(--fs-shop-primary);
  border: 2px solid var(--fs-shop-primary);
  color: var(--fs-shop-navy);
  font-size: 13.5px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.woocommerce .fs-retail-shop-hero__link:hover,
.woocommerce-page .fs-retail-shop-hero__link:hover {
  background: var(--fs-shop-primary-dark);
  border-color: var(--fs-shop-primary-dark);
  color: var(--fs-shop-navy);
}

/* ghost 变体的白字曾被 .woocommerce a 的 (0,1,1) 压过（藏青字落在藏青底上＝隐形，
   2026-08-15 上线后实测发现），所以这里也带前缀抬到 (0,2,0)+。 */
.woocommerce .fs-retail-shop-hero__link--ghost,
.woocommerce .fs-retail-shop-hero__link--ghost:hover,
.woocommerce-page .fs-retail-shop-hero__link--ghost,
.woocommerce-page .fs-retail-shop-hero__link--ghost:hover {
  background: transparent;
  border-color: #3d4c74;
  color: #fff;
}

.fs-retail-shop-hero__image {
  background-size: cover;
  background-position: center;
  min-height: 340px;
}

.fs-retail-shop-hero--noimg { grid-template-columns: 1fr; }
.fs-retail-shop-hero--noimg .fs-retail-shop-hero__image { display: none; }

@media (max-width: 820px) {
  .woocommerce .fs-retail-shop-hero,
  .woocommerce-page .fs-retail-shop-hero { grid-template-columns: 1fr; }
  .fs-retail-shop-hero__image { min-height: 220px; order: -1; }
  .woocommerce .fs-retail-shop-hero__title { font-size: 28px; }
  .fs-retail-shop-hero__content { padding: 32px 26px; }
}

/* ─────────────────── 分类入口（方案C：彩色圆角瓷砖，7 列 × 2 行）───────────────────
 * 14 个分类不再是一面白卡片墙：小瓷砖 + 柔和底色轮换。没有图的分类不出灰块，
 * 由 PHP 侧输出中文名当"文字图"（.fs-retail-shop-cats__thumb--blank），看起来是刻意的设计
 * 而不是缺图。底色用 nth-child 轮换，加分类不用改 CSS。 */
.fs-retail-shop-cats {
  margin: 0 0 44px;
}

.fs-retail-shop-cats__title {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 800;
  color: var(--fs-shop-title);
}

.fs-retail-shop-cats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) { .fs-retail-shop-cats__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .fs-retail-shop-cats__grid { grid-template-columns: repeat(2, 1fr); } }

.fs-retail-shop-cats__item { margin: 0; padding: 0; list-style: none; }

.fs-retail-shop-cats__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  text-decoration: none;
  color: var(--fs-shop-title);
  border: 0;
  border-radius: var(--fs-shop-r);
  overflow: hidden;
  background: #EEF3FA;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

/* 底色轮换：7 色循环，同一行不重色 */
.fs-retail-shop-cats__item:nth-child(7n+2) .fs-retail-shop-cats__card { background: #FDF3E3; }
.fs-retail-shop-cats__item:nth-child(7n+3) .fs-retail-shop-cats__card { background: #EFF5EE; }
.fs-retail-shop-cats__item:nth-child(7n+4) .fs-retail-shop-cats__card { background: #F7F1F7; }
.fs-retail-shop-cats__item:nth-child(7n+5) .fs-retail-shop-cats__card { background: #FBF0EC; }
.fs-retail-shop-cats__item:nth-child(7n+6) .fs-retail-shop-cats__card { background: #EFF4F4; }
.fs-retail-shop-cats__item:nth-child(7n)   .fs-retail-shop-cats__card { background: #F5F3EC; }

.fs-retail-shop-cats__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(29, 43, 79, 0.10);
  color: var(--fs-shop-title);
}

.fs-retail-shop-cats__thumb {
  display: block;
  aspect-ratio: 1.25;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  background-color: transparent;
}

.fs-retail-shop-cats__thumb--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  color: var(--fs-shop-navy);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.fs-retail-shop-cats__name {
  display: block;
  padding: 0;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
}

.fs-retail-shop-cats__count {
  display: block;
  padding: 0;
  font-size: 11px;
  color: #8b93a5;
  text-align: left;
}

/* ─────────────────── 商品网格（Woodmart 卡片样式）───────────────────
 * 特征：白卡、细分隔线、图片区浅灰底、标题居中 600、分类行灰色小字、价格草绿居中。
 */
/*
 * ⚠️ 把 ul.products 改成 grid 之前，必须先干掉 WooCommerce 自带的 clearfix 伪元素。
 *
 * WooCommerce 默认样式里有：
 *   .woocommerce ul.products::before  { content: " "; display: table; }
 *   .woocommerce ul.products::after   { content: " "; display: table; clear: both; }
 * 这是给它原来的 float 布局清浮动用的，在 float 布局里不占位。
 * 但**在 grid（和 flex）容器里，::before / ::after 会变成真正的网格项**——
 * 结果就是 `::before` 占掉第一格、把所有商品整体往后挤一格，页面上表现为
 * "第一行最左边空一块、但右边和下一行都正常"（2026-08-13 用户报的就是这个）。
 * 实测：第一个商品的 left 正好等于一个列宽。
 *
 * 同理 div.product 那边也被我改成了 flex 布局，一并预防性关掉。
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce div.product::before,
.woocommerce div.product::after {
  content: none;
  display: none;
}

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 30px 22px;
  margin: 0 0 44px;
  padding: 0;
  border: 0;
}

.woocommerce ul.products li.product {
  margin: 0 !important;
  padding: 0;
  width: auto !important;
  float: none !important;
  border: 0;
  text-align: left;
  background: transparent;
  position: relative;
  transition: none;
  /* 卡片内部纵向 flex：让价格永远贴着卡片底部对齐。商品名有的一行有的两行，
     不这么做的话同一行卡片的价格会高高低低，是最显廉价的一种参差。 */
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product .price {
  margin-top: auto;
}

.woocommerce ul.products li.product:hover { box-shadow: none; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.02); }

/*
 * 商品图统一裁成正方形。实测导入进来的家具照片长宽比各不相同（有横构图有竖构图），
 * 不统一的话每张卡片的图片高度都不一样，标题和价格会错落成锯齿状，跟 Woodmart 那种
 * 整齐的网格差得很远。用 aspect-ratio + object-fit:cover 居中裁切，不变形。
 */
.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 0 12px;
  background: var(--fs-shop-soft);
  box-shadow: none;
  border-radius: var(--fs-shop-r);
  transition: transform 0.25s ease;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0 0 4px !important;
  font-family: var(--fs-shop-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fs-shop-title);
}

/* 卡片上的分类行（由 inc/product-layouts.php 输出），对应 Woodmart 卡片里
   标题下面那行灰色小字。 */
.fs-retail-loop-cat {
  display: block;
  padding: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #98a0b0;
}

/* 卡片内 <a>（图+标题+分类行+价格的容器）转 flex 列，用 order 把分类行排到
   标题上方（方案C 的卡片信息顺序：分类 → 标题 → 价格），DOM 顺序不动。 */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img { order: 0; }
.woocommerce ul.products li.product .fs-retail-loop-cat { order: 1; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { order: 2; }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .price { order: 3; }

.woocommerce ul.products li.product .price {
  display: block;
  padding: 0;
  color: var(--fs-shop-navy);
  font-size: 16px;
  font-weight: 800;
}

.woocommerce ul.products li.product .price del {
  color: #b5b5b5;
  font-weight: 400;
  opacity: 1;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--fs-shop-primary);
}

/* 圆形角标（Woodmart 是左上角的绿色圆片） */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0;
  min-width: 52px;
  min-height: 52px;
  width: 52px;
  height: 52px;
  line-height: 52px;
  padding: 0;
  border-radius: 12px;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  line-height: 1.4;
  padding: 5px 11px;
  background: var(--fs-shop-navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}

.woocommerce ul.products li.product .button {
  margin-top: 14px;
}

/* ─────────────────── 单品页 ─────────────────── */
.woocommerce div.product .fs-retail-product-title,
.woocommerce div.product .product_title {
  font-family: var(--fs-shop-font);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fs-shop-title);
  margin: 0 0 14px;
  line-height: 1.3;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--fs-shop-primary);
  font-size: 24px;
  font-weight: 600;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
  color: #b5b5b5;
  font-weight: 400;
  opacity: 1;
  font-size: 18px;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
  text-decoration: none;
  color: var(--fs-shop-primary);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--fs-shop-font);
  color: var(--fs-shop-text);
  font-size: 15px;
  line-height: 1.75;
  margin: 14px 0 22px;
}

.woocommerce div.product form.cart {
  margin: 22px 0 8px;
}

.woocommerce div.product form.cart .quantity input.qty {
  border: 1px solid var(--fs-shop-brd);
  border-radius: 5px;
  height: 46px;
  text-align: center;
  font-family: var(--fs-shop-font);
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
  height: 46px;
  padding: 0 32px;
}

.woocommerce div.product .product_meta {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--fs-shop-brd);
  font-size: 13px;
  color: var(--fs-shop-text);
}

.woocommerce div.product div.images {
  background: transparent;
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}

.woocommerce div.product div.images img {
  border-radius: 8px;
  background: var(--fs-shop-soft);
}

/* 商品详情 tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--fs-shop-brd);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom-color: var(--fs-shop-brd);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0 24px 0 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: inline-block;
  padding: 12px 0;
  font-family: var(--fs-shop-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-shop-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--fs-shop-title);
  border-bottom-color: var(--fs-shop-primary);
}

/* ═══════════════ 三套单品页版式（见 inc/product-layouts.php）═══════════════
 *
 * 三套版式共用同一套 WooCommerce 钩子结构，长相差异绝大部分在这里用 CSS 表达，
 * body 上的 `fs-retail-layout-<key>` class 是开关。
 *
 * WooCommerce 默认用 float 排图片列/信息列（images 48% left、summary 48% right），
 * 这里统一改成 flex 容器再分配宽度，比覆盖 float 百分比可靠（float 在窄屏和
 * 有额外元素插入时容易塌）。
 */
.woocommerce div.product {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 4%;
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
  float: none !important;
  margin: 0 0 32px !important;
}

/* 让标签页、相关商品这类整宽区块另起一行 */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-gallery + .summary ~ * {
  flex: 0 0 100%;
  width: 100%;
}

/* ── 画廊式（默认）：图片列更宽，让成品家具的质感撑满 ── */
.fs-retail-layout-gallery.woocommerce div.product div.images,
.fs-retail-layout-gallery .woocommerce div.product div.images {
  flex: 0 0 56%;
  width: 56% !important;
}

.fs-retail-layout-gallery.woocommerce div.product div.summary,
.fs-retail-layout-gallery .woocommerce div.product div.summary {
  flex: 0 0 40%;
  width: 40% !important;
}

/* ── 参数表式：信息列更宽，装得下规格表 ── */
.fs-retail-layout-spec.woocommerce div.product div.images,
.fs-retail-layout-spec .woocommerce div.product div.images {
  flex: 0 0 44%;
  width: 44% !important;
}

.fs-retail-layout-spec.woocommerce div.product div.summary,
.fs-retail-layout-spec .woocommerce div.product div.summary {
  flex: 0 0 52%;
  width: 52% !important;
}

.fs-retail-spec-block {
  margin: 26px 0 0;
  padding: 20px 22px;
  background: var(--fs-shop-soft);
  border: 1px solid var(--fs-shop-brd);
  border-radius: 8px;
}

.fs-retail-spec-block__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fs-shop-title);
}

.fs-retail-spec-block table.woocommerce-product-attributes {
  margin: 0;
  width: 100%;
  border: 0;
  font-size: 14px;
}

/* WooCommerce 默认给属性表加了隔行底色，在我们这个浅灰卡片里会显得脏，去掉。 */
.fs-retail-spec-block table.woocommerce-product-attributes tr,
.fs-retail-spec-block table.woocommerce-product-attributes tr:nth-child(even) {
  background: transparent;
}

.fs-retail-spec-block table.woocommerce-product-attributes th,
.fs-retail-spec-block table.woocommerce-product-attributes td {
  border: 0;
  border-bottom: 1px solid var(--fs-shop-brd);
  padding: 9px 0;
  background: transparent;
  font-style: normal;
}

.fs-retail-spec-block table.woocommerce-product-attributes th {
  color: var(--fs-shop-text);
  font-weight: 400;
  width: 40%;
}

.fs-retail-spec-block table.woocommerce-product-attributes td {
  color: var(--fs-shop-title);
  font-weight: 600;
}

.fs-retail-spec-block table.woocommerce-product-attributes tr:last-child th,
.fs-retail-spec-block table.woocommerce-product-attributes tr:last-child td {
  border-bottom: 0;
}

/* ── 极简式：单列居中、大图、只留必要信息 ── */
.fs-retail-layout-minimal.woocommerce div.product,
.fs-retail-layout-minimal .woocommerce div.product {
  display: block;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.fs-retail-layout-minimal.woocommerce div.product div.images,
.fs-retail-layout-minimal .woocommerce div.product div.images,
.fs-retail-layout-minimal.woocommerce div.product div.summary,
.fs-retail-layout-minimal .woocommerce div.product div.summary {
  float: none !important;
  width: 100% !important;
  max-width: 100%;
}

.fs-retail-layout-minimal.woocommerce div.product div.images,
.fs-retail-layout-minimal .woocommerce div.product div.images {
  /* 图片给个上限，不然 780px 宽的单张大图会把标题/价格挤到首屏之外，
     极简版式的重点是"一眼看完"，不是"图片最大"。 */
  max-width: 620px !important;
  margin: 0 auto 32px !important;
}

.fs-retail-layout-minimal .fs-retail-product-title,
.fs-retail-layout-minimal.woocommerce div.product .product_title {
  font-size: 34px;
}

.fs-retail-layout-minimal.woocommerce div.product form.cart,
.fs-retail-layout-minimal .woocommerce div.product form.cart {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  float: none;
}

.fs-retail-layout-minimal .fs-retail-freight-notice--product {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.fs-retail-layout-minimal.woocommerce div.product .product_meta,
.fs-retail-layout-minimal .woocommerce div.product .product_meta {
  text-align: center;
}

/* 窄屏下三套版式一律回落成单列，不然图片列会被压得没法看 */
@media (max-width: 860px) {
  .woocommerce div.product {
    display: block;
  }

  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    width: 100% !important;
    max-width: 100%;
  }
}

/* ─────────────────── 运费提示 ───────────────────
 * 换成 Woodmart 的琥珀色（--wd-alternative-color）做左边线，比原来的金色更贴新色板，
 * 也跟主绿色区分开——运费是"要留意的信息"，不是行动号召，不该抢绿色。
 */
.fs-retail-freight-notice {
  border-radius: 5px;
  background: #fff8e8;
  border-left: 3px solid var(--fs-shop-alt);
  font-family: var(--fs-shop-font);
  font-size: 14px;
  line-height: 1.65;
  color: #6a5a2e;
}

.fs-retail-freight-notice--product {
  max-width: 520px;
}

.fs-retail-freight-notice--shop {
  margin: 0 0 32px;
  padding: 14px 18px;
  max-width: 760px;
}

/* ─────────────────── 空态 ─────────────────── */
.fs-retail-shop-empty {
  border: 1px solid var(--fs-shop-brd);
  border-radius: 8px;
  background: var(--fs-shop-soft);
  padding: 48px 40px;
  text-align: center;
}

.fs-retail-shop-empty__title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  color: var(--fs-shop-title);
}

.fs-retail-shop-empty__body {
  margin: 0 auto 26px;
  max-width: 540px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--fs-shop-text);
}

.fs-retail-shop-empty__actions {
  margin: 0;
}

/* ─────────────────── 购物车 / 结账 ─────────────────── */
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table,
.woocommerce table.shop_table {
  border-color: var(--fs-shop-brd);
  border-radius: 8px;
  font-family: var(--fs-shop-font);
}

.woocommerce table.shop_table th {
  color: var(--fs-shop-title);
  font-weight: 600;
}

.woocommerce-checkout #payment,
.woocommerce-cart-form,
.cart-collaterals .cart_totals {
  background: transparent;
}

.woocommerce-checkout #payment {
  background: var(--fs-shop-soft);
  border-radius: 8px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--fs-shop-brd);
  border-radius: 5px;
  padding: 10px 12px;
  font-family: var(--fs-shop-font);
  font-size: 14px;
}

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

/* WooCommerce 的提示条（加入购物车成功等） */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--fs-shop-primary);
  font-family: var(--fs-shop-font);
  font-size: 14px;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--fs-shop-primary);
}

.woocommerce-error {
  border-top-color: #e04f4f;
}

/* ─────────────────── 响应式 ─────────────────── */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 600px) {
  .woocommerce .fs-retail-shop-hero,
  .woocommerce-page .fs-retail-shop-hero {
    padding: 32px 22px 28px;
  }

  .fs-retail-shop-hero__title {
    font-size: 26px;
  }

  .woocommerce div.product .fs-retail-product-title,
  .woocommerce div.product .product_title {
    font-size: 24px;
  }

  .fs-retail-shop-empty {
    padding: 32px 20px;
  }
}


/* ───────── 「Coming soon」角标（隐藏价格期间，由 inc/hide-prices.php 输出）───────── */
.woocommerce ul.products li.product .fs-retail-coming-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--fs-shop-navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 12px;
  padding: 5px 11px;
  pointer-events: none;
}

/* ───────── 商城首页运费提示条：方案C 琥珀浅底圆角横幅 ───────── */
.woocommerce .fs-retail-freight-notice--shop,
.woocommerce-page .fs-retail-freight-notice--shop {
  background: #FDF3E3;
  border: 0;
  border-radius: 20px;
  padding: 22px 32px;
  margin: 0 0 40px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fs-shop-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
 * 商城首页「一个类目一个区块」布局（v0.10.0，inc/shop-category-sections.php）
 *
 * 用户手稿：类目名 → 紧接着这个类目的商品。桌面 4 列 × 2 行 = 8 个。
 * 列数改这里的 grid-template-columns 时，PHP 侧 fs_retail_shop_section_limit()
 * 要跟着改成列数的整数倍，否则最后一行会缺角。
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 顶部类目跳转条（替代旧的分类瓷砖墙，不带图＝不烧 429 配额）── */
.fs-retail-catnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
  padding: 0;
}

.woocommerce .fs-retail-catnav__item,
.woocommerce-page .fs-retail-catnav__item {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--fs-shop-soft);
  color: var(--fs-shop-navy);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce .fs-retail-catnav__item:hover,
.woocommerce-page .fs-retail-catnav__item:hover {
  background: var(--fs-shop-navy);
  color: #fff;
}

/* ── 类目区块 ── */
.fs-retail-catsec {
  margin: 0 0 52px;
  /* 跳转条落点：站点页头是 fixed 的，不留偏移会把标题顶到页头底下 */
  scroll-margin-top: 88px;
}

.fs-retail-catsec:last-child { margin-bottom: 20px; }

.fs-retail-catsec__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--fs-shop-brd);
}

.woocommerce .fs-retail-catsec__title,
.woocommerce-page .fs-retail-catsec__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--fs-shop-title);
}

.fs-retail-catsec__count {
  font-size: 12.5px;
  font-weight: 600;
  color: #8b93a5;
}

.woocommerce .fs-retail-catsec__more,
.woocommerce-page .fs-retail-catsec__more {
  margin-left: auto;
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--fs-shop-navy);
  text-decoration: none;
  white-space: nowrap;
}

.woocommerce .fs-retail-catsec__more:hover,
.woocommerce-page .fs-retail-catsec__more:hover {
  color: var(--fs-shop-primary-dark);
}

/* 4 列 × 2 行。用固定列数而不是 auto-fill，是为了让"8 个＝正好两行"这件事
   在任何容器宽度下都成立——auto-fill 在 1300px 容器上会排成 5 列，最后一行剩 3 个。 */
.woocommerce .fs-retail-catsec__grid,
.woocommerce-page .fs-retail-catsec__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

@media (max-width: 1000px) {
  .woocommerce .fs-retail-catsec__grid,
  .woocommerce-page .fs-retail-catsec__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .woocommerce .fs-retail-catsec__grid,
  .woocommerce-page .fs-retail-catsec__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .fs-retail-catsec { margin-bottom: 38px; }
  .woocommerce .fs-retail-catsec__title { font-size: 19px; }
}

/* ── 类目内部的细分组（2026-08-19：床垫 → AI / 记忆 / 乳胶）──
 * 用户选的是「保留『床垫』一个大标题，内部分三组」，不是拆成三个并列类目。
 * 所以小标题必须明显比 __title 轻一档，否则跟旁边八个类目标题抢层级，
 * 看起来就像商城突然多出了三个类目。 */
.fs-retail-catsec__sub { margin: 0 0 30px; }
.fs-retail-catsec__sub:last-child { margin-bottom: 0; }

.woocommerce .fs-retail-catsec__subtitle,
.woocommerce-page .fs-retail-catsec__subtitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--fs-shop-navy);
}

/* 标题右边一条延伸到底的细线：把这一组和下一组在视觉上切开，
   但比 __head 那条 border-bottom 弱，层级不会打架 */
.fs-retail-catsec__subtitle::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--fs-shop-brd);
  opacity: 0.7;
}

/* 一组 3 个商品 → 3 列正好排满一行，不留豁口。
   跟主网格那条一样用固定列数而不是 auto-fill，理由同上。 */
.woocommerce .fs-retail-catsec__grid--sub,
.woocommerce-page .fs-retail-catsec__grid--sub {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 720px) {
  .woocommerce .fs-retail-catsec__grid--sub,
  .woocommerce-page .fs-retail-catsec__grid--sub { grid-template-columns: repeat(2, 1fr); }
  .fs-retail-catsec__sub { margin-bottom: 24px; }
  .woocommerce .fs-retail-catsec__subtitle { font-size: 13.5px; }
}

/* ── 缺图的商品：灰底「图片待补充」色块，纯 CSS 不发请求 ──
 * 尺寸/圆角/间距跟真图那条规则（ul.products li.product a img）逐项对齐，
 * 否则有图和没图的卡片会高矮不一，整行标题错开。
 * order:0 是因为卡片内的 <a> 被改成了 flex 列并用 order 排序（见上面卡片那节），
 * 这个 span 顶替的是 img 的位置，必须跟 img 拿同一个 order。 */
.woocommerce ul.products li.product .fs-retail-noimg {
  order: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 12px;
  border-radius: var(--fs-shop-r);
  background: var(--fs-shop-soft);
  color: #a7aebd;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ── 补齐最后一行的空瓷砖（商品数不足时）── */
.woocommerce ul.products li.product.fs-retail-catsec__pad {
  display: block;
  border: 0;
  background: transparent;
}

.fs-retail-catsec__padbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--fs-shop-r);
  border: 1px dashed rgba(29, 43, 79, 0.16);
  background: transparent;
  color: #b6bccb;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* 主循环被清空后 archive-product.php 仍可能吐一个空的 <ul class="products">，
   它带着 44px 下边距，会在类目区块之间留一段莫名其妙的空白。 */
.woocommerce ul.products:empty {
  display: none;
  margin: 0;
}