/* ==========================================
 * 面包屑导航
 * 功能：显示页面导航路径
 * 样式：灰色背景，圆角边框，水平排列
 * ========================================== */
.breadcrumb { background: var(--color-surface-muted, #f7f7f7); border:1px solid var(--color-border, #e5e5e5); padding:8px 12px; border-radius: 6px; margin: 16px 0; }
.breadcrumb ol { display:flex; gap:8px; font-size: 14px; list-style:none; padding:0; margin:0; }
.breadcrumb a { color: var(--color-text, #222); text-decoration: none; }
.breadcrumb li::after { content: ">"; margin-left:8px; color: var(--color-border, #aaa); }
.breadcrumb li:last-child::after { content:""; }



/* 兼容 WooCommerce 旧清除浮动：禁用伪元素以免占用首个网格单元 */
.hot-products ul.products::before,
.hot-products ul.products::after,
.featured-products ul.products::before,
.featured-products ul.products::after { content:none; display:none; }

/* （已取消）用户评价图展示 */

/* ==========================================
 * 联系方式二维码
 * 功能：显示联系二维码
 * 样式：两列网格布局，卡片样式
 * ========================================== */
.qrcodes { margin: 24px 0; }
.qrcodes__inner { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.qr-card { border:1px solid var(--color-border, #e5e5e5); border-radius: 8px; padding: 12px; background: var(--color-surface, #fff); display:flex; flex-direction: column; align-items:center; }
.qr-card__image { width: 200px; height: 200px; border-radius: 4px; overflow:hidden; border:1px dashed var(--color-border, #ddd); background: var(--color-surface-muted, #fafafa); display:flex; align-items:center; justify-content:center; margin-left:110px; margin-right:110px; }
.qr-card__image img { width:100%; height:100%; object-fit: cover; display:block; }
.qr-card__placeholder { color: var(--color-muted, #777); font-size: 14px; }
.qr-card__label { margin-top: 8px; font-weight: 600; }

@media (max-width: 768px) {
  .qrcodes__inner { grid-template-columns: 1fr; }
}

/* ==========================================
 * 移动端自适应断点
 * 功能：在不同屏幕尺寸下调整产品布局
 * 断点：768px 和 480px
 * ========================================== */
@media (max-width: 768px) {
  .hot-products ul.products, .featured-products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap:8px !important; }
  /* 提升优先级覆盖 global .woocommerce ul.products */
  .hot-products .woocommerce ul.products,
  .featured-products .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap:8px !important; }
  /* 卡片更紧凑，减少内边距 */
  .hot-products ul.products li.product,
  .featured-products ul.products li.product { padding:8px; }
  /* 图片比例更高，视觉更大 */
  .hot-products ul.products li.product a img,
  .featured-products ul.products li.product a img { aspect-ratio: 4/5; }
  /* 字体与按钮微调避免变形 */
  .hot-products ul.products li.product .woocommerce-loop-product__title,
  .featured-products ul.products li.product .woocommerce-loop-product__title { font-size:13px; }
  .hot-products ul.products li.product .price,
  .featured-products ul.products li.product .price { gap:6px; }
  .hot-products ul.products li.product .button,
  .featured-products ul.products li.product .button { font-size:13px; padding:8px 10px; white-space:nowrap; }
}

@media (max-width: 480px) {
  .hot-products ul.products, .featured-products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap:8px !important; }
  /* 提升优先级覆盖 global .woocommerce ul.products */
  .hot-products .woocommerce ul.products,
  .featured-products .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap:8px !important; }
  /* 卡片更紧凑，减少内边距 */
  .hot-products ul.products li.product,
  .featured-products ul.products li.product { padding:8px; }
  /* 图片比例更高，视觉更大 */
  .hot-products ul.products li.product a img,
  .featured-products ul.products li.product a img { aspect-ratio: 4/5; }
  /* 字体与按钮微调避免变形 */
  .hot-products ul.products li.product .woocommerce-loop-product__title,
  .featured-products ul.products li.product .woocommerce-loop-product__title { font-size:13px; }
  .hot-products ul.products li.product .price,
  .featured-products ul.products li.product .price { gap:6px; }
  .hot-products ul.products li.product .button,
  .featured-products ul.products li.product .button { font-size:13px; padding:8px 10px; white-space:nowrap; }
}

.category-modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:2000;justify-content:center;align-items:center;padding:20px}
.category-modal-overlay.active{display:flex}
.category-modal-content{background:#fff;border-radius:16px;width:100%;max-width:800px;max-height:80vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:modalSlideIn 0.3s ease}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.category-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e5e7eb;background:linear-gradient(90deg,var(--brand,#3F5B8D),var(--brand-dark,#2A436D))}
.category-modal-title{margin:0;font-size:20px;font-weight:700;color:#fff}
.category-modal-close{background:none;border:none;font-size:28px;color:#fff;cursor:pointer;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background 0.2s ease}
.category-modal-close:hover{background:rgba(255,255,255,0.2)}
.category-modal-body{padding:24px;overflow-y:auto;max-height:calc(80vh - 80px)}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.category-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 16px;background:#f8fafc;border-radius:12px;text-decoration:none;transition:all 0.3s ease;border:2px solid transparent}
.category-card:hover{background:#fff;border-color:var(--brand,#3F5B8D);transform:translateY(-4px);box-shadow:0 8px 24px rgba(63,91,141,0.15)}
.category-icon{font-size:32px;line-height:1}
.category-name{font-size:14px;font-weight:600;color:#374151;text-align:center}
.category-card:hover .category-name{color:var(--brand,#3F5B8D)}
@media (max-width: 600px){.category-grid{grid-template-columns:repeat(3,1fr);gap:12px}.category-card{padding:16px 12px}.category-icon{font-size:28px}.category-name{font-size:13px}}

/* 移动端满宽（抵消 container 的 16px 侧边距） */
@media (max-width: 768px) {
  .container .hot-products ul.products,
  .container .featured-products ul.products { margin-left:-16px; margin-right:-16px; }
}

/* 覆盖 WooCommerce 在 <=768px 下的列布局（移除 48% 宽度/浮动/清除） */
@media (max-width: 768px) {
  .woocommerce ul.products[class*=columns-] li.product,
  .woocommerce-page ul.products[class*=columns-] li.product,
  ul.products[class*=columns-] li.product {
    width:auto !important;
    float:none !important;
    clear:none !important;
    margin:0 !important;
  }
}

/* ==========================================
 * 商品卡片布局
 * 功能：定义产品卡片的样式和布局
 * 应用：WooCommerce 列表和首页短码区
 * ========================================== */
.woocommerce ul.products li.product,
.hot-products ul.products li.product,
.featured-products ul.products li.product { display:flex; flex-direction:column; gap:8px; border:1px solid var(--color-border, #e5e5e5); border-radius:8px; padding:12px; background: var(--color-surface, #fff); width:auto; margin:0; text-align:center; float:none; }

.woocommerce ul.products li.product a img,
.hot-products ul.products li.product a img,
.featured-products ul.products li.product a img { width:100%; aspect-ratio:1/1; object-fit: cover; border-radius:6px; display:block; }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.hot-products ul.products li.product .woocommerce-loop-product__title,
.featured-products ul.products li.product .woocommerce-loop-product__title { font-size:14px; font-weight:500; line-height:1.4; margin:0; color: var(--color-text, #222); text-align:center; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.hot-products ul.products li.product .woocommerce-loop-product__title a,
.featured-products ul.products li.product .woocommerce-loop-product__title a { color: var(--color-text, #222); text-decoration:none; word-break: break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price,
.hot-products ul.products li.product .price,
.featured-products ul.products li.product .price {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 18px;
  line-height: 1.4;
}

.woocommerce ul.products li.product .price ins,
.hot-products ul.products li.product .price ins,
.featured-products ul.products li.product .price ins { color: var(--brand, #0b74ff); text-decoration:none; font-weight:700; }
.woocommerce ul.products li.product .price del,
.hot-products ul.products li.product .price del,
.featured-products ul.products li.product .price del { color: var(--color-muted, #777); font-weight:400; }

/* 购物车按钮置底与全宽 */
.woocommerce ul.products li.product .button,
.hot-products ul.products li.product .button,
.featured-products ul.products li.product .button {
  width: 100%;
  margin-top: auto;
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff !important;
  text-align: center;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus,
.hot-products ul.products li.product .button:hover,
.hot-products ul.products li.product .button:focus,
.featured-products ul.products li.product .button:hover,
.featured-products ul.products li.product .button:focus {
  color: #fff !important;
}

/* 桌面端列数：跟随 WooCommerce 的 columns-X 类 */
.woocommerce ul.products { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* 首页热销区 / 特色区：只保留这一套最终规则 */
.home .hot-products ul.products,
.home .featured-products ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* 首页卡片本身，防止被挤爆 */
.home .hot-products ul.products li.product,
.home .featured-products ul.products li.product {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 自定义器预览 / 窄一点的桌面，自动降列 */
@media (max-width: 1550px) {
  .home .hot-products ul.products,
  .home .featured-products ul.products {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1350px) {
  .home .hot-products ul.products,
  .home .featured-products ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .home .hot-products ul.products,
  .home .featured-products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .home .hot-products ul.products,
  .home .featured-products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* 预览用通用卡片结构（非 WooCommerce） */
.products .product { display:flex; flex-direction:column; gap:8px; border:1px solid #eee; border-radius:8px; padding:12px; background:#fff; }
.products .product .product__img { width:100%; aspect-ratio:1/1; border-radius:6px; background:#f0f0f0; }
.products .product .product__title { font-size:14px; font-weight:600; text-align:center; }
.products .product .product__price { margin-top:auto; display:flex; gap:8px; align-items:baseline; justify-content:center; }
.products .product .product__price del { color:#777; }
.products .product .product__price ins { color:#0b74ff; font-weight:700; text-decoration:none; }

/* ==========================================
 * 首页 Banner
 * 功能：显示首页 Banner 区域
 * 样式：两列网格布局，包含图片和内容
 * ========================================== */
.home-banner { margin: 24px 0; }
.home-banner__inner { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
.home-banner__grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; border-radius:10px; padding:12px; background:#fff; }
.home-banner__img img { width:100%; height:auto; border-radius:6px; display:block; }
.home-banner__media { border-radius:10px; padding:12px; background:#fff; }
.home-banner__media img { width:100%; height:auto; border-radius:6px; display:block; object-fit:cover; }
.home-banner__content { border-radius:10px; padding:16px 20px; background:#fff; }
.home-banner__title-wrap { display:flex; flex-direction:column; gap:8px; }
.home-banner__title-badge { display:inline-block; border-radius:6px; padding:6px 10px; font-size:12px; color:#333; }
.home-banner__title { margin:0; font-size:28px; display:inline-block; border-radius:6px; padding:6px 10px; }
.home-banner__subtitle { margin:12px 0 16px; display:inline-block; border-radius:6px; padding:6px 10px; }
.home-banner .btn.btn--primary { display:inline-block; padding:8px 14px; border-radius:8px; color:#ffffff; text-decoration:none; font-weight:600; }

@media (max-width: 768px) {
  .home-banner__inner { grid-template-columns: 1fr; }
}

/* ==========================================
 * 首页：4 大服务说明（Banner 下方第一块）
 * 功能：显示网站的核心服务
 * 样式：四列网格布局，包含图标和文字
 * ========================================== */
.home-services { padding: 24px 0 16px; background: #fff; }
.services-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items:start; }
.service-item { display:flex; flex-direction:row; align-items:center; justify-content:center; gap: 12px; padding: 10px 0; text-align:left; }
.service-icon { width: 48px; height: 48px; border-radius: 999px; border: 1px solid #e5e7eb; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size: 18px; flex: 0 0 auto; background:#fff; }
.service-icon svg { display:block; }
.service-text { display:flex; flex-direction:column; gap: 4px; }
.service-title { font-size: 15px; font-weight: 600; color:#111827; line-height:1.2; }
.service-subtitle { font-size: 12px; color:#6b7280; letter-spacing: 0.02em; }

/* ==========================================
 * 首页：热销/特惠 两张图片板块（Banner 下方第二块）
 * 功能：显示热销和特惠商品区域
 * 样式：两列网格布局，包含图片和内容
 * ========================================== */
.home-promos { padding: 18px 0 8px; background: #fff; }
.promo-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.promo-card { background:#fff; border-radius: 18px; overflow:hidden; display:grid; grid-template-columns: 0.45fr 0.55fr; align-items: stretch; min-height: 260px; box-shadow: 0 10px 30px rgba(17,24,39,0.08); }
.promo-content { background: var(--promo-bg, #f3f4f6); padding: 28px 28px; display:flex; flex-direction:column; justify-content:center; gap: 10px; }
.promo-badge { font-size: 13px; font-weight: 700; color:#374151; }
.promo-subtitle { font-size: 13px; color:#4b5563; }
.promo-title { font-size: 34px; font-weight: 900; color:#111827; line-height: 1.05; }
.promo-btn { display:inline-flex; align-items:center; justify-content:center; width: fit-content; padding: 10px 18px; border-radius: 999px; background: #eef2f7; color:#111827; text-decoration:none; font-weight: 800; font-size: 13px; border: 1px solid rgba(17,24,39,0.12); margin-top: 10px; box-shadow: 0 2px 0 rgba(17,24,39,0.06); }
.promo-btn:hover { background: #e7ecf3; }
.promo-media { background:#fff; display:flex; align-items:stretch; justify-content:stretch; padding: 0; }
.promo-media img { width: 100%; height: 100%; object-fit: cover; display:block; }
.promo-media-placeholder { width: 100%; height: 100%; min-height: 260px; display:flex; align-items:center; justify-content:center; color:#6b7280; font-size: 14px; background: #fff; }

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-grid { grid-template-columns: 1fr; }
  .promo-card { grid-template-columns: 1fr; }
  .promo-media-placeholder { min-height: 200px; }
}

/* ==========================================
 * 首页第一屏：左分类栏 + 右轮播大 Banner
 * 功能：显示左侧分类栏和右侧轮播 Banner
 * 样式：左侧固定宽度分类栏，右侧轮播 Banner
 * ========================================== */
.home-top {
  padding: 18px 0 10px;
  background: #fff;
}

.home-top__grid {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.category-sidebar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.category-sidebar__toggle {
  width: 100%;
  border: 0;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: default;
  text-align: left;
  flex-shrink: 0;
}

.category-sidebar__toggle::before {
  content: "☰";
  font-size: 16px;
  color: #374151;
  line-height: 1;
}

.category-sidebar__title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

.category-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-sidebar__list::-webkit-scrollbar {
  display: none;
}

.category-sidebar__item {
  margin: 0;
  padding: 0;
}

.category-sidebar__item a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 16px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-left: 4px solid transparent;
  transition: all 0.2s ease;
}

.category-sidebar__item a:hover {
  background: #f9fafb;
  color: #3F5B8D;
  border-left-color: #3F5B8D;
}

.category-sidebar__icon {
  width: 18px;
  min-width: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  line-height: 1;
}

.category-sidebar__text {
  display: inline-block;
  line-height: 1.4;
  flex: 1;
}

.home-top__main {
  min-width: 0;
  display: flex;
}

.home-top__main .home-hero-slider {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 14px;
  overflow: hidden;
}

.home-top__main .hero-slide img {
  border-radius: 14px;
}

@media (max-width: 900px) {
  .home-top__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .category-sidebar {
    order: 1;
    height: auto;
  }

  .home-top__main {
    order: 2;
    display: block;
  }

  .category-sidebar__toggle {
    cursor: pointer;
    padding-left: 14px;
  }

  .category-sidebar__list {
    display: none;
    flex: none;
    overflow: visible;
  }

  .category-sidebar.is-open .category-sidebar__list {
    display: block;
  }

  .home-top__main .home-hero-slider {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    max-height: none;
  }
}