/* ============================================================
   CentSnap 区块运行时样式 (assets/blocks.css)

   ★ 前台页面与编辑器画布加载的是同一个文件 ★
   区块 render() 只负责吐出 CSS 变量（--cs-*），具体表现全在这里。
   变量 → 表现 的映射只有一份，所以「编辑器里长什么样，前台就长
   什么样」在结构上被保证，而不是靠两边人工对齐。
   ============================================================ */

/* ── marquee 跑马灯条 ─────────────────────────────────────── */
.cs-marquee {
  --cs-mq-bg: var(--cs-brand, #6b46c1);
  --cs-mq-h: 48px;
  --cs-mq-tc: #ffffff;
  --cs-mq-fs: 16px;
  --cs-mq-fw: normal;
  --cs-mq-lh: 1.5;
  --cs-mq-ls: 0px;
  --cs-mq-dur: 28s;
  --cs-mq-dir: normal;

  position: relative;
  overflow: hidden;
  width: 100%;
  height: var(--cs-mq-h);
  background: var(--cs-mq-bg);
  display: flex;
  align-items: center;
}
.cs-marquee-track {
  display: flex;
  width: max-content;
  animation: cs-marquee-scroll var(--cs-mq-dur) linear infinite;
  animation-direction: var(--cs-mq-dir);
  will-change: transform;
}
.cs-marquee-group { display: flex; align-items: center; white-space: nowrap; }
.cs-marquee-item {
  display: inline-flex;
  align-items: center;
  color: var(--cs-mq-tc);
  font-size: var(--cs-mq-fs);
  font-weight: var(--cs-mq-fw);
  line-height: var(--cs-mq-lh);
  letter-spacing: var(--cs-mq-ls);
  padding: 0 18px;
  white-space: nowrap;
}
.cs-marquee-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  margin-left: 36px;
}
@keyframes cs-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* 编辑器内暂停动画，方便对齐与截图；也避免长时间合成层占用 */
.cs-marquee--edit .cs-marquee-track { animation-play-state: paused; }
.cs-block:hover .cs-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cs-marquee-track { animation: none; }
}

/* ── hero 首屏 ───────────────────────────────────────────── */
.hero-title {
  color: var(--cs-hero-title-color, inherit);
  font-size: var(--cs-hero-title-size, inherit);
  font-weight: var(--cs-hero-title-weight, inherit);
}
.hero-sub {
  color: var(--cs-hero-sub-color, inherit);
  font-size: var(--cs-hero-sub-size, inherit);
}
@media (max-width: 1020px) {
  /* 平板：标题按比例缩，避免直接用桌面 px 溢出 */
  .hero-title { font-size: calc(var(--cs-hero-title-size, 56px) * .78); }
}
@media (max-width: 640px) {
  .hero-title { font-size: calc(var(--cs-hero-title-size, 56px) * .58); }
  .hero-sub   { font-size: calc(var(--cs-hero-sub-size, 18px) * .9); }
}

/* ── image_text 图文双栏 ─────────────────────────────────── */
.it-section { background: var(--b-bg-color, transparent); }
.it-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.it-pos-right .it-media { order: 2; }
.it-media { width: 100%; }
.it-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: var(--cs-it-shadow, none);
}
.it-media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f6;
  color: #b3b7bf;
  font-size: 14px;
  min-height: 220px;
}
.it-title { font-size: clamp(24px, 3vw, 38px); margin: .2em 0 .45em; line-height: 1.2; }
.it-body { font-size: 16px; line-height: 1.7; color: var(--b-body-color, #444); }
.it-body p { margin: .6em 0; }
.it-cta { margin-top: 18px; display: inline-block; }
@media (max-width: 900px) {
  .it-grid { grid-template-columns: 1fr; }
  .it-pos-right .it-media { order: 0; }
}

/* ── faq_list 手风琴 ────────────────────────────────────── */
.faq-section { background: var(--b-bg-color, transparent); }
.faq-title { font-size: clamp(24px, 3vw, 40px); margin: .1em 0 .6em; }
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--cs-faq-radius, 12px);
  margin-bottom: 12px;
  background: var(--cs-faq-bg, #fff);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--cs-faq-q-color, inherit);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ico { position: relative; width: 14px; height: 14px; flex: none; color: inherit; }
.faq-ico::before, .faq-ico::after {
  content: ''; position: absolute; background: currentColor; transition: transform .2s ease;
}
.faq-ico::before { top: 6px; left: 0; width: 14px; height: 2px; }
.faq-ico::after  { top: 0;  left: 6px; width: 2px; height: 14px; }
.faq-item[open] .faq-ico::after { transform: scaleY(0); }
.faq-answer {
  padding: 0 22px 18px;
  color: var(--cs-faq-a-color, #555);
  font-size: var(--cs-faq-a-size, 15px);
  line-height: 1.7;
}
.faq-answer p { margin: .5em 0; }

/* ── contact_form 联系表单 ──────────────────────────────── */
.cf-section { background: var(--b-bg-color, transparent); }
.cf-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--cs-cf-bg, #fff);
  border-radius: var(--cs-cf-radius, 16px);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.28);
}
.cf-title { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 .3em; }
.cf-sub { color: #666; margin: 0 0 22px; line-height: 1.6; }
.cs-contact-form .cs-field { margin-bottom: 16px; text-align: left; }
.cs-contact-form .cs-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cs-cf-label, #333);
}
.cs-contact-form .cs-field .req { color: #e03131; }
.cs-contact-form input,
.cs-contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #d8dce3;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-contact-form input:focus,
.cs-contact-form textarea:focus {
  outline: none;
  border-color: var(--cs-brand, #6b46c1);
  box-shadow: 0 0 0 3px rgba(107,70,193,.15);
}
.cs-contact-form textarea { resize: vertical; }
.cf-submit {
  width: 100%;
  margin-top: 4px;
  background: var(--cs-cf-btn-bg, var(--cs-brand, #6b46c1));
  color: var(--cs-cf-btn-color, #fff);
}
.cs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cs-contact-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.cs-contact-status.cs-ok  { background: #e7f7ec; color: #1b7a3d; border: 1px solid #b6e2c4; }
.cs-contact-status.cs-err { background: #fdecec; color: #c0271f; border: 1px solid #f3c2c2; }
@media (max-width: 640px) {
  .cf-card { padding: 22px 18px; border-radius: 12px; }
}

/* ── product_grid 产品网格（外贸核心动态块）────────────────── */
.cs-pgrid { background: var(--b-bg-color, transparent); }
.cs-pgrid .eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cs-pg-cat-color, var(--cs-brand, #6b46c1)); margin-bottom: 6px;
}
.cs-pg-title {
  font-size: clamp(24px, 3vw, 38px); margin: 0 0 .3em; line-height: 1.2;
  color: var(--cs-pg-title-color, #1a1a1a);
}
.cs-pg-sub { margin: 0 0 28px; color: #6b7280; font-size: 16px; line-height: 1.6; max-width: 720px; }

.cs-pg-grid {
  display: grid;
  grid-template-columns: repeat(var(--cs-pg-cols, 3), minmax(0, 1fr));
  gap: var(--cs-pg-gap, 20px);
}
.cs-pg-card {
  display: flex;
  flex-direction: column;
  background: var(--cs-pg-card-bg, #fff);
  border: 1px solid var(--cs-pg-card-border, rgba(0,0,0,.08));
  border-radius: var(--cs-pg-radius, 14px);
  overflow: hidden;
  box-shadow: var(--cs-pg-card-shadow, 0 8px 22px -16px rgba(0,0,0,.22));
  transition: transform .18s ease, box-shadow .18s ease;
}
.cs-pg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.30);
}
.cs-pg-img { display: block; width: 100%; aspect-ratio: 4 / 3; }
.cs-pg-img .cs-ph { width: 100%; height: 100%; }
.cs-pg-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.cs-pg-cat {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--cs-pg-cat-color, #6b7280); text-transform: uppercase;
}
.cs-pg-title-link {
  font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--cs-pg-title-color, #1a1a1a);
  text-decoration: none;
}
.cs-pg-title-link:hover { text-decoration: underline; }
.cs-pg-desc { font-size: 13px; color: var(--cs-pg-desc-color, #6b7280); line-height: 1.55; }
.cs-pg-price { font-size: 17px; font-weight: 700; color: var(--cs-pg-price-color, #111827); margin-top: auto; }
.cs-pg-price .cs-mk-old { font-size: 13px; font-weight: 400; color: #9ca3af; margin-left: 6px; }
.cs-pg-price .cs-mk-tag {
  font-size: 11px; font-weight: 700; color: #fff; background: #e03131;
  padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: middle;
}
.cs-pg-actions { display: flex; gap: 8px; margin-top: 12px; }
.cs-pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
  text-decoration: none; background: var(--cs-pg-btn-bg, var(--cs-brand, #6b46c1)); color: var(--cs-pg-btn-color, #fff);
  transition: filter .15s ease;
}
.cs-pg-btn:hover { filter: brightness(.94); }
.cs-pg-add {
  flex: 1; padding: 9px 12px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; background: var(--cs-pg-card-bg, #fff);
  color: var(--cs-pg-btn-bg, var(--cs-brand, #6b46c1));
  border: 1px solid var(--cs-pg-btn-bg, var(--cs-brand, #6b46c1));
  transition: background .15s ease, color .15s ease;
}
.cs-pg-add:hover { background: var(--cs-pg-btn-bg, var(--cs-brand, #6b46c1)); color: var(--cs-pg-btn-color, #fff); }
.cs-pg-out { flex: 1; text-align: center; padding: 9px 12px; font-size: 13px; color: #9ca3af; border: 1px dashed #d1d5db; border-radius: 10px; }
.cs-pg-empty {
  padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 15px;
  background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px;
}
@media (max-width: 1020px) {
  .cs-pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cs-pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cs-pg-body { padding: 12px; }
}

/* 榜单数标（热销榜 / 精选榜）*/
.cs-pg-rank, .cs-pl-rank {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: rgba(17,24,39,.62); border-radius: 8px; backdrop-filter: blur(2px);
}
.cs-pg-card { position: relative; }
.cs-pg-rank.top, .cs-pl-rank.top { background: #e03131; }
.cs-pl-rank.top { background: #e03131; }

/* ── product_list 产品列表（横向 / 图文混排）────────────────── */
.cs-plist { background: var(--b-bg-color, transparent); }
.cs-pl-title { font-size: clamp(24px, 3vw, 38px); margin: 0 0 .3em; line-height: 1.2; color: var(--cs-pl-title-color, #1a1a1a); }
.cs-pl-sub { margin: 0 0 26px; color: #6b7280; font-size: 16px; line-height: 1.6; max-width: 720px; }
.cs-pl-list { display: flex; flex-direction: column; gap: var(--cs-pl-gap, 14px); }
.cs-pl-row {
  display: flex; gap: 16px; align-items: stretch;
  background: var(--cs-pl-card-bg, #fff);
  border: 1px solid var(--cs-pl-card-border, rgba(0,0,0,.08));
  border-radius: var(--cs-pl-radius, 12px);
  box-shadow: var(--cs-pl-card-shadow, 0 8px 22px -16px rgba(0,0,0,.22));
  overflow: hidden; position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cs-pl-row:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -22px rgba(0,0,0,.28); }
.cs-pl-img { flex: 0 0 var(--cs-pl-img-w, 120px); width: var(--cs-pl-img-w, 120px); aspect-ratio: 1 / 1; display: block; }
.cs-pl-img .cs-ph { width: 100%; height: 100%; }
.cs-pl-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px 0; flex: 1; min-width: 0; }
.cs-pl-cat { font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--cs-pl-cat-color, #6b7280); }
.cs-pl-title-link { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--cs-pl-title-color, #1a1a1a); text-decoration: none; }
.cs-pl-title-link:hover { text-decoration: underline; }
.cs-pl-desc { font-size: 13px; color: var(--cs-pl-desc-color, #6b7280); line-height: 1.55; }
.cs-pl-price { font-size: 17px; font-weight: 700; color: var(--cs-pl-price-color, #111827); margin-top: auto; }
.cs-pl-price .cs-mk-old { font-size: 13px; font-weight: 400; color: #9ca3af; margin-left: 6px; }
.cs-pl-price .cs-mk-tag { font-size: 11px; font-weight: 700; color: #fff; background: #e03131; padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.cs-pl-actions { display: flex; gap: 8px; margin-top: 10px; }
.cs-pl-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none;
  background: var(--cs-pl-btn-bg, var(--cs-brand, #6b46c1)); color: var(--cs-pl-btn-color, #fff); transition: filter .15s ease;
}
.cs-pl-btn:hover { filter: brightness(.94); }
.cs-pl-add {
  padding: 8px 16px; border: 0; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: var(--cs-pl-card-bg, #fff); color: var(--cs-pl-btn-bg, var(--cs-brand, #6b46c1));
  border: 1px solid var(--cs-pl-btn-bg, var(--cs-brand, #6b46c1)); transition: background .15s ease, color .15s ease;
}
.cs-pl-add:hover { background: var(--cs-pl-btn-bg, var(--cs-brand, #6b46c1)); color: var(--cs-pl-btn-color, #fff); }
.cs-pl-out { text-align: center; padding: 8px 14px; font-size: 13px; color: #9ca3af; border: 1px dashed #d1d5db; border-radius: 10px; }
.cs-pl-empty { padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 15px; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }
@media (max-width: 560px) {
  .cs-pl-row { gap: 12px; }
  .cs-pl-img { flex-basis: 88px; width: 88px; }
  .cs-pl-body { padding: 12px 12px 12px 0; }
  .cs-pl-actions { flex-wrap: wrap; }
}

/* ── coupon_box 优惠券（营销装修）────────────────── */
.cs-coupon-box { background: var(--b-bg-color, transparent); }
.cs-cb-title { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 .25em; color: #1a1a1a; }
.cs-cb-sub { margin: 0 0 24px; color: #6b7280; font-size: 15px; }
.cs-cb-list { display: grid; gap: var(--cs-cb-gap, 16px); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cs-cb-list.cs-cb-mode-list { grid-template-columns: 1fr; }
.cs-cb-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid var(--cs-cb-theme, #16a34a);
  border-radius: var(--cs-cb-radius, 12px);
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.22);
}
.cs-cb-amount { font-size: 22px; font-weight: 800; color: var(--cs-cb-theme, #16a34a); }
.cs-cb-meta { display: flex; flex-direction: column; gap: 3px; }
.cs-cb-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: #111827; }
.cs-cb-cond { font-size: 12px; color: #6b7280; }
.cs-cb-copy {
  margin-top: 2px; padding: 8px 12px; border: 0; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--cs-cb-theme, #16a34a);
  transition: filter .15s ease;
}
.cs-cb-copy:hover { filter: brightness(.94); }
.cs-cb-empty { padding: 40px 20px; text-align: center; color: #9ca3af; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }

/* ── countdown 限时倒计时（营销装修）────────────────── */
.cs-countdown { background: var(--cs-cd-bg, #fff7ed); border-radius: var(--cs-cd-radius, 14px); padding: 28px 20px; text-align: center; }
.cs-cd-title { font-size: clamp(20px, 2.4vw, 30px); margin: 0 0 18px; color: #1a1a1a; }
.cs-cd-timer { display: flex; justify-content: center; gap: 12px; }
.cs-cd-cell {
  display: flex; flex-direction: column; align-items: center; min-width: 64px;
  padding: 12px 8px; background: #fff; border-radius: 10px;
  box-shadow: 0 6px 18px -12px rgba(0,0,0,.25);
}
.cs-cd-num { font-size: 30px; font-weight: 800; color: var(--cs-cd-accent, #dc2626); font-variant-numeric: tabular-nums; line-height: 1; }
.cs-cd-lbl { font-size: 12px; color: #6b7280; margin-top: 6px; }
.cs-cd-cta { display: inline-block; margin-top: 18px; padding: 11px 28px; border-radius: 10px; font-weight: 700; text-decoration: none; color: #fff; background: var(--cs-cd-accent, #dc2626); }
.cs-cd-cta:hover { filter: brightness(.94); }
.cs-cd-finished { font-size: 20px; font-weight: 700; color: var(--cs-cd-accent, #dc2626); padding: 12px; }
.cs-cd-empty, .cs-cd-long { padding: 14px; color: #6b7280; font-size: 15px; }

/* ── promo_banner 促销活动横幅（营销装修）────────────────── */
.cs-promo-banner { background: var(--cs-pb-bg, #fff1f2); border-radius: var(--cs-pb-radius, 14px); padding: 28px 20px; }
.cs-pb-title { font-size: clamp(20px, 2.4vw, 30px); margin: 0 0 18px; color: #1a1a1a; }
.cs-pb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cs-pb-card {
  display: flex; flex-direction: column; gap: 6px; padding: 16px;
  background: #fff; border-radius: 12px; border-top: 3px solid var(--cs-pb-accent, #e11d48);
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.22);
}
.cs-pb-head { display: flex; align-items: center; gap: 8px; }
.cs-pb-tag { font-size: 11px; font-weight: 700; color: #fff; background: var(--cs-pb-accent, #e11d48); padding: 2px 8px; border-radius: 6px; }
.cs-pb-cardtitle { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.cs-pb-big { font-size: 24px; font-weight: 800; color: var(--cs-pb-accent, #e11d48); }
.cs-pb-sub { font-size: 13px; color: #6b7280; }
.cs-pb-cta { display: inline-block; margin-top: 18px; padding: 11px 28px; border-radius: 10px; font-weight: 700; text-decoration: none; color: #fff; background: var(--cs-pb-accent, #e11d48); }
.cs-pb-cta:hover { filter: brightness(.94); }
.cs-pb-empty { padding: 40px 20px; text-align: center; color: #9ca3af; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }

/* ══ #1051 内容数据动态块（news_feed / case_studies / testimonials / brand_showcase / team_members / certifications）══ */

/* ── 通用区块外壳（眉标题 / 标题 / 副标题）── */
.cs-nfeed, .cs-cstudy, .cs-tmonial, .cs-bshow, .cs-tmember, .cs-cert { background: var(--b-bg-color, transparent); }
.cs-nfeed .eyebrow, .cs-cstudy .eyebrow, .cs-tmonial .eyebrow, .cs-bshow .eyebrow, .cs-tmember .eyebrow, .cs-cert .eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cs-nf-cat-color, var(--cs-brand, #6b46c1)); margin-bottom: 6px;
}
.cs-nf-title, .cs-cs-title, .cs-tm-title, .cs-bs-title, .cs-ts-title, .cs-ct-title {
  font-size: clamp(24px, 3vw, 38px); margin: 0 0 .3em; line-height: 1.2;
  color: var(--cs-nf-title-color, #1a1a1a);
}
.cs-nf-sub, .cs-cs-sub, .cs-tm-sub, .cs-bs-sub, .cs-ts-sub, .cs-ct-sub {
  margin: 0 0 28px; color: #6b7280; font-size: 16px; line-height: 1.6; max-width: 720px;
}

/* ── news_feed 资讯流 ── */
.cs-nf-grid { display: grid; grid-template-columns: repeat(var(--cs-nf-cols, 3), minmax(0, 1fr)); gap: var(--cs-nf-gap, 20px); }
.cs-nf-card {
  display: flex; flex-direction: column; background: var(--cs-nf-card-bg, #fff);
  border: 1px solid var(--cs-nf-card-border, rgba(0,0,0,.08)); border-radius: var(--cs-nf-radius, 14px);
  overflow: hidden; box-shadow: var(--cs-nf-card-shadow, 0 8px 22px -16px rgba(0,0,0,.22));
  transition: transform .18s ease, box-shadow .18s ease;
}
.cs-nf-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.30); }
.cs-nf-img { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #f3f4f6; }
.cs-nf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-nf-img .cs-ph { width: 100%; height: 100%; }
.cs-nf-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.cs-nf-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--cs-nf-meta-color, #6b7280); }
.cs-nf-cat { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.cs-nf-card-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--cs-nf-title-color, #1a1a1a); text-decoration: none; }
.cs-nf-card-title:hover { text-decoration: underline; }
.cs-nf-excerpt { font-size: 13px; color: var(--cs-nf-body-color, #6b7280); line-height: 1.55; }
.cs-nf-btn { display: inline-block; align-self: flex-start; margin-top: auto; padding: 8px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; background: var(--cs-nf-btn-bg, var(--cs-brand, #6b46c1)); color: var(--cs-nf-btn-color, #fff); transition: filter .15s ease; }
.cs-nf-btn:hover { filter: brightness(.94); }
.cs-nf-empty { padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 15px; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }

/* ── case_studies 客户案例（复用资讯视觉，仅前缀不同）── */
.cs-cs-grid { display: grid; grid-template-columns: repeat(var(--cs-cs-cols, 2), minmax(0, 1fr)); gap: var(--cs-cs-gap, 24px); }
.cs-cs-card {
  display: flex; flex-direction: column; background: var(--cs-cs-card-bg, #fff);
  border: 1px solid var(--cs-cs-card-border, rgba(0,0,0,.08)); border-radius: var(--cs-cs-radius, 14px);
  overflow: hidden; box-shadow: var(--cs-cs-card-shadow, 0 8px 22px -16px rgba(0,0,0,.22));
  transition: transform .18s ease, box-shadow .18s ease;
}
.cs-cs-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.30); }
.cs-cs-img { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #f3f4f6; }
.cs-cs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-cs-img .cs-ph { width: 100%; height: 100%; }
.cs-cs-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.cs-cs-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--cs-cs-meta-color, #6b7280); }
.cs-cs-cat { font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.cs-cs-card-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--cs-cs-title-color, #1a1a1a); text-decoration: none; }
.cs-cs-card-title:hover { text-decoration: underline; }
.cs-cs-excerpt { font-size: 14px; color: var(--cs-cs-body-color, #6b7280); line-height: 1.6; }
.cs-cs-btn { display: inline-block; align-self: flex-start; margin-top: auto; padding: 9px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; background: var(--cs-cs-btn-bg, var(--cs-brand, #6b46c1)); color: var(--cs-cs-btn-color, #fff); transition: filter .15s ease; }
.cs-cs-btn:hover { filter: brightness(.94); }
.cs-cs-empty { padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 15px; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }

/* ── testimonials 客户评价 ── */
.cs-tm-grid { display: grid; grid-template-columns: repeat(var(--cs-tm-cols, 3), minmax(0, 1fr)); gap: var(--cs-tm-gap, 20px); }
.cs-tm-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 18px;
  background: var(--cs-tm-card-bg, #fff); border: 1px solid var(--cs-tm-card-border, rgba(0,0,0,.08));
  border-radius: var(--cs-tm-radius, 14px); box-shadow: var(--cs-tm-card-shadow, 0 8px 22px -16px rgba(0,0,0,.22));
}
.cs-tm-stars { font-size: 16px; line-height: 1; color: var(--cs-tm-star-color, #f5a623); letter-spacing: 1px; }
.cs-tm-stars .cs-star { color: var(--cs-tm-star-color, #f5a623); }
.cs-tm-stars .cs-star.on { color: var(--cs-tm-star-color, #f5a623); }
.cs-tm-stars .cs-star.half { color: var(--cs-tm-star-color, #f5a623); }
.cs-tm-card-title { font-size: 15px; font-weight: 600; color: var(--cs-tm-title-color, #1a1a1a); }
.cs-tm-body { font-size: 14px; color: var(--cs-tm-body-color, #4b5563); line-height: 1.6; }
.cs-tm-reply { font-size: 13px; color: #6b7280; background: #f6f7fb; border-left: 3px solid var(--cs-tm-star-color, #f5a623); padding: 8px 10px; border-radius: 0 8px 8px 0; }
.cs-tm-reply-tag { display: inline-block; font-weight: 700; margin-right: 6px; color: var(--cs-tm-star-color, #f5a623); }
.cs-tm-name { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--cs-tm-name-color, #374151); }
.cs-tm-empty { padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 15px; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }

/* ── brand_showcase 品牌墙 ── */
.cs-bs-grid { display: grid; grid-template-columns: repeat(var(--cs-bs-cols, 6), minmax(0, 1fr)); gap: var(--cs-bs-gap, 16px); align-items: stretch; }
.cs-bs-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 12px; background: var(--cs-bs-card-bg, #fff);
  border: 1px solid var(--cs-bs-card-border, rgba(0,0,0,.08)); border-radius: var(--cs-bs-radius, 12px);
  box-shadow: var(--cs-bs-card-shadow, none); text-align: center;
}
.cs-bs-logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; display: block; }
.cs-bs-logo .cs-ph { width: 100%; height: 64px; }
.cs-bs-name { font-size: 13px; font-weight: 600; color: var(--cs-bs-name-color, #374151); }
.cs-bs-empty { padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 15px; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }
@media (max-width: 1020px) { .cs-bs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cs-bs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── team_members 团队成员 ── */
.cs-ts-grid { display: grid; grid-template-columns: repeat(var(--cs-ts-cols, 4), minmax(0, 1fr)); gap: var(--cs-ts-gap, 20px); }
.cs-ts-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 22px 16px; background: var(--cs-ts-card-bg, #fff);
  border: 1px solid var(--cs-ts-card-border, rgba(0,0,0,.08)); border-radius: var(--cs-ts-radius, 14px);
  box-shadow: var(--cs-ts-card-shadow, 0 8px 22px -16px rgba(0,0,0,.22));
}
.cs-ts-avatar { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #f3f4f6; flex: 0 0 auto; }
.cs-ts-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-ts-avatar .cs-ph { width: 100%; height: 100%; }
.cs-ts-name { font-size: 16px; font-weight: 700; color: var(--cs-ts-name-color, #1a1a1a); }
.cs-ts-role { font-size: 13px; font-weight: 600; color: var(--cs-ts-role-color, var(--cs-brand, #6b46c1)); }
.cs-ts-bio { font-size: 13px; color: var(--cs-ts-body-color, #6b7280); line-height: 1.55; }
.cs-ts-email { font-size: 12px; color: #6b7280; text-decoration: none; }
.cs-ts-email:hover { text-decoration: underline; }
.cs-ts-empty { padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 15px; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }

/* ── certifications 资质证书 ── */
.cs-ct-grid { display: grid; grid-template-columns: repeat(var(--cs-ct-cols, 4), minmax(0, 1fr)); gap: var(--cs-ct-gap, 20px); }
.cs-ct-card {
  display: flex; flex-direction: column; background: var(--cs-ct-card-bg, #fff);
  border: 1px solid var(--cs-ct-card-border, rgba(0,0,0,.08)); border-radius: var(--cs-ct-radius, 14px);
  overflow: hidden; box-shadow: var(--cs-ct-card-shadow, 0 8px 22px -16px rgba(0,0,0,.22));
}
.cs-ct-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f4f6; }
.cs-ct-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; box-sizing: border-box; }
.cs-ct-img .cs-ph { width: 100%; height: 100%; }
.cs-ct-body { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 18px; }
.cs-ct-name { font-size: 15px; font-weight: 700; color: var(--cs-ct-name-color, #1a1a1a); }
.cs-ct-issuer { font-size: 13px; color: var(--cs-ct-issuer-color, var(--cs-brand, #6b46c1)); }
.cs-ct-code { font-size: 12px; color: var(--cs-ct-code-color, #6b7280); }
.cs-ct-date { font-size: 12px; color: #9ca3af; }
.cs-ct-empty { padding: 48px 20px; text-align: center; color: #9ca3af; font-size: 15px; background: #f9fafb; border: 1px dashed #e5e7eb; border-radius: 14px; }

/* ── 响应式：内容块在窄屏统一降列 ── */
@media (max-width: 1020px) {
  .cs-nf-grid, .cs-cs-grid, .cs-tm-grid, .cs-ts-grid, .cs-ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cs-nf-grid, .cs-cs-grid, .cs-tm-grid, .cs-ts-grid, .cs-ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cs-nf-body, .cs-cs-body { padding: 12px; }
}

/* ── spacer 间距分隔 ─────────────────────────────────── */
.cs-spacer { min-height: var(--cs-spacer-h, 48px); width: 100%; }
@media (max-width: 768px) {
  .cs-spacer { min-height: var(--cs-spacer-hm, var(--cs-spacer-h, 48px)); }
}

/* ── columns 多列布局 ────────────────────────────────── */
.cs-col-grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.cs-col-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cs-col-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-col-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cs-col {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; transition: box-shadow .2s, transform .2s;
}
.cs-col:hover { box-shadow: 0 12px 32px rgba(0,0,0,.08); transform: translateY(-3px); }
.cs-col-eyebrow { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-color); font-weight: 700; margin-bottom: 8px; }
.cs-col-title { font-size: 19px; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.cs-col-body { font-size: 14px; color: var(--text-400); line-height: 1.7; margin-bottom: 14px; }
.cs-col-link { font-size: 13.5px; font-weight: 600; color: var(--primary-color); }
@media (max-width: 900px) {
  .cs-col-grid.cols-3, .cs-col-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cs-col-grid.cols-2, .cs-col-grid.cols-3, .cs-col-grid.cols-4 { grid-template-columns: 1fr; }
}

/* ── gallery 图片画廊 ────────────────────────────────── */
.cs-gallery-grid { display: grid; gap: 16px; }
.cs-gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cs-gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cs-gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cs-gallery-grid.gap-sm { gap: 8px; }
.cs-gallery-grid.gap-md { gap: 16px; }
.cs-gallery-grid.gap-lg { gap: 28px; }
.cs-gallery-grid.layout-masonry { display: block; column-count: 3; column-gap: 16px; }
.cs-gallery-grid.layout-masonry .cs-gallery-item { break-inside: avoid; margin-bottom: 16px; }
.cs-gallery-item { margin: 0; overflow: hidden; border-radius: var(--r); background: var(--bg-soft-4); }
.cs-gallery-item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s; }
.cs-gallery-grid.layout-masonry .cs-gallery-item img { aspect-ratio: auto; height: auto; }
.cs-gallery-item:hover img { transform: scale(1.04); }
.cs-gallery-ph { width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--bg-soft-4), var(--bg-soft-6)); }
.cs-gallery-item figcaption { padding: 10px 12px; font-size: 13px; color: var(--text-400); background: var(--white); }
@media (max-width: 900px) {
  .cs-gallery-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cs-gallery-grid.layout-masonry { column-count: 2; }
}
@media (max-width: 600px) {
  .cs-gallery-grid.cols-2, .cs-gallery-grid.cols-3, .cs-gallery-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cs-gallery-grid.layout-masonry { column-count: 1; }
}

/* ── carousel 图片轮播 ───────────────────────────────── */
.cs-carousel { position: relative; width: 100%; border-radius: var(--r); overflow: hidden; background: var(--bg-soft-4); }
.cs-carousel-track { position: relative; width: 100%; aspect-ratio: 21 / 9; }
.cs-carousel-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease;
  background-size: cover; background-position: center; display: flex; align-items: flex-end;
}
.cs-carousel-slide.is-active { opacity: 1; visibility: visible; }
.cs-carousel-slide.no-img { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); }
.cs-carousel-slide:not(.no-img)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%);
}
.cs-carousel-content { position: relative; z-index: 2; color: #fff; padding: clamp(20px, 4vw, 48px); max-width: 680px; }
.cs-carousel-title { font-size: clamp(20px, 3vw, 34px); font-weight: 700; margin-bottom: 8px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.cs-carousel-sub { font-size: clamp(13px, 1.4vw, 16px); margin-bottom: 14px; opacity: .92; }
.cs-carousel-btn { margin-top: 4px; }
.cs-carousel-prev, .cs-carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.9);
  color: #171717; font-size: 24px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: .2s;
}
.cs-carousel-prev { left: 14px; }
.cs-carousel-next { right: 14px; }
.cs-carousel-prev:hover, .cs-carousel-next:hover { background: var(--primary-color); color: #fff; }
.cs-carousel-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; }
.cs-carousel-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); transition: .2s; }
.cs-carousel-dot.is-active { background: #fff; width: 24px; border-radius: 5px; }
.cs-carousel-single .cs-carousel-prev,
.cs-carousel-single .cs-carousel-next,
.cs-carousel-single .cs-carousel-dots { display: none; }
@media (max-width: 768px) {
  .cs-carousel-track { aspect-ratio: 16 / 10; }
  .cs-carousel-prev, .cs-carousel-next { width: 34px; height: 34px; font-size: 20px; }
}

/* ── breadcrumb 面包屑 ───────────────────────────────── */
.cs-breadcrumb { padding: 10px 0; }
.cs-breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-400); }
.cs-breadcrumb-list .cs-bc-item a { color: var(--text-400); transition: .15s; }
.cs-breadcrumb-list .cs-bc-item a:hover { color: var(--primary-color); }
.cs-breadcrumb-list .cs-bc-current { color: var(--text-700); font-weight: 600; }
.cs-breadcrumb-list .cs-bc-sep { color: var(--text-200); user-select: none; }

/* ── shipping 外贸物流方式 ───────────────────────────── */
.cs-ship-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.cs-ship-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px; transition: box-shadow .2s, transform .2s;
}
.cs-ship-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.08); transform: translateY(-3px); }
.cs-ship-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-bg); color: var(--primary-color); display: grid; place-items: center; margin-bottom: 4px; }
.cs-ship-carrier { font-size: 17px; font-weight: 600; line-height: 1.3; }
.cs-ship-regions { font-size: 13.5px; color: var(--text-400); line-height: 1.5; }
.cs-ship-eta { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--primary-color); background: var(--brand-bg); border-radius: 100px; padding: 3px 12px; }
.cs-ship-note { font-size: 12.5px; color: var(--text-350); line-height: 1.5; }
@media (max-width: 900px) { .cs-ship-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cs-ship-grid { grid-template-columns: 1fr; } }

/* ── #1053 新增块统一降列（窄屏） ── */
@media (max-width: 1020px) {
  .cs-ship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cs-ship-grid { grid-template-columns: 1fr; gap: 12px; }
}


/* ==========================================================================
   全局页头区块（site_header）/ 全局页脚区块（global_footer）
   —— 由 pages.slug=header / footer 的区块渲染，后台「页面构建器」可视化编辑。
   同步维护于 assets/store.css（前台）与 assets/blocks.css（编辑器画布），
   两处样式必须一致，保证编辑器所见即前台所得。
   ========================================================================== */

/* ── 页头 ── */
.cs-header-block { width: 100%; box-sizing: border-box; }
.cs-header-block .cs-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.cs-header-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
  min-height: inherit; padding: 10px 20px;
}
.cs-header-block .cs-logo {
  font-size: 20px; font-weight: 800; letter-spacing: .3px; color: inherit;
  text-decoration: none; display: inline-flex; align-items: center; flex: 0 0 auto;
}
.cs-header-block .cs-logo-img { max-height: 34px; display: block; }
.cs-header-menu { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0; }
.cs-header-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex: 1 1 auto; }
.cs-header-nav a {
  color: var(--cs-hd-link, #4b5563); font-size: 15px; font-weight: 600;
  text-decoration: none; padding: 6px 2px; position: relative; white-space: nowrap;
  transition: color .15s;
}
.cs-header-nav a:hover { color: var(--cs-hd-hover, #2f6fed); }
.cs-header-nav a.on { color: var(--cs-hd-active, #2f6fed); }
.cs-header-nav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: currentColor; border-radius: 2px;
}
/* 搜索框 */
.cs-header-search { display: flex; align-items: center; flex: 0 0 auto; }
.cs-header-search input {
  height: 32px; width: 170px; box-sizing: border-box; padding: 0 10px;
  border: 1px solid rgba(0, 0, 0, .12); border-right: 0; border-radius: 8px 0 0 8px;
  font-size: 13px; background: rgba(255, 255, 255, .9); color: #333; outline: none;
}
.cs-header-search input:focus { border-color: var(--cs-hd-hover, #2f6fed); }
.cs-header-search button {
  height: 32px; padding: 0 11px; border: 1px solid var(--cs-hd-hover, #2f6fed);
  background: var(--cs-hd-hover, #2f6fed); color: #fff; border-radius: 0 8px 8px 0;
  cursor: pointer; display: inline-flex; align-items: center;
}
/* 右侧功能区（购物车 / 语言货币 / 账户） */
.cs-header-util { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: 0 0 auto; }
.cs-header-util a {
  color: var(--cs-hd-link, #4b5563); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: color .15s;
}
.cs-header-util a:hover, .cs-header-util a.on { color: var(--cs-hd-hover, #2f6fed); }
.cs-hd-cart { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.cs-header-block .cs-badge {
  display: inline-block; min-width: 18px; margin: 0; padding: 0 5px;
  font-size: 12px; line-height: 18px; text-align: center; font-weight: 700;
  background: #ef4444; color: #fff; border-radius: 9px;
}
.cs-hd-user { font-size: 12.5px; opacity: .7; white-space: nowrap; }
.cs-header-util a.cs-hd-register {
  padding: 6px 13px; border-radius: 8px; background: var(--cs-hd-hover, #2f6fed); color: #fff;
}
.cs-header-util a.cs-hd-register:hover { filter: brightness(1.08); color: #fff; }
.cs-hd-logout { opacity: .75; }
/* 汉堡（窄屏） */
.cs-hd-burger {
  display: none; margin-left: auto; background: none; border: 0; color: inherit;
  cursor: pointer; padding: 6px; border-radius: 8px;
}
.cs-hd-burger:hover { background: rgba(0, 0, 0, .06); }
/* 对齐模式 */
.cs-header-align-center .cs-header-nav { justify-content: center; }
.cs-header-align-right  .cs-header-nav { justify-content: flex-end; }
@media (max-width: 900px) {
  .cs-hd-burger { display: inline-flex; }
  .cs-header-menu {
    display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: 12px; padding: 6px 0 14px;
  }
  .cs-header-menu.cs-header-menu-open { display: flex; }
  .cs-header-nav { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
  .cs-header-util { margin-left: 0; flex-wrap: wrap; gap: 12px; }
  .cs-header-search input { width: 100%; flex: 1 1 auto; }
  .cs-header-search { width: 100%; }
}

/* ── 页脚 ── */
.cs-gfoot { width: 100%; box-sizing: border-box; padding: 46px 0 0; }
.cs-gfoot .cs-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.cs-gfoot-inner { display: flex; flex-wrap: wrap; gap: 34px; padding-bottom: 32px; }
.cs-gfoot-brandcol { flex: 1 1 240px; min-width: 200px; }
.cs-gfoot-brand { font-size: 19px; font-weight: 800; color: var(--cs-ft-title, #fff); display: block; }
.cs-gfoot-logo { max-height: 32px; display: block; }
.cs-gfoot-tagline { margin: 12px 0 0; font-size: 13px; line-height: 1.75; opacity: .85; }
.cs-gfoot-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: 14px 8px 0 0; border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: var(--cs-ft-link, #94a3b8);
  text-decoration: none; font-size: 13px; font-weight: 700; transition: all .15s;
}
.cs-gfoot-social:hover { background: rgba(255, 255, 255, .18); color: var(--cs-ft-hover, #fff); }
.cs-gfoot-col {
  flex: 1 1 calc(100% / (var(--cs-ft-cols, 3) + 1.4) - 34px); min-width: 140px;
}
.cs-gfoot-col h4, .cs-gfoot-news h4 {
  margin: 0 0 13px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cs-ft-title, #fff);
}
.cs-gfoot-col a {
  display: block; margin-bottom: 9px; font-size: 13.5px; text-decoration: none;
  color: var(--cs-ft-link, #94a3b8); transition: color .15s;
}
.cs-gfoot-col a:hover { color: var(--cs-ft-hover, #fff); }
.cs-gfoot-news { flex: 1 1 260px; min-width: 220px; }
.cs-gfoot-news p { margin: 0; font-size: 12.5px; line-height: 1.7; opacity: .8; }
.cs-gfoot-sub { display: flex; gap: 8px; margin-top: 12px; }
.cs-gfoot-sub input {
  flex: 1 1 auto; height: 36px; box-sizing: border-box; padding: 0 11px; font-size: 13px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
  background: rgba(255, 255, 255, .07); color: inherit; outline: none;
}
.cs-gfoot-sub input::placeholder { color: currentColor; opacity: .5; }
.cs-gfoot-sub input:focus { border-color: rgba(255, 255, 255, .4); }
.cs-gfoot-sub button {
  height: 36px; padding: 0 15px; border: 0; border-radius: 8px; cursor: pointer;
  background: #2f6fed; color: #fff; font-size: 13px; font-weight: 600;
}
.cs-gfoot-sub button:hover { filter: brightness(1.08); }
.cs-gfoot-copy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px;
}
.cs-gfoot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; }
.cs-gfoot-meta a { color: var(--cs-ft-link, #94a3b8); text-decoration: none; }
.cs-gfoot-meta a:hover { color: var(--cs-ft-hover, #fff); }
.cs-gfoot-powered { opacity: .6; }
@media (max-width: 720px) {
  .cs-gfoot { padding-top: 34px; }
  .cs-gfoot-inner { gap: 26px; }
  .cs-gfoot-col { flex: 1 1 45%; }
  .cs-gfoot-meta { margin-left: 0; }
}

/* ===== CentSnap #1213 新增组件样式 ===== */
.cs-acc-item{border:1px solid rgba(0,0,0,.08);border-radius:10px;margin-bottom:8px;overflow:hidden}
.cs-acc-item summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.cs-acc-item summary::-webkit-details-marker{display:none}
.cs-acc-ico{color:#7c3aed;font-weight:700}
.cs-acc-body{padding:0 16px 14px;color:#444;line-height:1.7}
.cs-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;margin:8px 0;font-size:14px}
.cs-alert-info{background:#eff6ff;color:#1e40af}.cs-alert-success{background:#ecfdf5;color:#047857}
.cs-alert-warning{background:#fffbeb;color:#b45309}.cs-alert-error{background:#fef2f2;color:#b91c1c}
.cs-alert-ico{font-weight:700;flex:0 0 auto}.cs-alert-close{margin-left:auto;background:none;border:0;font-size:18px;cursor:pointer;color:inherit}
.cs-pbar{margin:10px 0}.cs-pbar-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.cs-pbar-track{height:10px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden}
.cs-pbar-fill{height:100%;background:var(--cs-brand,#2563eb);border-radius:99px;transition:width .6s ease}
.cs-counter{text-align:center;padding:10px}.cs-counter-num{font-size:38px;font-weight:800;color:#111;display:block}
.cs-counter-suf{font-size:22px;font-weight:700;color:#7c3aed}.cs-counter-lbl{display:block;color:#666;font-size:13px;margin-top:4px}
.cs-counters,.cs-pbars,.cs-guarantee,.cs-reviews{display:grid;gap:14px}
.cs-counters{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cs-table-wrap{overflow-x:auto}.cs-table{width:100%;border-collapse:collapse;font-size:14px}
.cs-table th,.cs-table td{border:1px solid rgba(0,0,0,.1);padding:10px 12px;text-align:left}
.cs-table thead{background:#f8fafc;font-weight:600}
.cs-section{margin:0}.cs-section .wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.cs-section-title{font-size:30px;margin:0 0 8px}.cs-section-sub{color:#555;margin:0 0 10px}
.cs-bloggrid-grid,.cs-pgrid-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
.cs-blog-card,.cs-pcard{border:1px solid rgba(0,0,0,.08);border-radius:14px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.cs-blog-card:hover,.cs-pcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px -20px rgba(0,0,0,.3)}
.cs-blog-thumb,.cs-pcard-thumb{display:block;aspect-ratio:16/9;background:#f1f5f9;overflow:hidden}
.cs-blog-thumb img,.cs-pcard-thumb img{width:100%;height:100%;object-fit:cover}
.cs-blog-cat{color:#7c3aed;font-size:12px;font-weight:600;padding:12px 14px 0}
.cs-blog-card-title,.cs-pcard-title{font-size:16px;margin:8px 14px;line-height:1.4}
.cs-blog-ex,.cs-pcard-price{padding:0 14px 14px;color:#555;font-size:14px}
.cs-pcard-price{color:#e11d48;font-weight:700;font-size:16px}
.cs-pcard-badge{position:absolute;top:10px;left:10px;background:#e11d48;color:#fff;font-size:12px;padding:2px 8px;border-radius:99px}
.cs-pcard{position:relative}.cs-pcard-ph{width:100%;height:100%;background:linear-gradient(135deg,#eef2f7,#dfe7f1)}
.cs-bloglist-rows{display:flex;flex-direction:column;gap:16px}
.cs-blog-row{display:flex;gap:16px;border-bottom:1px solid rgba(0,0,0,.06);padding-bottom:16px}
.cs-blog-row-thumb{flex:0 0 120px;aspect-ratio:16/9;background:#f1f5f9;border-radius:8px;overflow:hidden}
.cs-blog-row-thumb img{width:100%;height:100%;object-fit:cover}
.cs-blog-row-meta{color:#999;font-size:12px;margin-bottom:4px}
.cs-blogpost{display:flex;gap:20px;flex-wrap:wrap}.cs-blogpost-thumb{flex:1 1 320px;border-radius:14px;overflow:hidden;background:#f1f5f9}
.cs-blogpost-thumb img{width:100%}.cs-blogpost-body{flex:1 1 320px}
.cs-blogpost-cat{color:#7c3aed;font-weight:600;font-size:13px}
.cs-review{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;background:#fff}
.cs-review-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.cs-review-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#eee}
.cs-review-name{font-weight:600}.cs-review-stars{color:#f59e0b;letter-spacing:2px;margin-bottom:6px}
.cs-review-text{color:#444;line-height:1.7}.cs-review-date{color:#999;font-size:12px;margin-top:6px}
.cs-quickview-inner{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.cs-quickview-media{flex:1 1 280px;aspect-ratio:1/1;background:#f1f5f9;border-radius:14px;overflow:hidden}
.cs-quickview-media img{width:100%;height:100%;object-fit:cover}.cs-quickview-info{flex:1 1 280px}
.cs-quickview-price{font-size:24px;font-weight:800;color:#e11d48;margin:8px 0}
.cs-minicart{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;background:#fff}
.cs-minicart-actions{display:flex;gap:10px;margin-top:12px}
.cs-stock{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:99px}
.cs-stock-in{background:#ecfdf5;color:#047857}.cs-stock-out{background:#fef2f2;color:#b91c1c}
.cs-stock-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.cs-popup{position:relative}.cs-popup-trigger{position:fixed;bottom:24px;right:24px;z-index:60;border:0;background:#7c3aed;color:#fff;padding:12px 16px;border-radius:99px;cursor:pointer;box-shadow:0 10px 30px -10px rgba(124,58,237,.6)}
.cs-popup-modal[hidden]{display:none}.cs-popup-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:80}
.cs-popup-box{background:#fff;border-radius:16px;padding:28px;max-width:420px;text-align:center;position:relative}
.cs-popup-box img{width:100%;border-radius:12px;margin-bottom:12px}
.cs-popup-close{position:absolute;top:8px;right:12px;border:0;background:none;font-size:22px;cursor:pointer}
.cs-form{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:20px;background:#fff;max-width:520px}
.cs-form-title{margin:0 0 14px}.cs-fld{margin-bottom:12px;display:flex;flex-direction:column;gap:4px}
.cs-fld label{font-size:13px;color:#555}.cs-fld input,.cs-fld textarea,.cs-fld select{border:1px solid rgba(0,0,0,.15);border-radius:8px;padding:9px 11px;font:inherit}
.cs-form-submit{margin-top:6px;cursor:pointer}.cs-form-done{color:#047857;font-weight:600;padding:20px}
.cs-guarantee{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cs-guarantee-item{display:flex;gap:12px;align-items:flex-start}
.cs-guarantee-ico{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#ecfdf5;color:#047857;display:flex;align-items:center;justify-content:center;font-weight:800}
.cs-guarantee-item p{margin:4px 0 0;color:#555;font-size:14px}
.cs-secure{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;background:#f8fafc}
.cs-secure-lock{font-size:22px}.cs-secure-body{flex:1 1 220px}.cs-secure-body p{margin:4px 0 0;color:#555;font-size:14px}
.cs-secure-badges{display:flex;gap:8px;flex-wrap:wrap}.cs-secure-badge{border:1px solid rgba(0,0,0,.12);border-radius:99px;padding:4px 12px;font-size:12px;font-weight:600}
.cs-livechat,.cs-wa{position:relative}.cs-livechat-fab,.cs-wa-btn{position:fixed;bottom:96px;z-index:60;border:var(--cs-lc-btn-border-w,0) solid var(--cs-lc-btn-border-color,transparent);background:var(--cs-lc-btn-bg,#7c3aed);color:var(--cs-lc-btn-text,#fff);padding:12px 16px;border-radius:var(--cs-lc-btn-radius,99px);cursor:pointer;box-shadow:0 10px 30px -10px rgba(124,58,237,.6);text-decoration:none;font-size:var(--cs-lc-btn-font-size,14px)}
.cs-livechat-left .cs-livechat-fab,.cs-wa-left .cs-wa-btn{left:24px}.cs-livechat-right .cs-livechat-fab,.cs-wa-right .cs-wa-btn{right:24px}
.cs-livechat-panel{position:fixed;bottom:160px;right:24px;z-index:70;width:300px;background:#fff;border-radius:16px;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);padding:16px}
.cs-livechat-panel[hidden]{display:none}.cs-livechat-head{font-weight:700;margin-bottom:10px}
.cs-livechat-msg{background:#f1f5f9;border-radius:12px;padding:12px;margin-bottom:10px}
.cs-livechat-agent{font-size:12px;color:#7c3aed;font-weight:600}.cs-livechat-send{display:block;text-align:center;text-decoration:none}
.cs-wa-btn{bottom:24px;background:#25d366}.cs-help-title{margin:0 0 12px}
.cs-help-item{border:1px solid rgba(0,0,0,.08);border-radius:10px;margin-bottom:8px;padding:12px 14px}
.cs-help-item summary{cursor:pointer;font-weight:600;list-style:none}.cs-help-item summary::-webkit-details-marker{display:none}
.cs-help-answer{margin-top:8px;color:#555;line-height:1.7}
.cs-langsw-btns{display:flex;gap:6px;flex-wrap:wrap}.cs-langsw-btn{border:1px solid rgba(0,0,0,.15);border-radius:99px;padding:5px 12px;font-size:13px;text-decoration:none;color:#333}
.cs-langsw-btn.is-active{background:#7c3aed;color:#fff;border-color:#7c3aed}
.cs-langsw-form select{padding:6px 10px;border-radius:8px;border:1px solid rgba(0,0,0,.15)}

/* ══════════════════════════════════════════════════════════════════════════
   全屏轮播 fullscreen_carousel
   —— 此前全项目（blocks.css/store.css/style.css/brand.css 及旧死重三件套）
      对 .fs-* 系列零 CSS 定义，区块渲染为裸 HTML。现补齐完整响应式样式。
   ══════════════════════════════════════════════════════════════════════════ */
.blk.fs-carousel {
  position: relative; width: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #0b1020; color: #fff;
  --fs-accent: var(--primary-color, #2f6fed);
}
.fs-track { position: absolute; inset: 0; }
.fs-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s ease, visibility .7s ease;
}
.fs-slide.is-active { opacity: 1; visibility: visible; }
.fs-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fs-hero-content {
  position: relative; z-index: 2; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(20px, 6vw, 80px); box-sizing: border-box;
}
.fs-hero-inner { max-width: 860px; text-align: center; }
.fs-hero-title {
  margin: 0 0 .35em; font-size: clamp(28px, 5.2vw, 64px); line-height: 1.1; font-weight: 800;
  color: #fff; text-shadow: 0 2px 28px rgba(0,0,0,.45);
}
.fs-hero-sub {
  margin: 0 0 1.4em; font-size: clamp(15px, 1.8vw, 21px); line-height: 1.6;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
.fs-hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 30px; border-radius: 999px; font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, filter .15s ease, background .15s ease, color .15s ease;
}
.fs-hero-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.fs-hero-btn-primary { background: var(--fs-accent); color: #fff; box-shadow: 0 12px 30px -12px var(--fs-accent); }
.fs-hero-btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.85); }
.fs-hero-btn-outline:hover { background: rgba(255,255,255,.14); }
.fs-hero-btn-white { background: #fff; color: #111; }
.fs-hero-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.fs-hero-btn-ghost:hover { background: rgba(255,255,255,.22); }
.fs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.32); color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: .85; transition: background .2s ease, opacity .2s ease;
}
.fs-arrow:hover { background: rgba(0,0,0,.55); opacity: 1; }
.fs-prev { left: 18px; }
.fs-next { right: 18px; }
.fs-dots { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5; display: flex; gap: 9px; }
.fs-dot {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.5); transition: width .2s ease, background .2s ease;
}
.fs-dot.active { width: 26px; border-radius: 6px; background: #fff; }
@media (max-width: 768px) {
  .fs-arrow { width: 38px; height: 38px; font-size: 18px; }
  .fs-prev { left: 10px; } .fs-next { right: 10px; }
  .fs-hero-btn { padding: 11px 24px; font-size: 15px; }
  .fs-dots { bottom: 14px; }
}
@media (max-width: 480px) {
  .fs-arrow { display: none; }
  .fs-hero-inner { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   products_featured 精选产品 / products_by_category 分类产品
   —— 容器 .cs-feat-grid / .cs-cat-prod-grid 及其卡片此前全项目零 CSS，
      cols-N 被静默忽略、卡片堆叠为整宽块。现补齐网格 + 卡片 + 移动降列。
   ══════════════════════════════════════════════════════════════════════════ */
.cs-featured, .cs-cat-products { background: var(--b-bg-color, transparent); }
.cs-feat-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-feat-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-feat-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-feat-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-feat-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cs-feat-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cs-feat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.30); }
.cs-feat-img { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #f3f4f6; overflow: hidden; }
.cs-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-feat-img .cs-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 12px; font-weight: 700; color: #fff; background: #e03131;
  padding: 2px 8px; border-radius: 99px;
}
.cs-feat-card h4 { margin: 0; padding: 14px 16px 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.cs-feat-card h4 a { color: #1a1a1a; text-decoration: none; }
.cs-feat-card h4 a:hover { color: var(--primary-color, #6b46c1); text-decoration: underline; }
.cs-feat-price { padding: 6px 16px 0; font-size: 17px; font-weight: 700; color: #111827; }
.cs-feat-card > .btn { margin: 12px 16px 16px; align-self: flex-start; }

.cs-cat-prod-grid { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-cat-prod-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-cat-prod-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-cat-prod-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-cat-prod-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cs-cat-prod-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.30); }
.cs-cat-prod-img-wrap { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f4f6; }
.cs-cat-prod-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cs-cat-prod-card:hover .cs-cat-prod-img-wrap img { transform: scale(1.04); }
.cs-cat-prod-card h4 { margin: 0; padding: 14px 16px 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.cs-cat-prod-card h4 a { color: #1a1a1a; text-decoration: none; }
.cs-cat-prod-card h4 a:hover { color: var(--primary-color, #6b46c1); text-decoration: underline; }
.cs-cat-prod-desc { margin: 0; padding: 8px 16px 0; font-size: 13px; color: #6b7280; line-height: 1.5; }
.cs-cat-prod-price { display: block; padding: 8px 16px 16px; font-size: 17px; font-weight: 700; color: #111827; }

@media (max-width: 1020px) {
  .cs-feat-grid.cols-4, .cs-feat-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-cat-prod-grid.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cs-feat-grid, .cs-feat-grid.cols-2, .cs-feat-grid.cols-3, .cs-feat-grid.cols-4, .cs-feat-grid.cols-5,
  .cs-cat-prod-grid, .cs-cat-prod-grid.cols-2, .cs-cat-prod-grid.cols-3, .cs-cat-prod-grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }
  .cs-feat-card h4, .cs-cat-prod-card h4 { padding: 12px 12px 0; }
  .cs-feat-price { padding: 6px 12px 0; }
  .cs-feat-card > .btn { margin: 10px 12px 14px; }
  .cs-cat-prod-desc { padding: 8px 12px 0; }
  .cs-cat-prod-price { padding: 8px 12px 14px; }
}