/*
 * product-shared.css — loaded on v3 template only in this build.
 * (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. Some
 * legacy .hs-pd-* rules (hero gallery / tabs / review form) remain at the
 * bottom — they're dead CSS in this build (pd template not shipped) but
 * kept to ease syncing future cosmetic tweaks from the industrial upstream.
 *
 * 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) */
}
.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);
}
.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;
}
.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; }

/* 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; }

/* =========================================================================
   .hs-pd-review-form — dead CSS in this build (Customer Review submission
   route was stripped together with inc/review-system.php). Kept to ease
   cosmetic syncing from upstream; safe to delete in a future cleanup pass.
   ========================================================================= */

.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);
}
.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;
}