.elementor-kit-40{--e-global-color-primary:#2F5FF0;--e-global-color-secondary:#FF6A2B;--e-global-color-text:#4B5563;--e-global-color-accent:#111827;--e-global-color-c477c6b:#1E45C4;--e-global-color-2f75af9:#EBF0FE;--e-global-color-d2f5557:#E5541A;--e-global-color-fe6b68b:#16A34A;--e-global-color-a1dc8d1:#E5E7EB;--e-global-color-af5b0de:#F7F8FA;--e-global-color-730ff68:#9CA3AF;--e-global-color-6a94ac3:#0F172A;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.3px;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.4px;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7px;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:700;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-40 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   社媒号 shemeihao.store · 全局样式（完整版 v6）
   更新：新增品类页所需样式
        breadcrumb（面包屑）、pd-main（商品主区）、howto（怎么使用）

   ※ 重要：凡是多列布局的容器，「内容宽度」必须设成【全宽度】
     否则 Elementor 会插一层 .e-con-inner，布局不生效

   用法：Elementor 编辑器 → ☰ → 站点设置 → 自定义 CSS
        【全选删除原有内容】→ 粘贴本文件全部 → 保存更改
   ============================================================ */


/* ============================================================
   一、变量定义（所有 --xxx 都在这里）
   ============================================================ */
:root{
  /* ---- 颜色 ---- */
  --brand-primary:#2F5FF0;      /* 主色：页头、链接、次要按钮描边 */
  --brand-primary-dk:#1E45C4;   /* 主色悬停 */
  --brand-primary-lt:#EBF0FE;   /* 浅蓝底：属性标签、区块背景 */
  --accent-cta:#FF6A2B;         /* CTA 橙：价格、购买按钮 */
  --accent-cta-dk:#E5541A;      /* CTA 悬停 */
  --success:#16A34A;            /* 绿色：5分钟发货、售后包换 */
  --text-1:#111827;             /* 标题 */
  --text-2:#4B5563;             /* 正文 */
  --text-3:#9CA3AF;             /* 辅助信息 */
  --border:#E5E7EB;             /* 描边、分割线 */
  --border-lt:#F1F5F9;          /* 更浅的分割线（规格行之间） */
  --bg-page:#F7F8FA;            /* 页面底色（浅灰） */
  --bg-card:#FFFFFF;            /* 卡片（纯白） */
  --bg-dark:#0F172A;            /* 页脚、公告条、批量采购条 */
  --bg-dark-2:#1E293B;          /* 深色区里的次级底色 */
  --bg-recommend:#FFF8F5;       /* 推荐规格行的淡橙底 */

  /* ---- 间距阶梯（只用这些值） ---- */
  --sp-1:4px;    --sp-2:8px;    --sp-3:12px;
  --sp-4:16px;   --sp-5:24px;   --sp-6:32px;
  --sp-7:48px;   --sp-8:64px;   --sp-9:80px;

  /* ---- 圆角 ---- */
  --radius-sm:6px;    /* 按钮、标签 */
  --radius-md:10px;   /* 卡片、输入框 */
  --radius-lg:16px;   /* 大 Banner */

  /* ---- 阴影 ---- */
  --shadow-card:0 1px 3px rgba(0,0,0,.06);
  --shadow-hover:0 8px 24px rgba(0,0,0,.10);
}


/* ============================================================
   二、通用区块
   ============================================================ */

/* 每个 Section 最外层容器加 class="sec"，自动获得统一上下留白 */
.sec{
  padding-top:var(--sp-8);
  padding-bottom:var(--sp-8);
}


/* ============================================================
   三、页眉 header
   ============================================================ */

.announce-bar{
  background:var(--bg-dark);
  color:#CBD5E1;
  font-size:11px;
}
.announce-bar a{
  color:#CBD5E1;
  text-decoration:none;
}
.announce-bar a:hover{ color:#fff; }

.header-main{
  background:#fff;
  border-bottom:1px solid var(--border);
}


/* ============================================================
   四、首屏 hero-banner
   ------------------------------------------------------------
   左侧分类栏 240px 固定 + 右侧 Banner 自动占满剩余
   手机端左侧栏隐藏（见第十二节）
   ============================================================ */

.hero-banner{
  display:flex;
  gap:var(--sp-3);
  align-items:stretch;
}

/* 左侧分类竖栏 */
.hero-side{
  width:240px;
  flex-shrink:0;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-2);
}

.hero-side a,
.hero-side .elementor-icon-list-text{
  font-size:13px;
  color:var(--text-1) !important;
  text-decoration:none;
}
.hero-side .elementor-icon-list-item{
  padding:6px 8px;
  border-radius:var(--radius-sm);
  transition:background .15s ease;
}
.hero-side .elementor-icon-list-item:hover{
  background:var(--brand-primary-lt);
}
/* 隐藏左侧栏图标列表的图标，只留纯文字 */
.hero-side .elementor-icon-list-icon{ display:none; }

/* 右侧蓝色大 Banner */
.hero-main{
  flex:1;
  background:var(--brand-primary);
  border-radius:var(--radius-lg);
  padding:var(--sp-7) var(--sp-6);
}
.hero-main h1,
.hero-main h2,
.hero-main h3{
  color:#fff;
  line-height:1.3;
}
.hero-main p{
  color:rgba(255,255,255,.85);
  font-size:14px;
}


/* ============================================================
   五、信任条 trust-strip
   ============================================================ */

.trust-strip{
  display:flex;
  gap:var(--sp-2);
}

.trust-item{
  flex:1;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-2);
  text-align:center;
}

.trust-title{
  font-size:12px;
  font-weight:600;
  color:var(--text-1);
}

.trust-sub{
  font-size:10px;
  color:var(--text-3);
}


/* ============================================================
   六、品类入口 category-tiles
   ------------------------------------------------------------
   桌面 8 列 / 手机 4 列（见第十二节）
   ============================================================ */

.category-tiles{
  display:grid !important;
  grid-template-columns:repeat(8,1fr) !important;
  gap:var(--sp-3) !important;
}

.cat-tile{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-4) var(--sp-2);
  text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
  border-color:var(--brand-primary);
}

.cat-tile-name,
.cat-tile-name a,
.cat-tile a{
  font-size:12px;
  font-weight:600;
  color:var(--text-1) !important;
  text-decoration:none;
}


/* ============================================================
   六之二、场景方案卡 persona-block
   ------------------------------------------------------------
   桌面 4 列 / 手机 2 列（见第十二节）
   容器「内容宽度」必须设成【全宽度】
   ============================================================ */

.persona-block{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:var(--sp-4) !important;
}

.persona-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.persona-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
  border-color:var(--brand-primary);
}

.persona-title,
.persona-title a{
  font-size:14px;
  font-weight:600;
  color:var(--text-1) !important;
  text-decoration:none;
}

.persona-desc{
  font-size:11px;
  color:var(--text-3);
  line-height:1.6;
}


/* ============================================================
   六之三、品类页专用
   ------------------------------------------------------------
   面包屑 / 商品主区 / 怎么使用
   凡是多列容器，「内容宽度」都要设成【全宽度】
   ============================================================ */

/* ---- 面包屑 ---- */
.breadcrumb,
.breadcrumb p{
  font-size:12px;
  color:var(--text-3);
}
.breadcrumb a{
  color:var(--text-3);
  text-decoration:none;
}
.breadcrumb a:hover{ color:var(--brand-primary); }

/* ---- 商品主区：左图 + 右信息 ---- */
.pd-main{
  display:flex;
  gap:var(--sp-5);
  align-items:flex-start;
}

.pd-gallery{
  width:320px;
  flex-shrink:0;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-3);
}

.pd-info{ flex:1; }

.pd-title{
  font-size:28px;
  font-weight:700;
  color:var(--text-1);
  line-height:1.35;
}

.pd-desc,
.pd-desc p{
  font-size:13px;
  color:var(--text-2);
  line-height:1.7;
}

/* 属性标签行（复用 card-tags 的样式） */
.pd-tags{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-1);
}
.pd-tags .tag,
.pd-tags span{
  background:var(--brand-primary-lt);
  color:var(--brand-primary);
  font-size:11px;
  padding:2px 8px;
  border-radius:4px;
}

/* ---- 怎么使用：3 步 ---- */
.howto{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
}

.howto-steps{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:var(--sp-3) !important;
}

.howto-step{
  background:var(--bg-page);
  border-radius:var(--radius-sm);
  padding:var(--sp-3);
}
.howto-num{
  font-size:11px;
  font-weight:700;
  color:var(--brand-primary);
}
.howto-title{
  font-size:12px;
  font-weight:600;
  color:var(--text-1);
}
.howto-desc,
.howto-desc p{
  font-size:11px;
  color:var(--text-3);
  line-height:1.6;
}

/* 长文案（SEO 命根子） */
.howto-text,
.howto-text p{
  font-size:13px;
  color:var(--text-2);
  line-height:1.9;
}
.howto-text{
  border-top:1px solid var(--border-lt);
  padding-top:var(--sp-3);
  margin-top:var(--sp-3);
}


/* ============================================================
   七、商品卡 product-card
   ============================================================ */

.product-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  transition:transform .15s ease, box-shadow .15s ease;
}
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

.card-title{
  color:var(--text-1);
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card-badge{
  background:var(--accent-cta);
  color:#fff;
  font-size:12px;
  font-weight:600;
  padding:2px 8px;
  border-radius:4px;
}

.card-tags span,
.card-tags .tag{
  background:var(--brand-primary-lt);
  color:var(--brand-primary);
  font-size:12px;
  padding:2px 8px;
  border-radius:4px;
}

.card-price{
  color:var(--accent-cta);
  font-size:20px;
  font-weight:700;
}

.card-trust{
  color:var(--success);
  font-size:12px;
}


/* ============================================================
   八、商品网格 product-grid
   ------------------------------------------------------------
   桌面 4 列 / 平板 3 列 / 手机 2 列（见第十二节）
   ============================================================ */

.product-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:var(--sp-4) !important;
}


/* ============================================================
   九、详情页规格列表 spec-list
   ============================================================ */

.spec-list{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
}

.spec-head{
  background:var(--bg-page);
  border-bottom:1px solid var(--border);
  padding:var(--sp-2) var(--sp-3);
  font-size:12px;
  font-weight:600;
  color:var(--text-1);
}

.spec-row{
  padding:var(--sp-3);
  border-bottom:1px solid var(--border-lt);
}
.spec-row:last-child{ border-bottom:none; }
.spec-row.is-recommended{ background:var(--bg-recommend); }

.spec-info{ flex:1; }

.spec-price{
  color:var(--accent-cta);
  font-size:16px;
  font-weight:700;
  width:56px;
  text-align:right;
  flex-shrink:0;
}


/* ============================================================
   十、短代码按钮（关键）
   ------------------------------------------------------------
   插件实际输出的 HTML：
   [epay_buy_button]  → <form class="epay-shop-buy-form">
                          <button>立即购买</button>
                        </form>
                        注意：button 本身没有 class，必须从 form 往下选
   [epay_add_to_cart] → <a class="epay-shop-add-cart-button">加入购物车</a>
   ============================================================ */

.card-actions,
.spec-row{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}

/* form 是块级元素，会撑破横排布局 —— 必须压成 flex 项 */
.card-actions .epay-shop-buy-form,
.spec-row .epay-shop-buy-form{
  margin:0;
  padding:0;
  display:flex;
  flex-shrink:0;
}
.card-actions .epay-shop-buy-form{ flex:1; }

/* 立即购买（主按钮） */
.card-actions .epay-shop-buy-form button,
.spec-row .epay-shop-buy-form button{
  height:40px;
  padding:0 16px;
  background:var(--accent-cta);
  color:#fff;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease;
}
.card-actions .epay-shop-buy-form button{ width:100%; }

.card-actions .epay-shop-buy-form button:hover,
.spec-row .epay-shop-buy-form button:hover{
  background:var(--accent-cta-dk);
}

/* 加入购物车（次要按钮） */
.card-actions .epay-shop-add-cart-button,
.spec-row .epay-shop-add-cart-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  background:#fff;
  color:var(--brand-primary);
  border:1px solid var(--brand-primary);
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  transition:background .15s ease;
}
.card-actions .epay-shop-add-cart-button:hover,
.spec-row .epay-shop-add-cart-button:hover{
  background:var(--brand-primary-lt);
  color:var(--brand-primary);
}


/* ============================================================
   十一、页脚 footer 与 批量采购条 bulk-cta
   ============================================================ */

.footer{ background:var(--bg-dark); }

.footer h1,.footer h2,.footer h3,.footer h4,
.footer .footer-col-title{ color:#fff; }

.footer p,
.footer .elementor-widget-text-editor{
  color:#94A3B8;
  font-size:11px;
  line-height:1.8;
}

.footer a,
.footer .elementor-icon-list-text{
  color:#94A3B8 !important;
  font-size:11px;
  text-decoration:none;
  transition:color .15s ease;
}
.footer a:hover,
.footer .elementor-icon-list-text:hover{
  color:#fff !important;
}

/* 隐藏页脚图标列表的图标，只留纯文字链接 */
.footer .elementor-icon-list-icon{ display:none; }
.footer .elementor-icon-list-item{ margin-bottom:6px; }

.footer-pay,
.footer-legal{
  border-top:1px solid var(--bg-dark-2);
}

.pay-tag{
  height:24px;
  padding:0 10px;
  border-radius:5px;
  background:var(--bg-dark-2);
  color:#CBD5E1;
  font-size:10px;
  display:inline-flex;
  align-items:center;
}

/* 批量采购条 */
.bulk-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  background:var(--bg-dark);
  border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-5);
}
.bulk-cta h1,.bulk-cta h2,.bulk-cta h3,.bulk-cta h4{
  color:#fff;
  font-size:18px;
}
.bulk-cta p{
  color:#94A3B8;
  font-size:12px;
}


/* ============================================================
   十一之二、常见问题 faq-accordion
   ============================================================ */

.faq-accordion .elementor-accordion-item{
  border:1px solid var(--border) !important;
  border-radius:var(--radius-md);
  margin-bottom:var(--sp-2);
  overflow:hidden;
  background:var(--bg-card);
}

.faq-accordion .elementor-tab-title{
  font-size:14px !important;
  font-weight:600;
  padding:var(--sp-3) var(--sp-4) !important;
  border:none !important;
}
.faq-accordion .elementor-tab-title a{
  color:var(--text-1) !important;
  text-decoration:none;
}
.faq-accordion .elementor-tab-title.elementor-active{
  background:var(--bg-page);
}

.faq-accordion .elementor-tab-content{
  font-size:13px !important;
  line-height:1.8;
  color:var(--text-2) !important;
  padding:var(--sp-3) var(--sp-4) !important;
  border:none !important;
}


/* ============================================================
   十二、响应式（平板 ≤1024px / 手机 ≤767px）
   ------------------------------------------------------------
   所有手机端调整都集中在这里，改移动端只看这一节
   ============================================================ */

@media (max-width:1024px){
  /* 商品网格：3 列 */
  .product-grid{ grid-template-columns:repeat(3,1fr) !important; }

  /* 品类入口：6 列 */
  .category-tiles{ grid-template-columns:repeat(6,1fr) !important; }

  /* 场景卡：2 列 */
  .persona-block{ grid-template-columns:repeat(2,1fr) !important; }
}

@media (max-width:767px){

  /* 区块留白收窄 */
  .sec{
    padding-top:var(--sp-7);
    padding-bottom:var(--sp-7);
  }

  /* 首屏：隐藏左侧分类栏，Banner 占满 */
  .hero-side{ display:none; }
  .hero-main{ padding:var(--sp-6) var(--sp-5); }

  /* 信任条：4 列变 2×2 */
  .trust-strip{ flex-wrap:wrap; }
  .trust-item{ flex:1 1 calc(50% - 4px); }

  /* 品类入口：4 列 */
  .category-tiles{
    grid-template-columns:repeat(4,1fr) !important;
    gap:var(--sp-2) !important;
  }
  .cat-tile{ padding:var(--sp-3) var(--sp-1); }

  /* 品类页：主区改成上下堆叠 */
  .pd-main{ flex-direction:column; }
  .pd-gallery{ width:100%; }
  .pd-title{ font-size:22px; }

  /* 怎么使用：3 步堆成 1 列 */
  .howto-steps{ grid-template-columns:1fr !important; }

  /* 场景卡：2 列 */
  .persona-block{
    grid-template-columns:repeat(2,1fr) !important;
    gap:var(--sp-3) !important;
  }

  /* 商品网格：2 列 */
  .product-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:var(--sp-3) !important;
  }
  .card-price{ font-size:18px; }

  /* 规格行：折成两行，避免挤成一团 */
  .spec-row{ flex-wrap:wrap; }
  .spec-info{ flex:1 1 100%; }
  .spec-price{ width:auto; text-align:left; flex:1; }

  /* 页脚：四列堆成一列 */
  .footer-main{
    flex-direction:column;
    gap:var(--sp-5);
  }
  .footer-legal{
    flex-direction:column;
    gap:var(--sp-2);
    text-align:center;
  }

  /* 批量采购条：横排变竖排 */
  .bulk-cta{
    flex-direction:column;
    gap:var(--sp-4);
    text-align:center;
  }
}


/* ============================================================
   十三、可访问性底线
   ============================================================ */

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

@media (prefers-reduced-motion:reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}

/* ============================ 完 ============================ *//* End custom CSS */