/*
Theme Name: Asakusa-pharma-1
Theme URI: https://example.com/asakusa-pharma
Author: Your Name
Author URI: https://example.com
Description: 简洁的 WooCommerce 商城主题，包含首页、产品列表、产品详情与结算页面。
Version: 0.1.2
Text Domain: med-shop
*/

/* ==========================================
 * 基础样式
 * 定义全局CSS变量和基础样式
 * 说明：CSS变量可以在整个主题中统一修改颜色和样式
 * ========================================== */
:root{
  --bg:#ffffff; /* 页面背景色 - 白色 */
  --text:#1a1a1a; /* 主文本颜色 - 深灰色 */
  --muted:#666666; /* 次要文本颜色 - 中灰色 */
  --brand:#3F5B8D; /* 品牌主色 - 深蓝色 */
  --brand-dark:#2A436D; /* 品牌深色 - 更深的蓝色 */
  --brand-light:#5C78A3; /* 品牌浅色 - 更浅的蓝色 */
  --border:#e5e7eb; /* 边框颜色 - 浅灰色 */
  --card:#f8fafc; /* 卡片背景色 - 非常浅的灰色 */
}

/* 基础HTML样式 */
html{box-sizing:border-box} /* 盒模型设置：使用border-box模型，方便布局计算 */
*,*:before,*:after{box-sizing:inherit} /* 继承盒模型：所有元素都使用border-box模型 */

/* 全局body样式 */
body{
  margin:0; /* 重置默认边距 */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Microsoft YaHei",sans-serif; /* 字体设置，包含中文字体 */
  color:var(--text); /* 使用变量定义的文本颜色 */
  background:var(--bg); /* 使用变量定义的背景色 */
  line-height:1.6; /* 行高：提高可读性 */
  font-weight:400; /* 字体权重：正常 */
  font-size:14px; /* 字体大小：默认14px */
}

/* 容器样式 */
.container{width:100%;max-width:1300px;margin:0 auto;padding:0 24px} /* 响应式容器，最大宽度1300px，居中对齐，左右内边距24px */

/* =============================
  页头区域（顶栏 + Header + 主导航）
  - 结构文件：header.php
  ============================= */

.site-header{
  border-bottom:1px solid var(--border); /* 底部边框 */
  background:#fff; /* 背景白色 */
  position: sticky; /* 粘性定位，滚动时固定在顶部 */
  top: 0; /* 固定在顶部 */
  z-index: 1000; /* 层级：确保在其他元素之上 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 顶部阴影 */
  padding-top: 12px; /* 顶部内边距 */
  padding-bottom: 12px; /* 底部内边距 */
}
.site-header .container{padding:0 24px} /* 页头容器内边距 */
.header-main{
  display:grid; /* 使用网格布局 */
  grid-template-columns: 220px 1fr auto; /* 三列布局：logo区 + 搜索区 + 操作区 */
  align-items:center; /* 垂直居中 */
  column-gap:24px; /* 列间距 */
  padding:16px 0; /* 上下内边距 */
}
.header-nav{border-top:1px solid var(--border);padding:8px 0;margin-top:12px;background:var(--brand-dark);width:100%} /* 导航栏样式 */
.branding{flex-shrink:0} /* 品牌区域不收缩 */
.site-branding-link{
  display:flex; /* 弹性布局 */
  align-items:center; /* 垂直居中 */
  gap:12px; /* 元素间距 */
  text-decoration:none; /* 无下划线 */
}
.site-logo{
  height:40px; /* 高度40px */
  width:auto; /* 宽度自动 */
  object-fit:contain; /* 保持比例 */
}
.site-logo-placeholder{
  width:40px; /* 宽度40px */
  height:40px; /* 高度40px */
  background:var(--brand); /* 背景品牌色 */
  color:#fff; /* 文字白色 */
  border-radius:8px; /* 圆角8px */
  display:flex; /* 弹性布局 */
  align-items:center; /* 垂直居中 */
  justify-content:center; /* 水平居中 */
  font-size:24px; /* 字体大小24px */
}
.site-brand-text {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列 */
}
.site-title{font-weight:700;color:var(--text);font-size:20px;letter-spacing:-0.01em;line-height:1} /* 站点标题 */
.site-sub {
  font-size: 12px; /* 副标题字体大小 */
  color: #9ca3af; /* 副标题颜色 */
  letter-spacing: 1px; /* 字母间距 */
  margin-top: 2px; /* 上外边距 */
}

/* 顶栏 */
.topbar{background:var(--brand-dark);color:#fff;font-size:12px;font-weight:500;letter-spacing:0.03em;margin-bottom:8px} /* 顶栏样式 */
.topbar__inner{display:flex;align-items:center;justify-content:space-between;padding:8px 0} /* 顶栏内容布局 */
.topbar__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 顶栏文本 */
.topbar__link{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap} /* 顶栏链接 */
.topbar__actions{display:none} /* 顶栏操作区（隐藏） */

.site-nav{width:100%} /* 导航宽度100% */
.site-nav .menu{list-style:none;margin:0;padding:0;display:flex;gap:32px;align-items:center;justify-content:center} /* 导航菜单 */
.site-nav .menu > li{position:relative} /* 菜单项相对定位 */
.site-nav .menu > li > a{
  display:flex; /* 弹性布局 */
  align-items:center; /* 垂直居中 */
  gap:6px; /* 元素间距 */
  padding:6px 0; /* 上下内边距 */
  color:#fff; /* 文字白色 */
  text-decoration:none; /* 无下划线 */
  font-weight:500; /* 字体权重：中等 */
  font-size:14px; /* 字体大小 */
  border-bottom:2px solid transparent; /* 底部边框透明 */
  transition: all 0.3s ease; /* 过渡动画 */
  position:relative; /* 相对定位 */
}
.site-nav .menu > li > a:hover{
  color:#fff; /* 文字白色 */
  border-bottom-color:rgba(255,255,255,0.5); /* 底部边框半透明白色 */
  transform:translateY(-2px); /* 上移2px */
  letter-spacing:0.5px; /* 字母间距 */
}
.site-nav .menu > li.current-menu-item > a{
  color:#fff; /* 文字白色 */
  border-bottom-color:#fff; /* 底部边框白色 */
  font-weight:600; /* 字体权重：粗体 */
}

/* 下拉菜单 (Sub-menu) 样式 */
.site-nav .menu .sub-menu{
  position:absolute; /* 绝对定位 */
  top:100%; /* 顶部对齐 */
  left:0; /* 左侧对齐 */
  min-width:200px; /* 最小宽度200px */
  background:#fff; /* 背景白色 */
  border:1px solid var(--border); /* 边框 */
  border-radius:8px; /* 圆角8px */
  box-shadow:var(--shadow-lg); /* 阴影 */
  padding:8px 0; /* 上下内边距 */
  margin:0; /* 外边距0 */
  list-style:none; /* 无列表样式 */
  opacity:0; /* 初始透明 */
  visibility:hidden; /* 初始隐藏 */
  transform:translateY(10px); /* 初始下移10px */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡动画 */
  z-index:1001; /* 层级：确保在其他元素之上 */
}
.site-nav .menu > li:hover .sub-menu{
  opacity:1; /* 显示 */
  visibility:visible; /* 可见 */
  transform:translateY(0); /* 回到原位 */
}
.site-nav .menu .sub-menu li a{
  display:block; /* 块级元素 */
  padding:10px 20px; /* 内边距 */
  color:var(--text); /* 文字颜色 */
  text-decoration:none; /* 无下划线 */
  font-size:14px; /* 字体大小 */
  font-weight:500; /* 字体权重：中等 */
  transition: all 0.2s ease; /* 过渡动画 */
}
.site-nav .menu .sub-menu li a:hover{
  background:#f8fafc; /* 背景色 */
  color:var(--brand); /* 文字品牌色 */
  padding-left:24px; /* 悬浮时的小缩进效果 */
}

.header-actions{display:flex;align-items:center;gap:16px;flex-shrink:0} /* 头部操作区 */
.header-deal{color:var(--text);text-decoration:none;font-weight:600;font-size:12px;display:flex;align-items:center;gap:6px} /* 头部优惠信息 */
.badge-hot{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;background:#ef4444;color:#fff;font-weight:700;font-size:10px;line-height:1} /* 热销标签 */

.header-search{display:flex;align-items:center;gap:8px;max-width:600px;width:100%;border:1px solid var(--border);background:#f8fafc;border-radius:12px;padding:8px 12px;margin:0 auto;transition:all 0.3s ease} /* 搜索框 */
.header-search:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.1);border-color:var(--brand)} /* 搜索框悬浮效果 */
.header-search__select select{border:none;background:transparent;outline:none;color:var(--muted);font-weight:600;font-size:12px;max-width:140px} /* 搜索分类选择 */
.header-search input{flex:1;border:none;background:transparent;outline:none;font-size:14px;color:var(--text)} /* 搜索输入框 */
.header-search__btn{border:none;background:transparent;cursor:pointer;font-size:16px;line-height:1;padding:6px 8px;border-radius:8px} /* 搜索按钮 */
.header-search__btn svg{display:block} /* 搜索按钮图标 */
.header-search__btn:hover{background:rgba(0,0,0,0.04)} /* 搜索按钮悬浮效果 */

.header-actions .cart-link{
  color:#fff; /* 文字白色 */
  background:var(--brand); /* 背景品牌色 */
  padding:8px 16px; /* 内边距 */
  border-radius:20px; /* 圆角20px */
  text-decoration:none; /* 无下划线 */
  font-weight:500; /* 字体权重：中等 */
  font-size:13px; /* 字体大小 */
  display:flex; /* 弹性布局 */
  align-items:center; /* 垂直居中 */
  gap:6px; /* 元素间距 */
  transition: all 0.2s ease; /* 过渡动画 */
}

@media (max-width: 900px){ /* 移动端适配 */
  .header-main{grid-template-columns: 1fr auto; row-gap:12px} /* 网格布局调整 */
  .header-search{grid-column: 1 / -1; max-width:100%} /* 搜索框占满整行 */
  .header-nav{overflow-x:hidden} /* 导航栏隐藏横向溢出 */
  .site-nav .menu{gap:18px;min-width:max-content;justify-content:flex-start;overflow-x:auto; padding-bottom:8px} /* 菜单横向滚动 */
}
.header-actions .cart-link::before{
  content:'\1F6D2'; /* 购物车 Emoji */
}
.header-actions .cart-link:hover{
  background:var(--brand-dark); /* 背景品牌深色 */
  transform:translateY(-1px); /* 上移1px */
  box-shadow:var(--shadow); /* 阴影 */
}

.hero{padding:40px 0;border-bottom:1px solid var(--border)}
.hero h1{margin:0 0 8px}
.hero p{color:var(--muted);margin:0}

.site-main{padding:24px 0}
.home .site-main{padding-top:12px}

/* =============================
  页脚与右下角悬浮联系人（Footer + Floating Actions）
  - 结构文件：footer.php
  - 交互脚本：assets/main.js
  ============================= */
.site-footer{border-top:1px solid var(--border);margin-top:24px}
.site-footer .container{padding:16px}
.site-footer .menu{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.site-footer p{color:var(--muted);font-size:12px}

/* 通用按钮 */
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;padding:10px 14px;border-radius:8px}
.btn:hover{background:var(--brand-dark);opacity:.95}
.btn--ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn--ghost:hover{background:var(--brand);color:#fff}

/* 首页：图片网格 + 信息卡 */
.home-hero{padding:20px 0;border-bottom:1px solid var(--border)}
.home-hero__inner{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.hero-grid__item{background:#f3f4f6;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-grid__item img{width:100%;height:100%;object-fit:cover}
.hero-grid__placeholder{color:var(--muted);font-size:12px;padding:20px}
.hero-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.hero-card__title{margin:0 0 8px;font-size:20px}
.hero-card__desc{color:var(--muted);font-size:14px;margin:0 0 12px}

/* 首页 Hero 轮播图 & 特效按钮 */
/* 首页 Hero 轮播图 & 特效按钮 */
.home-hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  background: var(--bg);
}

.hero-slider-track {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.slide-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 轮播导航箭头 */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--text);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.slider-nav:hover {
  background: #fff;
  color: var(--brand);
}

.slider-nav.prev { left: 24px; }
.slider-nav.next { right: 24px; }

/* 轮播指示点 */
.slider-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.slider-dots .dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dots .dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* 特效 CTA 按钮 */
.hero-cta-wrapper {
  position: absolute;
  z-index: 20;
  transform: translate(-50%, 0);
  top: 80%;
}

.hero-fx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.2em;
  background: var(--brand);
  color: #fff !important;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.hero-fx-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

.hero-fx-btn .btn-text {
  position: relative;
  z-index: 2;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-fx-btn .btn-text::after {
  content: '→';
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.hero-fx-btn:hover .btn-text::after {
  transform: translateX(2px);
}

.btn-fx-ripple {
  display: none;
}

@media (max-width: 768px) {
  .home-hero-slider {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .slider-nav {
    display: none;
  }
}


.section-header{display:flex;align-items:center;justify-content:flex-start;margin:24px 0 20px;position:relative}
.section-header h2{
  font-size:28px;
  font-weight:800;
  color:var(--text);
  position:relative;
  padding:0;
  margin:0;
}
.section-actions{margin-top:12px}

/* ==========================================
 * 产品卡片样式
 * 功能：定义 WooCommerce 产品列表和卡片样式
 * 包含：产品网格布局、卡片样式、悬浮效果、按钮样式
 * ========================================== */

/* ========================================
   WooCommerce 商品卡片：全局统一样式
   列数由主题自定义/WooCommerce 后台控制
======================================== */

/* 商品列表外层：只清理基础样式，不写死列数 */
.woocommerce ul.products,
.woocommerce-page ul.products{
  list-style: none; /* 去掉默认项目符号 */
  margin: 0; /* 清除外边距 */
  padding: 0; /* 清除内边距 */
  gap: 16px; /* 商品间距：仅在主题本身支持 grid/flex 时生效 */
}

/* 单个商品卡片：统一卡片外观 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  box-sizing: border-box; /* 计算更稳定 */
  min-width: 0; /* 防止内容撑爆 */

  border: 1px solid var(--border); /* 边框 */
  padding: 12px; /* 内边距 */
  border-radius: 10px; /* 圆角 */
  background: #fff; /* 背景色 */
  transition: all 0.3s ease; /* 过渡动画 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* 默认阴影 */
}

/* 商品卡片悬浮效果 */
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover{
  transform: translateY(-4px); /* 上浮效果 */
  box-shadow: 0 12px 24px rgba(0,0,0,0.12); /* 加深阴影 */
  border-color: transparent; /* hover 时边框弱化 */
}

/* 商品标题 */
.woocommerce-loop-product__title{
  font-weight: 500; /* 字重 */
  line-height: 1.4; /* 行高 */
  word-break: break-word; /* 长文字换行 */
  white-space: normal; /* 正常换行 */
  margin: 8px 0; /* 上下间距 */
}

/* 商品价格 */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price{
  display: block; /* 独占一行 */
  line-height: 1.4; /* 行高 */
  white-space: normal; /* 正常换行 */
}

/* 商品图片 */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img{
  width: 100%; /* 图片铺满 */
  height: auto; /* 高度自适应 */
  display: block; /* 避免底部空白 */
}

/* 按钮样式 */
.woocommerce a.button,
.woocommerce button.button{
  background: var(--brand); /* 主色 */
  color: #fff; /* 白字 */
  border: none; /* 无边框 */
  border-radius: 6px; /* 圆角 */
  padding: 8px 14px; /* 内边距 */
  font-size: 13px; /* 字号 */
  font-weight: 500; /* 字重 */
  text-decoration: none; /* 去掉下划线 */
  width: 100%; /* 按钮铺满 */
  text-align: center; /* 居中 */
  box-sizing: border-box; /* 更稳定 */
}

/* 按钮悬浮效果 */
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  background: var(--brand-dark); /* hover 深色 */
}

.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:24px} /* 产品详情页布局 */
.woocommerce div.product .product_title{margin-top:0} /* 产品标题 */
.woocommerce-loop-product__title {
  font-weight: 500; /* 产品标题字体权重 */
}
.woocommerce a.button,.woocommerce button.button{background:var(--brand);color:#fff;border:none;border-radius:6px;padding:8px 14px;font-size:13px;font-weight:500;text-decoration:none} /* 产品按钮样式 */
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--brand-dark)} /* 产品按钮悬浮效果 */

/* ==========================================
 * 页脚与订阅板块样式
 * ========================================== */

/* 订阅板块 */
.newsletter-section {
  background: #fff;
  padding: 28px 0 60px 0;
  text-align: center;
}
.newsletter-section .container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}
.newsletter-inner {
  width: 100%;
  background: transparent;
  padding: 48px 40px;
}

.newsletter-inner .newsletter-title,
.newsletter-inner .newsletter-form {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.newsletter-title {
  font-size: 24px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 32px;
  text-align: center;
  white-space: pre-line;
}
.newsletter-form {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.newsletter-form:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: var(--brand);
}
.newsletter-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 24px;
  font-size: 15px;
  color: #1a1a1a;
  outline: none;
}
.newsletter-form input::placeholder {
  color: #9ca3af;
}
.newsletter-btn {
  background: var(--brand); /* 绿色 */
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.newsletter-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

/* 深色页脚 */
.site-footer-new {
  background: var(--brand-dark);
  color: #fff;
  padding: 64px 0 48px;
  width: 100%;
}
.site-footer-new .container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}
.footer-grid-new {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  align-items: start;
}

/* 移动端适配：页脚横向转纵向 */
@media (max-width: 900px) {
  .footer-grid-new {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* 左列：品牌 */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.footer-logo-box {
  width: 48px;
  height: 48px;
  background: #4ade80; /* 绿色 */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.footer-logo-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.footer-brand-text {
  display: flex;
  flex-direction: column;
}
.brand-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.brand-sub {
  font-size: 12px;
  color: #9ca3af;
  letter-spacing: 1px;
}
.footer-desc {
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-contact-list li {
  color: #d1d5db;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-contact-list .icon {
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}
.footer-contact-list .icon svg { display:block; }

/* 中间列：导航 */
.footer-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #fff;
}
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-menu li {
  margin-bottom: 16px;
}
.footer-menu a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-menu a:hover {
  color: #fff;
}

/* 右列：联系卡片 */
.contact-cards {
  display: flex;
  gap: 16px;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
}
.card-icon {
  width: 72px;
  height: 72px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* 页脚咨询客服按钮容器 */
.card-icon {
  width:72px;
  height:72px;
  background:#fff;
  border-radius:16px; /* 圆角大小 */
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.3s ease;
  overflow:hidden; /* 关键：把图片裁成圆角 */
}

/* 页脚咨询客服图片铺满并跟随圆角 */
.card-icon-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:16px; /* 可加可不加，保险一点 */
}

.card-icon:hover {
  transform: translateY(-4px);
}
.card-icon svg {
  width: 40px;
  height: 40px;
}
/* 社交颜色 */
.wechat-bg svg { fill: #07c160; }
.whatsapp-bg svg { fill: #25d366; }
.card-text {
  color: #d1d5db;
  font-size: 14px;
}

/* ==========================================
 * 右下角悬浮按钮与模态框
 * ========================================== */

/* 悬浮按钮群 */
.floating-actions {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.floating-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 悬浮按钮图片铺满并带圆角 */
.floating-icon-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:16px; /* 圆角 */
}

.floating-btn:hover {
  transform: scale(1.1);
}
.wechat-bg { background: #07c160; }
.whatsapp-bg { background: #25d366; }
.tidio-bg { background: #6366f1; }
.main-trigger { background: var(--brand); }

.floating-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 移动端适配：悬浮按钮 */
@media (max-width: 768px) {
  .floating-actions {
    bottom: 20px;
    right: 20px;
    gap: 12px;
  }
  .floating-btn {
    width: 48px;
    height: 48px;
  }
  .floating-btn svg {
    width: 20px;
    height: 20px;
  }
  .floating-menu {
    gap: 12px;
  }
}

/* 模态框 (Modal) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  background: #fff;
  width: 90%;
  max-width: 360px;
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  position: relative;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}
.modal-overlay.active .modal-content {
  transform: translateY(0);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #9ca3af;
  cursor: pointer;
}

/* 弹框顶部聊天工具图标：优先显示后台上传图片 */
.modal-header-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  overflow: hidden; /* 让上传图片也保持圆形 */
}

.modal-header-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 铺满圆形区域 */
  display: block;
  border-radius: 50%;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.modal-subtitle {
  color: #6b7280;
  font-size: 14px;
  margin: 0 0 24px;
}

/* 弹框二维码容器：固定显示区域 */
.modal-qr-box {
  width: 200px; /* 二维码显示区域宽度 */
  height: 200px; /* 二维码显示区域高度 */
  margin: 0 auto 16px; /* 水平居中并和下方留间距 */
  background: #f3f4f6; /* 浅灰背景 */
  border-radius: 12px; /* 圆角 */
  display: flex; /* 让图片居中 */
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 超出区域隐藏 */
  box-sizing: border-box;
}

/* 弹框二维码图片：强制限制在容器内 */
.modal-qr-box img,
.modal-qr-img {
  width: 100% !important; /* 宽度不超过容器 */
  height: 100% !important; /* 高度不超过容器 */
  max-width: 100% !important; /* 防止被别的样式撑大 */
  max-height: 100% !important; /* 防止被别的样式撑大 */
  object-fit: contain !important; /* 完整显示，不裁切 */
  display: block;
}

.qr-placeholder {
  color: #9ca3af;
  font-size: 14px;
}
.modal-tips-wrapper {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 16px;
}
.modal-tips {
  color: #9ca3af;
  font-size: 12px;
  margin: 0;
}
.modal-jump-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  color: #fff !important;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: opacity 0.3s ease;
  margin-top: 16px;
}
.modal-jump-btn:hover {
  opacity: 0.9;
}

/* 修复 WooCommerce 分类页 / 搜索页 / 商店页 第一个产品位空白 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h2.woocommerce-loop-product__title {
  font-size: 15px;
  line-height: 1.65;
  min-height: calc(1.65em * 2 + 4px);
  max-height: none;
  padding-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  display: block;
  margin-bottom: 12px;
  margin-top: 4px;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  margin-top: auto;
}

/* 悬浮按钮提示文案：显示在左侧，鼠标经过立刻出现 */
.floating-actions .floating-btn {
  position: relative;
  overflow: visible;
}
.floating-actions .floating-btn {
  position: relative;
  overflow: visible;
}

.floating-actions .floating-btn .floating-tooltip {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
}

.floating-actions .floating-btn:hover .floating-tooltip {
  opacity: 1;
  visibility: visible;
}

/* 左侧小三角 */
.floating-actions .floating-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(17, 24, 39, 0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  z-index: 9999;
}

/* 鼠标经过立即显示 */
.floating-actions .floating-btn:hover::after,
.floating-actions .floating-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

/* 主按钮呼吸效果 */
.floating-btn.main-trigger {
  animation: floatingPulse 3s infinite ease-in-out;
}

/* 鼠标移上去时停止呼吸，避免太乱 */
.floating-btn.main-trigger:hover {
  animation-play-state: paused;
}

@keyframes floatingPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(63, 91, 141, 0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 18px rgba(63, 91, 141, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(63, 91, 141, 0);
  }
}

/* 页头 + 页脚 logo 圆角 */
.site-logo,
.footer-logo-img {
  border-radius: 12px;
}

/* 页脚外层盒子也一起裁切，避免圆角不明显 */
.footer-logo-box {
  border-radius: 12px;
  overflow: hidden;
}

.site-header .site-logo,
.site-header .custom-logo,
.site-header .site-branding-link img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
  object-fit: contain;
}

.site-header .header-main {
  align-items: center;
}

.site-header .branding {
  display: flex;
  align-items: center;
}

/* GTranslate 浮动到表头右上角，但不参与 header-main 布局 */
.header-lang-floating{
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
}

/* 压缩 GTranslate 自身外边距 */
.header-lang-floating .gtranslate_wrapper,
.header-lang-floating .gt_switcher,
.header-lang-floating .switcher{
  margin: 0 !important;
}

/* 避免翻译器太宽 */
.header-lang-floating select,
.header-lang-floating .gt_selector{
  max-width: 150px;
}

/* 给右侧按钮预留空间，避免和翻译器重叠 */
.header-main{
  padding-right: 130px !important;
}

/* 给翻译器缩小 */
.header-lang-floating .gtranslate_wrapper,
.header-lang-floating .gt_switcher,
.header-lang-floating .switcher {
  margin: 0 !important;
  transform: scale(0.90);
  transform-origin: top right;
}

/* 首页以外的 WooCommerce 列表页：桌面默认 5 列 */
body:not(.home).woocommerce ul.products,
body:not(.home).woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 取消 WooCommerce 默认 float / width 干扰 */
body:not(.home).woocommerce ul.products li.product,
body:not(.home).woocommerce-page 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;
}

/* 屏幕稍窄时降成 4 列 */
@media (max-width: 1350px) {
  body:not(.home).woocommerce ul.products,
  body:not(.home).woocommerce-page ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* 平板横屏 */
@media (max-width: 1100px) {
  body:not(.home).woocommerce ul.products,
  body:not(.home).woocommerce-page ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 手机 */
@media (max-width: 768px) {
  body:not(.home).woocommerce ul.products,
  body:not(.home).woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* =========================
   首页产品区：PC 最多显示 2 行
   按 home-sections.css 的真实列数规则来隐藏
========================= */

/* 超大屏：6列 => 最多显示12个 */
@media (min-width: 1551px) {
  .home .hot-products ul.products > li.product:nth-child(n+13),
  .home .featured-products ul.products > li.product:nth-child(n+13) {
    display: none !important;
  }
}

/* 桌面：5列 => 最多显示10个 */
@media (min-width: 1351px) and (max-width: 1550px) {
  .home .hot-products ul.products > li.product:nth-child(n+11),
  .home .featured-products ul.products > li.product:nth-child(n+11) {
    display: none !important;
  }
}

/* 小桌面：4列 => 最多显示8个 */
@media (min-width: 1101px) and (max-width: 1350px) {
  .home .hot-products ul.products > li.product:nth-child(n+9),
  .home .featured-products ul.products > li.product:nth-child(n+9) {
    display: none !important;
  }
}

/* 平板：3列 => 最多显示6个 */
@media (min-width: 769px) and (max-width: 1100px) {
  .home .hot-products ul.products > li.product:nth-child(n+7),
  .home .featured-products ul.products > li.product:nth-child(n+7) {
    display: none !important;
  }
}

/* 手机先不限制，保留原有移动端展示逻辑 */
/*
@media (max-width: 768px) {
  .home .hot-products ul.products > li.product:nth-child(n+5),
  .home .featured-products ul.products > li.product:nth-child(n+5) {
    display: none !important;
  }
}
*/

/* ==========================================
 * 单品页主图优化（基于当前主题真实结构）
 * 1. 其他板块尽量不动
 * 2. 主图区稍微变大
 * 3. 缩略图放到主图右侧
 * ========================================== */

/* 关键：真正让左侧区域变大，要改父级 grid 列宽 */
.single-product .woocommerce div.product,
.single-product .woocommerce-page div.product {
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 24px !important;
  align-items: start;
}

/* 图库内部：左边主图，右边缩略图 */
.single-product .woocommerce div.product div.images .woocommerce-product-gallery,
.single-product .woocommerce-page div.product div.images .woocommerce-product-gallery {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px !important;
  column-gap: 12px !important;
  align-items: start !important;
}

/* 主图显示区域 */
.single-product .woocommerce div.product div.images .flex-viewport,
.single-product .woocommerce-page div.product div.images .flex-viewport {
  grid-column: 1 !important;
  width: 100% !important;
  margin: 0 !important;
}

/* 主图图片 */
.single-product .woocommerce div.product div.images .woocommerce-product-gallery__image img,
.single-product .woocommerce-page div.product div.images .woocommerce-product-gallery__image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: 6px !important;
}

/* 右侧缩略图 */
.single-product .woocommerce div.product div.images ol.flex-control-thumbs,
.single-product .woocommerce-page div.product div.images ol.flex-control-thumbs {
  grid-column: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 72px !important;
  min-width: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 缩略图单项 */
.single-product .woocommerce div.product div.images ol.flex-control-thumbs li,
.single-product .woocommerce-page div.product div.images ol.flex-control-thumbs li {
  float: none !important;
  width: 72px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 缩略图图片 */
.single-product .woocommerce div.product div.images ol.flex-control-thumbs li img,
.single-product .woocommerce-page div.product div.images ol.flex-control-thumbs li img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* 手机端恢复主图下方缩略图 */
@media (max-width: 991px) {
  .single-product .woocommerce div.product,
  .single-product .woocommerce-page div.product {
    grid-template-columns: 1fr !important;
  }

  .single-product .woocommerce div.product div.images .woocommerce-product-gallery,
  .single-product .woocommerce-page div.product div.images .woocommerce-product-gallery {
    display: block !important;
  }

  .single-product .woocommerce div.product div.images ol.flex-control-thumbs,
  .single-product .woocommerce-page div.product div.images ol.flex-control-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: auto !important;
    min-width: 0 !important;
    margin-top: 12px !important;
  }

  .single-product .woocommerce div.product div.images ol.flex-control-thumbs li,
  .single-product .woocommerce-page div.product div.images ol.flex-control-thumbs li {
    width: 56px !important;
  }
}