/*
 * product-shared.css — shared by v3 + pd + /leave-review/ + /revoke-review/
 * (CSS enqueue logic in inc/theme-settings.php).
 *
 * Contains: layout helpers, 2-col Hero, Overview, generic card primitives
 * (.hs-pcv3-card*), Why Choose, FAQ, Related, Tech Support cards, plus
 * pd-specific additions at bottom (tabs, hero gallery, reviews show-more,
 * review form).
 *
 * v3-only extras live in product-collection-v3.css: Banner Hero variant,
 * Categories wrappers, Contact card, Connected sections.
 *
 * Site-wide primitives (.hs-container / .hs-section / .hs-btn / .hs-grid
 * / .hs-eyebrow / .hs-section-head / .hs-pd-byline) live in site.css.
 */

/* Shared helpers */
.hs-pcv3-container--narrow {
  width: min(100% - 40px, 1100px);
  margin-left: auto;
  margin-right: auto;
}


/* Product wysiwyg richtext typography (.hs-pcv3-richtext) — defined later
   in this file. Visual mirrors .hs-page in site.css via shared CSS
   variables (4.8.34 plan B). */

/* =========================================================================
   1 · Hero (2-col, image right)
   ========================================================================= */

/* Structural 2-col grid + text container for the product hero. Base
   padding / title / desc typography defined later in this file
   (mirrors .hs-pg-hero in site.css via shared CSS variables). */
.hs-pcv3-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hs-pcv3-hero__text {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hs-pcv3-hero__desc p { margin: 0 0 12px; font-size: 17px; }
.hs-pcv3-hero__desc p:last-child { margin-bottom: 0; }

/* (.hs-pcv3-hero__image base styles live in product-collection-v3.css —
   only v3 template uses image-on-right.) */

/* =========================================================================
   3 · Overview  / 4 · Types Intro — section-head centered, body left
   ========================================================================= */

.hs-pcv3-overview__body,
.hs-pcv3-types-intro__body {
  text-align: left;
}

/* =========================================================================
   6 · Why Choose (horizontal image + bullets)
   ========================================================================= */

.hs-pcv3-why__description {
  text-align: left;
  font-size: 16px;
  line-height: 1.8;
  color: var(--hs-text);
  margin: 0 0 30px;
}

/* SHARED by pd + v3 templates. The "pcv3" prefix is historical (v3 was
   the first template to use it); pd template reuses the same visual
   treatment. Also shared: .hs-pcv3-why-card__image--video for YouTube
   iframe scaling, and .hs-pcv3-why-card__body / __title typography.
   ACF FIELD groups are NOT shared — pd reads `why`, v3 reads `pcv3_why`.
   Renaming = high-risk refactor (50+ refs across PHP+CSS; see 4.8.33
   P1 bug for precedent where splitting a similar shared class broke pd
   cards). Keep the prefix, add comments where ambiguity bites. */
.hs-pcv3-why-card {
  background: #fff;
  border: 1px solid var(--hs-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 4.5.11: 左右 1:1 平分 */
  align-items: stretch;             /* 两侧等高（默认 grid 行为，显式标注）*/
  column-gap: 22px;                 /* 4.5.26: 图片 ↔ 文字留白 22→44px (22 gap + 22 body padding) */
}
/* 4.8.73: --stacked modifier = pd 专属"图上文下"变体，跟 v3 集合页 categories
   卡片视觉对齐（image 4/3 顶部、body flex-1 撑满、hover 抬升）。
   v3 集合页仍用不带 --stacked 的原左右结构不变。 */
.hs-pcv3-why-card--stacked {
  height: 100%;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  column-gap: 0;
  transition: transform var(--hs-transition), box-shadow var(--hs-transition);
}
.hs-pcv3-why-card--stacked:hover {
  transform: translateY(-4px);
  box-shadow: var(--hs-shadow-card-hover, 0 16px 36px rgba(0,0,0,.1));
}
.hs-pcv3-why-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;             /* 4.5.10: 锁定 600×400 (3:2) 比例（原左右结构用）*/
  overflow: hidden;
  background-color: var(--hs-accent-soft);
}
/* 4.8.73: --stacked 变体图片改 4/3，对齐 categories 卡片 */
.hs-pcv3-why-card--stacked .hs-pcv3-why-card__image {
  aspect-ratio: 4 / 3;
}
.hs-pcv3-why-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hs-pcv3-why-card__image--video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: #000;
  overflow: hidden;
}
.hs-pcv3-why-card__image--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Why card body — flex column + vertical center so text / bullets / CTA
   stay centered within the image's aspect-ratio: 3/2 height. */
.hs-pcv3-why-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
/* 4.8.73: --stacked 变体 body 改 flex-1 撑满，不再垂直居中（图上文下结构） */
.hs-pcv3-why-card--stacked .hs-pcv3-why-card__body {
  justify-content: flex-start;
  flex: 1;
}
.hs-pcv3-why-card__title {
  margin: 0 0 8px;
  color: var(--hs-title);
  font-size: 17px;
}
.hs-pcv3-why-card__bullets ul {
  margin: 0;
  padding-left: 18px;
  color: var(--hs-text);
  font-size: 14px;
  line-height: 1.7;
}
.hs-pcv3-why-card__cta { margin-top: 16px; align-self: flex-start; }

/* 4.8.84: 4.8.76 的 How It Works 专属 CSS（summary/video/step-no/role/footer）已删除 —— 该段简化重做为类目卡结构（.hs-pcv3-card 全复用），旧规则无引用。 */

/* Inline .hs-pcv3-faq__q label override — the full FAQ accordion
   rules for product templates are defined later in this file. */
.hs-pcv3-faq__item summary .hs-pcv3-faq__q {
  display: inline;
  font-weight: 700;
  color: var(--hs-title);
  font-size: 17px;
  margin: 0;
}

/* =========================================================================
   8 · Related Products
   ========================================================================= */

.hs-pcv3-related__description {
  text-align: left;
  font-size: 16px;
  line-height: 1.7;
  color: var(--hs-text);
  margin: 0 0 30px;
}

/* Related-card specific overrides — base styles defined later in this
   file (the generic product-template card block). */
.hs-pcv3-related__card-title { font-size: 16px; margin: 0 0 6px; }
.hs-pcv3-related__card-cta { font-size: 13px; }

/* =========================================================================
   9 · Technical Support (blog grid)
   ========================================================================= */

.hs-pcv3-support__description {
  text-align: left;
  margin: 0 0 30px;
  color: var(--hs-text);
  font-size: 16px;
  line-height: 1.7;
}

/* Support-card blog-specific extras (meta / excerpt / foot / time).
   Base styles defined later in this file. */
.hs-pcv3-support__card-body { padding: 20px; }
/* 4.5.10: top meta row — category + modified date (E-E-A-T freshness). */
.hs-pcv3-support__card-meta-top {
  font-size: 12px;
  color: var(--hs-text-muted);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.hs-pcv3-support__card-cat {
  color: var(--hs-accent);
}
.hs-pcv3-support__card-sep {
  margin: 0 6px;
  opacity: 0.6;
}
.hs-pcv3-support__card-title {
  margin: 0 0 10px;
  color: var(--hs-title);
  font-size: 17px;
  line-height: 1.4;
}
/* 4.5.10: excerpt — 1-line preview, AI answer-engine citable hook. */
.hs-pcv3-support__card-excerpt {
  margin: 0 0 14px;
  color: var(--hs-text);
  font-size: 14px;
  line-height: 1.6;
  flex: 1;
}
/* 4.5.10: foot row — reading time + Read Article CTA. */
.hs-pcv3-support__card-foot {
  display: flex;
  align-items: center;
  font-size: 13px;
  margin-top: auto;
}
.hs-pcv3-support__card-time {
  color: var(--hs-text-muted);
}
.hs-pcv3-support__card-cta {
  color: var(--hs-accent);
  font-weight: 600;
  font-size: 13px;
}

/* === Responsive ===
   .hs-grid--2/3/4 collapse rules live in site.css (4.8.32 unified to one
   site-wide breakpoint). Only pcv3-specific responsive tweaks here. */

@media (max-width: 768px) {
  .hs-pcv3-hero { padding: 40px 0; }
  .hs-pcv3-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .hs-pcv3-hero__title { font-size: 28px; }
  .hs-pcv3-hero__desc { font-size: 16px; }
  .hs-pcv3-why-card { grid-template-columns: 1fr; }
}

/* === Product Detail — CSS-only radio tabs (Reviews / Videos) === */

.hs-pd-tabs__input { position: absolute; opacity: 0; pointer-events: none; }
.hs-pd-tabs__nav {
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  border-bottom: 1px solid var(--hs-border, #e5e7eb);
  margin-bottom: 24px;
}
.hs-pd-tabs__tab {
  display: inline-block;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 600;
  color: var(--hs-muted, #666);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.hs-pd-tabs__tab:hover { color: var(--hs-title, #111); }
.hs-pd-tabs__panel { display: none; }
#pd-tab-reviews:checked ~ .hs-container .hs-pd-tabs__nav label[for="pd-tab-reviews"],
#pd-tab-videos:checked  ~ .hs-container .hs-pd-tabs__nav label[for="pd-tab-videos"] {
  color: var(--hs-title, #111);
  border-bottom-color: var(--hs-accent, #467c3d);
}
#pd-tab-reviews:checked ~ .hs-pd-tabs__panel--reviews,
#pd-tab-videos:checked  ~ .hs-pd-tabs__panel--videos { display: block; }

/* .hs-pd-byline rules live in site.css (loaded earlier than this file). */

/* H3 inside tab labels behaves as inline tab text */
.hs-pd-tabs__h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  display: inline;
}

/* =========================================================================
   4.7.13 — Hero gallery (CSS-only radio switcher) + CTA gap
   ========================================================================= */

/* Hero CTAs — gap between Primary and Secondary buttons */
.hs-pcv3-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

/* Gallery container — supersedes the simple stacked layout */
.hs-pd-hero-gallery {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  justify-self: end;
}

/* Radio inputs — visually hidden */
.hs-pd-hero-gallery__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Main media area — locked 3:2, only the :checked panel is visible */
.hs-pd-hero-gallery__main {
  width: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  border-radius: var(--hs-radius-card, 10px);
  overflow: hidden;
  background: #f2f4f7;
}
.hs-pd-hero-gallery__panel {
  display: none;
  position: absolute;
  inset: 0;
}
.hs-pd-hero-gallery__panel img,
.hs-pd-hero-gallery__panel iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* :checked → corresponding panel visible. Supports up to 6 media items. */
#hg-0:checked ~ .hs-pd-hero-gallery__main .hs-pd-hero-gallery__panel[data-idx="0"],
#hg-1:checked ~ .hs-pd-hero-gallery__main .hs-pd-hero-gallery__panel[data-idx="1"],
#hg-2:checked ~ .hs-pd-hero-gallery__main .hs-pd-hero-gallery__panel[data-idx="2"],
#hg-3:checked ~ .hs-pd-hero-gallery__main .hs-pd-hero-gallery__panel[data-idx="3"],
#hg-4:checked ~ .hs-pd-hero-gallery__main .hs-pd-hero-gallery__panel[data-idx="4"],
#hg-5:checked ~ .hs-pd-hero-gallery__main .hs-pd-hero-gallery__panel[data-idx="5"] {
  display: block;
}

/* Thumb row — 4 thumbs across, each ≈ 1/4 main width.
   Gap to main image is 12px (half of typical 24px section spacing). */
.hs-pd-hero-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.hs-pd-hero-gallery__thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #f2f4f7;
  transition: border-color .15s;
  display: block;
}
.hs-pd-hero-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hs-pd-hero-gallery__thumb:hover {
  border-color: var(--hs-accent, #467c3d);
}
.hs-pd-hero-gallery__thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
  text-shadow: 0 0 6px rgba(0,0,0,.7);
  pointer-events: none;
}

/* Highlight currently selected thumb */
#hg-0:checked ~ .hs-pd-hero-gallery__thumbs label[for="hg-0"],
#hg-1:checked ~ .hs-pd-hero-gallery__thumbs label[for="hg-1"],
#hg-2:checked ~ .hs-pd-hero-gallery__thumbs label[for="hg-2"],
#hg-3:checked ~ .hs-pd-hero-gallery__thumbs label[for="hg-3"],
#hg-4:checked ~ .hs-pd-hero-gallery__thumbs label[for="hg-4"],
#hg-5:checked ~ .hs-pd-hero-gallery__thumbs label[for="hg-5"] {
  border-color: var(--hs-accent, #467c3d);
}

/* === Customer Reviews progressive disclosure (CSS-only, no JS) ===
   First 6 cards visible; "Show all N" toggle reveals rest via :checked.
   PHP sorts: verified DESC → rating → date → photo. */

.hs-pd-review-card--extra { display: none; }
.hs-pd-show-more__collapse { display: none; }

#pd-show-all-reviews:checked ~ .hs-pd-reviews-grid .hs-pd-review-card--extra { display: flex; }
/* show-more toggle shared with Engineering Notes — see site.css for the
   combined :checked label-swap rule covering both #pd-show-all-reviews
   and #pd-show-all-eng. */

.hs-pd-show-more-wrap { margin-top: 24px; }

/* =========================================================================
   4.8.2 — Customer review submission form (/leave-review/?t=xxx).
   Reuses existing primitives where possible; this is the minimal addition.
   ========================================================================= */

.hs-pd-review-form { max-width: 700px; margin: 24px 0 0; }
.hs-pd-form-fs {
  border: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hs-pd-form-fs legend {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--hs-title);
  padding: 0;
}
.hs-pd-form-fs label { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.hs-pd-form-fs label small { color: var(--hs-muted, #666); }
.hs-pd-form-fs > small { color: var(--hs-muted, #666); font-size: 12px; margin-top: 4px; }
.hs-pd-form-fs input[type=text],
.hs-pd-form-fs input[type=number],
.hs-pd-form-fs textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hs-border, #ddd);
  border-radius: 6px;
  font: inherit;
}
.hs-pd-form-fs textarea { min-height: 140px; resize: vertical; }
.hs-pd-form-rating { display: flex; gap: 18px; }
.hs-pd-form-rating label {
  cursor: pointer;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fbbf24;
}
.hs-pd-form-consent { font-size: 14px; color: var(--hs-text); }
.hs-pd-form-error {
  background: #fee;
  border: 1px solid #fcc;
  color: #c00;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 16px 0;
}


/* 4.8.34: .hs-pcv3-card rules live in this file (plan B re-split).
   Visual mirrors .hs-card in site.css via shared CSS variables —
   keeps non-product pages free of these bytes. */

/* ============================================================
   4.8.34 — Architecture plan B: product-template-only rules.
   Visual language identical to site.css's .hs-card / .hs-pg-faq /
   .hs-page / .hs-pg-hero via shared CSS variables — keeps non-product
   pages (homepage / blog / Raw HTML) free of these rules' bytes.
   ============================================================ */

/* --- Generic product card (.hs-pcv3-card) ---
   pd Variants / Industries / Cases + v3 Categories. Mirror of .hs-card
   in site.css with same design tokens. */
.hs-pcv3-card {
  height: 100%;
  background: var(--hs-surface, #fff);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-card, 14px);
  overflow: hidden;
  box-shadow: var(--hs-shadow-card, 0 2px 12px rgba(0,0,0,.04));
  display: flex;
  flex-direction: column;
  transition: transform var(--hs-transition), box-shadow var(--hs-transition);
}
.hs-pcv3-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hs-shadow-card-hover, 0 16px 36px rgba(0,0,0,.1));
}
.hs-pcv3-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hs-accent-soft);
  font-size: 0;
}
.hs-pcv3-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hs-pcv3-card__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hs-pcv3-card__title {
  margin: 0 0 10px;
  color: var(--hs-title);
  font-size: 18px;
  text-align: center;
}
.hs-pcv3-card__desc {
  margin: 0 0 14px;
  color: var(--hs-text);
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}
.hs-pcv3-card__desc p { margin: 0 0 8px; font-size: 14px; }
.hs-pcv3-card__desc p:last-child { margin-bottom: 0; }
.hs-pcv3-card__cta,
.hs-pcv3-card__link {
  margin-top: auto;
  align-self: center;
  color: var(--hs-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--hs-transition);
}
/* 4.8.86: section 级 E-E-A-T 引用行 —— 一排卡片下方的信任信号胶囊条
   （认证 / 实测数据 / 部署数量 / 工程师背书）。categories 段 + why 段共用；
   有值才渲染。视觉：浅品牌色底圆角条 + accent 实底圆徽章 ✓ + 左对齐文字
   （用户截图定稿样式）。 */
.hs-pcv3-section-eeat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
  padding: 16px 22px;
  background: var(--hs-accent-soft);
  border-radius: 12px;
  text-align: left;
  color: var(--hs-text);
  font-size: 15px;
  line-height: 1.6;
}
.hs-pcv3-section-eeat::before {
  content: "✓";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--hs-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

/* --- 4.8.87: How It Works 蛇形流程图 (.hs-pcv3-hiw-flow) ------------------
   CSS-only：自动编号徽章（counter）+ 行内箭头 + 第二行反向（3↓4 同列衔接，
   流程不断点）+ 首尾卡 accent 描边。零 JS / 零图片 / 零新请求。
   grid gap = 24px（site.css .hs-grid），箭头偏移按 gap 居中。 */
.hs-pcv3-hiw-flow {
  counter-reset: hiw-step;
}
/* 4.8.88: 汇总文案与卡片 grid 的呼吸感（用户截图反馈：贴太近） */
.hs-pcv3-richtext + .hs-pcv3-hiw-flow {
  margin-top: 36px;
}
.hs-pcv3-hiw-flow .hs-pcv3-card {
  position: relative;
  overflow: visible;               /* 箭头/徽章伸出卡片，不能被剪 */
  counter-increment: hiw-step;
}
/* overflow visible 后卡片圆角由图容器自己补（顶部两角） */
.hs-pcv3-hiw-flow .hs-pcv3-card__image {
  border-radius: 14px 14px 0 0;
}
/* 编号徽章 —— 图左上角，EEAT 胶囊同款视觉语言 */
.hs-pcv3-hiw-flow .hs-pcv3-card::before {
  content: counter(hiw-step);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--hs-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
/* 首尾卡 accent 描边 —— 起点终点锚在买家世界 */
.hs-pcv3-hiw-flow .hs-pcv3-card:first-child,
.hs-pcv3-hiw-flow .hs-pcv3-card:last-child {
  border-color: var(--hs-accent-border);
  box-shadow: 0 0 0 1px var(--hs-accent-border), 0 2px 12px rgba(0,0,0,.04);
}
/* 人力角色行 —— 卡片 body 底部小字 */
.hs-pcv3-hiw-flow__role {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--hs-border);
  color: var(--hs-text-muted, #697469);
  font-size: 13px;
  line-height: 1.5;
}
.hs-pcv3-hiw-flow__role::before {
  content: "👤 ";
}
/* ---- 蛇形布局 + 箭头：仅桌面 3 列（>992px；更窄时 hs-grid--3 自动降列，
   蛇形和箭头一起退场，回自然顺序堆叠） ---- */
@media (min-width: 993px) {
  /* 第二行反向：4 在右（原 6 位）、5 中、6 左 —— 3 的正下方是 4，流程不断点 */
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(4) { grid-column: 3; grid-row: 2; }
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(5) { grid-column: 2; grid-row: 2; }
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(6) { grid-column: 1; grid-row: 2; }
  /* 第三行恢复正向（7 左 8 中 9 右），6↓7 同列衔接 */
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(7) { grid-column: 1; grid-row: 3; }
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(8) { grid-column: 2; grid-row: 3; }
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(9) { grid-column: 3; grid-row: 3; }

  /* 箭头公共样式。
     4.8.88: 偏移修正 —— 之前 translate(50%) 把箭头一半推到邻卡上方，
     hover 邻卡时被重绘盖住（用户截图实证）。现在箭头盒宽=24px gap，
     完全落在缝隙内不与任何卡重叠；z-index 高于卡片 hover 态兜底。 */
  .hs-pcv3-hiw-flow .hs-pcv3-card:not(:last-child)::after {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hs-accent);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }
  /* 第 1 行（1,2）和第 3 行（7,8）：右箭头，宽=gap 恰好填缝 */
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(1):not(:last-child)::after,
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(2):not(:last-child)::after,
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(7):not(:last-child)::after,
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(8):not(:last-child)::after {
    content: "→";
    top: 50%;
    right: -24px;
    width: 24px;
    transform: translateY(-50%);
  }
  /* 行尾换行处（3,6）：下箭头，指向正下方同列的下一步 */
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(3):not(:last-child)::after,
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(6):not(:last-child)::after {
    content: "↓";
    left: 50%;
    bottom: -24px;
    height: 24px;
    transform: translateX(-50%);
  }
  /* 第 2 行反向（4,5）：左箭头 */
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(4):not(:last-child)::after,
  .hs-pcv3-hiw-flow .hs-pcv3-card:nth-child(5):not(:last-child)::after {
    content: "←";
    top: 50%;
    left: -24px;
    width: 24px;
    transform: translateY(-50%);
  }
}
.hs-pcv3-card__link::after {
  content: " →";
  display: inline-block;
  transition: transform var(--hs-transition);
}
.hs-pcv3-card__link:hover { color: var(--hs-accent-dark); }
.hs-pcv3-card__link:hover::after { transform: translateX(4px); }

/* --- Related Products card (.hs-pcv3-related__card) — <a> wrapper --- */
.hs-pcv3-related__card {
  height: 100%;
  background: var(--hs-surface, #fff);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-card, 14px);
  overflow: hidden;
  box-shadow: var(--hs-shadow-card, 0 2px 12px rgba(0,0,0,.04));
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--hs-transition), box-shadow var(--hs-transition);
}
.hs-pcv3-related__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hs-shadow-card-hover, 0 16px 36px rgba(0,0,0,.1));
}
.hs-pcv3-related__card-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hs-accent-soft);
}
.hs-pcv3-related__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hs-pcv3-related__card-body { padding: 18px; }

/* --- Technical Support blog card (.hs-pcv3-support__card) — <a> wrapper --- */
.hs-pcv3-support__card {
  height: 100%;
  background: var(--hs-surface, #fff);
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius-card, 14px);
  overflow: hidden;
  box-shadow: var(--hs-shadow-card, 0 2px 12px rgba(0,0,0,.04));
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform var(--hs-transition), box-shadow var(--hs-transition);
}
.hs-pcv3-support__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hs-shadow-card-hover, 0 16px 36px rgba(0,0,0,.1));
}
.hs-pcv3-support__card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hs-accent-soft);
}
.hs-pcv3-support__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- FAQ accordion (.hs-pcv3-faq__item) — same look as .hs-pg-faq --- */
.hs-pcv3-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hs-pcv3-faq__item {
  background: #ffffff;
  border: 1px solid var(--hs-border);
  border-radius: 12px;
  padding: 18px 22px;
  transition: border-color var(--hs-transition);
}
.hs-pcv3-faq__item[open] { border-color: var(--hs-accent-border); }
.hs-pcv3-faq__item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 32px;
}
.hs-pcv3-faq__item summary::-webkit-details-marker { display: none; }
.hs-pcv3-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 22px;
  color: var(--hs-accent);
  line-height: 1;
  font-weight: 400;
}
.hs-pcv3-faq__item[open] summary::after { content: "\2212"; }
.hs-pcv3-faq__answer {
  margin-top: 12px;
  color: var(--hs-text);
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}
.hs-pcv3-faq__answer:last-child { margin-bottom: 0; }

/* --- Richtext (.hs-pcv3-richtext) — product wysiwyg field typography --- */
.hs-pcv3-richtext {
  color: var(--hs-text);
  font-size: 16px;
  line-height: 1.8;
}
.hs-pcv3-richtext p { margin: 0 0 14px; }
.hs-pcv3-richtext p:last-child { margin-bottom: 0; }
.hs-pcv3-richtext ul,
.hs-pcv3-richtext ol { margin: 0 0 14px; padding-left: 20px; line-height: 1.9; font-size: 15px; }
.hs-pcv3-richtext li { margin-bottom: 4px; }
.hs-pcv3-richtext strong { color: var(--hs-title); }
.hs-pcv3-richtext a {
  color: var(--hs-accent);
  transition: color var(--hs-transition);
}
.hs-pcv3-richtext a:hover { color: var(--hs-accent-dark); }
.hs-pcv3-richtext img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block; }

/* --- Hero base (.hs-pcv3-hero) — product 2-col layout. Structural
   __inner (grid 2-col) + __text (flex column) live earlier in this file. */
.hs-pcv3-hero {
  padding: 60px 0;
  background: #fff;
}
.hs-pcv3-hero__title {
  font-size: 38px;
  line-height: 1.25;
  color: var(--hs-title);
  margin: 0 0 16px;
}
.hs-pcv3-hero__desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--hs-text);
  margin: 0 0 22px;
  width: 100%;
}

/* 4.8.45: YouTube facade. Click-to-play placeholder used in:
   - Hero gallery video panel (pd)
   - Why Us card video (pd + v3, both use .hs-pcv3-why-card__image--video)
   - Reviews + Videos tab card (pd)
   See JS handler in site.js + PHP helper hs_yt_facade() in template-helpers.php.
   Stops 1.5 MB YouTube SDK from loading on initial page render. */
.hs-yt-facade {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.hs-yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hs-yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.hs-yt-facade:hover .hs-yt-facade__play,
.hs-yt-facade:focus-within .hs-yt-facade__play {
  opacity: 1;
}
.hs-yt-facade__play:focus-visible {
  outline: 2px solid var(--hs-accent, #f00);
  outline-offset: 4px;
  border-radius: 6px;
}

/* 4.8.45: noscript fallback inside facade — only renders when JS disabled.
   When JS is on, browsers never insert <noscript> content into the DOM, so
   this rule has zero impact on normal users. When JS is off, the link sits
   centered over the poster image (button is still visible but inert). */
.hs-yt-facade__noscript {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.hs-yt-facade__noscript:hover {
  background: #f00;
}