/**
 * MetropolitanHost — PDP Additions (Tier 1 redesign)
 *
 * [2026-05-01] Added — additive styles for the 5 new PDP sections:
 *   .wcsp-top-ribbon       — trust strip above hero
 *   .wcsp-sticky-cta       — fixed scroll-CTA bar
 *   .wcsp-changelog        — public version history
 *   .wcsp-author-block     — Brooklyn studio identity card
 *   .wcsp-email-capture    — bounce-recovery form
 *
 * All selectors are namespaced with .wcsp- prefix to avoid collisions.
 * Designed against the existing dark-theme palette in style.css /
 * shop.css. To disable any section, comment out the matching include
 * in woocommerce/content-single-product.php — no CSS cleanup needed.
 */

/* ──────────── Top Ribbon ──────────── */
.wcsp-top-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  /* [2026-05-01m] Was margin:16px 0 18px — too much vertical air around
   * the ribbon. Tightened to 4px above / 6px below so the ribbon sits
   * snugly under breadcrumbs and right above the hero. */
  margin: 4px 0 6px;
  background: var(--mhc-surface, #161b22);
  border: 1px solid var(--mhc-border, #30363d);
  border-radius: 12px;
}
.wcsp-ribbon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
}
.wcsp-ribbon-badge--updated { background: rgba(57, 217, 138, 0.15); color: #39d98a; }
.wcsp-ribbon-badge--support { background: rgba(88, 166, 255, 0.10); color: #58a6ff; }
.wcsp-ribbon-badge__icon { display: inline-flex; }
.wcsp-ribbon-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mhc-text-dim, #8b949e);
}
/* [2026-05-01-card1] Was font-size:14px — bumped to 17px so the ribbon
 * stars read more clearly above the fold. Slight letter-spacing increase
 * keeps individual stars distinguishable at the larger size. The hollow
 * "☆" character used for empty stars inherits the same gold color as
 * filled stars so 0-reviews products read as "5-star placeholder" not
 * "5-star empty". */
.wcsp-ribbon-stars { color: #d29922; letter-spacing: 2px; font-size: 17px; line-height: 1; }
.wcsp-ribbon-rating__count { font-variant-numeric: tabular-nums; }
.wcsp-ribbon-rating__val { color: var(--mhc-text, #e6edf3); font-weight: 700; }
.wcsp-ribbon-sales { font-size: 13px; color: var(--mhc-text-dim, #8b949e); }
.wcsp-ribbon-sales strong { color: var(--mhc-text, #e6edf3); font-weight: 700; }
.wcsp-ribbon-spacer { flex: 1; }
.wcsp-ribbon-sku {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--mhc-text-faint, #6e7681);
  letter-spacing: 0.3px;
}

/* ──────────── Sticky CTA Bar ──────────── */
/* [2026-05-01b] Re-styled to match existing PDP button design system:
 * - Demo button reuses .wcsp-btn--preview pattern (transparent + green
 *   border, hovers to filled)
 * - Add to cart reuses .single_add_to_cart_button green-fill pattern
 * - Bar uses page-level dark surface for visual continuity with header */
.wcsp-sticky-cta {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: rgba(13, 17, 23, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mhc-border, #30363d);
  transform: translateY(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.wcsp-sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.wcsp-sticky-cta__inner {
  /* [2026-05-01t] Was max-width:1320px; padding:12px 24px — sticky bar
   * content sat 40px narrower per side than the page body (the .c
   * container caps at 1400px). Bumped max-width to 1400 to match page
   * body, and dropped horizontal padding so the title's left edge and
   * the Add-to-Cart's right edge align flush with body-content edges
   * (no inset gap). Vertical padding kept for the bar's own height. */
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}
.wcsp-sticky-cta__title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--mhc-text, #e6edf3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Poppins, sans-serif;
}
.wcsp-sticky-cta__price {
  font-weight: 800;
  color: #39d98a;
  font-size: 16px;
  white-space: nowrap;
  font-family: Poppins, sans-serif;
}
.wcsp-sticky-cta__price del {
  color: var(--mhc-text-faint, #6e7681);
  font-weight: 500;
  font-size: 12px;
  margin-right: 6px;
}
.wcsp-sticky-cta__price ins { text-decoration: none; }

/* Sticky-context button size override only — the LOOK (color, border,
 * radius, font, hover) is inherited from the page's existing
 * .wcsp-btn--preview (shop.css line 318) and .single_add_to_cart_button
 * (shop.css line 102) so the sticky bar buttons are visually identical
 * to their full-size counterparts on the PDP, just slightly tighter
 * for the bar context. Override padding + font-size with same selector
 * specificity (same number of !important uses as the source rules). */
.wcsp-sticky-cta .wcsp-sticky-cta__demo {
  padding: 9px 18px;
  font-size: 13px;
  flex-shrink: 0;
  white-space: nowrap;
}
.wcsp-sticky-cta .wcsp-sticky-cta__buy {
  padding: 9px 20px !important;
  font-size: 13px !important;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.wcsp-sticky-cta .wcsp-sticky-cta__buy:hover { transform: translateY(-1px); }

@media (max-width: 720px) {
  .wcsp-sticky-cta { top: auto; bottom: 0; transform: translateY(100%); border-bottom: 0; border-top: 1px solid var(--mhc-border, #30363d); }
  .wcsp-sticky-cta.is-visible { transform: translateY(0); }
  .wcsp-sticky-cta__title { display: none; }
  .wcsp-sticky-cta__inner { padding: 10px 14px; gap: 10px; }
  .wcsp-sticky-cta__demo,
  .wcsp-sticky-cta__buy { flex: 1; justify-content: center; }
}

/* ──────────── Changelog ──────────── */
.wcsp-changelog {
  background: var(--mhc-surface, #161b22);
  border: 1px solid var(--mhc-border, #30363d);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 22px 0;
}
.wcsp-changelog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.wcsp-changelog__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--mhc-text, #e6edf3);
  margin: 0;
}
.wcsp-changelog__freshness {
  font-size: 12px;
  font-weight: 700;
  color: #39d98a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wcsp-changelog__release {
  padding: 14px 0;
  border-bottom: 1px solid var(--mhc-border, #30363d);
}
.wcsp-changelog__release:last-child { border-bottom: 0; padding-bottom: 0; }
.wcsp-changelog__ver {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.wcsp-changelog__ver-num {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  color: #39d98a;
}
.wcsp-changelog__ver-date {
  font-size: 11.5px;
  color: var(--mhc-text-faint, #6e7681);
  font-weight: 500;
}
.wcsp-changelog__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wcsp-changelog__list li {
  font-size: 13px;
  color: var(--mhc-text-dim, #8b949e);
  padding: 4px 0;
  display: flex;
  gap: 8px;
}
.wcsp-changelog__list li::before {
  content: "✓";
  color: #39d98a;
  font-weight: 800;
  flex-shrink: 0;
}

/* [2026-05-01b] Author / Studio Block CSS removed.
 * Block was deleted per user feedback (single-seller, no author identity needed).
 * Original CSS preserved below for one revertible cycle, commented out.
 *
 * .wcsp-author-block { display: flex; gap: 16px; ... }
 * (Full original CSS available in git history if needed.)
 */

/* ──────────── [2026-05-01d] Hero Live Demo Overlay ──────────── */
/* Floating Live Demo button on the top-right of the hero thumbnail.
 * Reuses .wcsp-btn--preview look (transparent + green border) but
 * positioned absolute over the image with a backdrop for legibility
 * against any thumbnail background color. */
.wcsp-thumb { position: relative; }
.wcsp-thumb__demo {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  padding: 8px 14px !important;
  font-size: 13px !important;
  background: rgba(13, 17, 23, 0.85) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.wcsp-thumb__demo:hover {
  background: #39d98a !important;
  color: #0d1117 !important;
  border-color: #39d98a !important;
}

/* ──────────── [2026-05-01f] Section spacing — more spacious ────────────
 * Earlier pass tightened to 24px; user wants the mockup's airier feel
 * back. Bump to 32-36px between sections + 28-32px inside cards. */
.wcsp-single .wcsp-description    { margin-bottom: 32px; padding: 32px; }
.wcsp-single .wcsp-tags-wrap      { margin-bottom: 32px; }
.wcsp-single .wcsp-related        { margin-bottom: 36px; }
.wcsp-single .wcsp-changelog      { margin-bottom: 32px; padding: 28px 32px; }
/* [2026-05-01r] Was: margin:36px 0; padding:32px 36px — felt heavy for a
 * one-row banner; tightened so the card hugs its content without losing
 * the airy feel between this and adjacent sections. */
.wcsp-single .wcsp-email-capture  { margin: 32px 0; padding: 22px 28px; }
.wcsp-single .wcsp-author-block   { margin-bottom: 28px; }
/* [2026-05-01l] Hero-row gap + columns now owned by shop.css (mockup parity).
 * Old override: gap:24px !important + 1050px:20px — superseded.
 * Kept margin-bottom here since that's section-spacing not column layout. */
.wcsp-single .wcsp-hero-row       { margin-bottom: 32px; }
.wcsp-single .wcsp-specs-strip    { margin-bottom: 32px; }
.wcsp-single .wcsp-reviews-wrap   { margin-top: 36px; padding: 32px; }
.wcsp-single .wcsp-buybox,
.wcsp-single .wcsp-info { padding: 4px 0; }

/* ──────────── [2026-05-01g] BUY-BOX CARD (mockup .buybox parity) ────────────
 * Wraps the right-column hero info in a card so it matches the mockup's
 * .buybox container. Without this, .wcsp-info just stacks bare elements
 * on the dark page bg. The mockup gives it surface bg + border + radius
 * + 22px padding, and removes the sticky-position behavior the existing
 * shop.css applied (mockup keeps the buy box static). */
.wcsp-single .wcsp-info {
  background: var(--mhc-surface, #161b22) !important;
  border: 1px solid var(--mhc-border, #30363d) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  position: static !important;
}

/* Title — match mockup spec.
 * [2026-05-01m] Was 22px/800 — too heavy vs _mockup.html. Mockup is
 * lighter at 21px/700 with -.2px tracking and 1.3 leading. */
.wcsp-single .wcsp-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
  margin: 8px 0 12px !important;
  color: var(--mhc-text, #e6edf3) !important;
}

/* Niche badge gets distinct green color so HTML5 (orange) + niche
 * (green) read as a colored pair like the mockup. */
.wcsp-single .wcsp-badge--niche {
  background: rgba(57, 217, 138, 0.18) !important;
  color: #39d98a !important;
}

/* [2026-05-01h] Live Demo overlay color — keeping the existing green
 * outlined look (same as page VIEW DEMO button) per user direction.
 * Mockup shows blue but user wants brand-consistent green retained.
 * Original blue override removed. */

/* Override "Also available in:" uppercase via shop.css inheritance —
 * use a more specific selector to win the cascade. */
.wcsp-single .wcsp-thumb .wcsp-variants .wcsp-variants__label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mhc-text-dim, #8b949e) !important;
}

.wcsp-thumb .wcsp-variants {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding: 18px 22px !important;
  background: var(--mhc-surface, #161b22) !important;
  border: 1px solid var(--mhc-border, #30363d) !important;
  border-radius: 12px !important;
}
.wcsp-thumb .wcsp-variants__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mhc-text-dim, #8b949e);
  font-weight: 600;
  margin-right: 6px;
}
/* [2026-05-01i] Per-format color on each pill — content-single-product.php
 * already passes the format's brand color via inline `style="--fmt-color:..."`
 * (HTML5 #f16529, React #61dafb, Angular #dd0031, Vue #41b883, PHP #8993be,
 * WordPress #21759b). Use that var so each format reads as its own brand
 * instead of a uniform gray pill. */
.wcsp-thumb .wcsp-variant-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--fmt-color, #39d98a) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--fmt-color, #39d98a) 45%, transparent) !important;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fmt-color, #39d98a) !important;
  transition: transform 0.1s, border-color 0.1s, color 0.1s, background 0.15s;
}
.wcsp-thumb .wcsp-variant-pill i {
  color: var(--fmt-color, #39d98a);
}
.wcsp-thumb .wcsp-variant-pill:hover {
  transform: translateY(-1px);
  background: var(--fmt-color, #39d98a) !important;
  color: #0d1117 !important;
  border-color: var(--fmt-color, #39d98a) !important;
}
.wcsp-thumb .wcsp-variant-pill:hover i {
  color: #0d1117;
}

/* ──────────── [2026-05-01f] Tags section as card ────────────
 * Mockup shows a card with "Tags" heading on top + denser pill row below.
 * Override the existing inline-flex shop.css layout. */
.wcsp-single .wcsp-tags-wrap {
  display: block !important;
  background: var(--mhc-surface, #161b22) !important;
  border: 1px solid var(--mhc-border, #30363d) !important;
  border-radius: 12px !important;
  padding: 22px 26px !important;
}
.wcsp-single .wcsp-tags-label {
  display: block !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--mhc-text-dim, #8b949e) !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
}
.wcsp-single .wcsp-tags-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.wcsp-single .wcsp-tag-pill {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  background: var(--mhc-surface-2, #1f2630) !important;
  border: 1px solid var(--mhc-border, #30363d) !important;
  color: var(--mhc-text-dim, #8b949e) !important;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, transform 0.1s !important;
}
.wcsp-single .wcsp-tag-pill:hover {
  color: #39d98a !important;
  border-color: #39d98a !important;
  transform: translateY(-1px);
}

/* ──────────── [2026-05-01f] Addons info-icon + tooltip ────────────
 * Small ⓘ next to the addon label; on hover/focus shows a tooltip
 * with the product's short_description. Pure CSS, no JS.
 * [2026-05-01q] Promoted icon + tooltip selectors to a shared comma
 * list with `.wcsl-license__info-icon` / `.wcsl-license__tip` so the
 * license tabs reuse the exact same visual without duplicating CSS.
 * Default color brightened (faint → dim) and hover gains a subtle
 * green-tint background ring for clearer affordance. */
.wcsp-addons__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.wcsp-addons__info,
.wcsl-license__info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* [2026-05-01q] Was: color: var(--mhc-text-faint, #6e7681);
   * Bumped to text-dim for higher contrast against the dark card. */
  color: var(--mhc-text-dim, #8b949e);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: help;
  outline: none;
  transition: color 0.12s, background-color 0.12s, transform 0.12s;
}
.wcsp-addons__info:hover,
.wcsp-addons__info:focus,
.wcsl-license__info-icon:hover,
.wcsl-license__info-icon:focus {
  color: #39d98a;
  background-color: rgba(57, 217, 138, 0.12);
  transform: scale(1.06);
}
.wcsp-addons__info svg,
.wcsl-license__info-icon svg { display: block; }
.wcsp-addons__tip,
.wcsl-license__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0d1117;
  color: #e6edf3;
  border: 1px solid #39d98a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  width: 240px;
  max-width: 80vw;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 50;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.wcsp-addons__tip::after,
.wcsl-license__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #39d98a;
}
.wcsp-addons__info:hover .wcsp-addons__tip,
.wcsp-addons__info:focus .wcsp-addons__tip,
.wcsl-license__info-icon:hover .wcsl-license__tip,
.wcsl-license__info-icon:focus .wcsl-license__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ──────────── [2026-05-01f] Total — strikethrough + sale ────────────
 * Display "Was $X" strikethrough next to the current sale total when a
 * discount is active. Reuses the existing .wcsp-total layout. */
.wcsp-total__amounts {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.wcsp-total__was {
  color: var(--mhc-text-faint, #6e7681);
  font-size: 14px;
  font-weight: 500;
  text-decoration: line-through;
  font-family: Poppins, sans-serif;
}
.wcsp-total__was[hidden] { display: none; }

/* ──────────── [2026-05-01e] License selector restyle ────────────
 * Refreshed visual to match mockup: selected card has green-tinted
 * background + green left accent; clearer radio dot; tighter rows.
 * Targets `.wcsl-*` classes from wcs_license_selector() in wc-shop.php. */
.wcsl-license { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.wcsl-license__heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mhc-text-dim, #8b949e);
  font-weight: 700;
  margin: 0 0 4px;
}
.wcsl-license__option {
  display: flex !important;
  /* [2026-05-01q] Was align-items:flex-start — radio + title pinned to
   * the card top while the description dropped below, leaving the price
   * column visually unbalanced (whitespace under price, sub-line below
   * title). Center alignment puts radio + price at the visual midpoint
   * of the title+sub block, and the price now reads as paired with the
   * whole row, not just the title baseline. */
  align-items: center !important;
  /* [2026-05-01o] Was gap:12px — visible space between radio dot and
   * the "Personal · 1 site" / "Extended · unlimited" titles felt
   * loose vs the mockup. Tightened to 8px. */
  gap: 8px !important;
  /* [2026-05-01q] Was padding:14px 16px — shop.min.css had 10px 14px
   * winning via specificity. Now matches what was actually rendering;
   * keep the value here to avoid future cascade surprise. */
  padding: 12px 14px !important;
  border: 1.5px solid var(--mhc-border, #30363d) !important;
  border-radius: 10px !important;
  background: var(--mhc-surface-2, #1f2630) !important;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.wcsl-license__option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--mhc-text-dim, #8b949e);
  border-radius: 50%;
  cursor: pointer;
  /* [2026-05-01q] Was margin-top:2px — needed when the option used
   * align-items:flex-start to nudge the radio onto the title baseline.
   * With align-items:center the radio centers naturally; the 2px nudge
   * now mis-centers it. Zeroed. */
  margin-top: 0;
  position: relative;
  background: transparent;
}
.wcsl-license__option input[type="radio"]:checked {
  border-color: #39d98a;
}
.wcsl-license__option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #39d98a;
  transform: translate(-50%, -50%);
}
.wcsl-license__option--active {
  border-color: #39d98a !important;
  background: rgba(57, 217, 138, 0.06) !important;
  box-shadow: 0 0 0 1px #39d98a inset;
}
.wcsl-license__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* [2026-05-01q] Was gap:3px — title felt cramped against the sub-line.
   * 4px gives a hair more breathing room without making the card taller. */
  gap: 4px;
  min-width: 0;
}
.wcsl-license__info strong {
  color: var(--mhc-text, #e6edf3);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.wcsl-license__info span {
  color: var(--mhc-text-dim, #8b949e);
  font-size: 12px;
  line-height: 1.5;
}
/* [2026-05-01q] Inline row that holds the title strong + the info-icon
 * tooltip trigger — keeps the icon baseline-aligned with the text and
 * lets the sub-line span the full info-block width below. */
.wcsl-license__title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* [2026-05-01n] Was inline-flex with gap:8px — variable-width strike
 * prices (e.g. "$49.00" Regular vs no-strike Extended "$100.00")
 * shifted the now-price column left/right per row, producing a
 * "zigzag" look. Switched to inline-grid with fixed-width columns
 * so old-strike and now-price each have a reserved vertical track,
 * aligning across all license options regardless of strike presence.
 * .wcsp-info ancestor + !important needed to beat shop.min.css
 * line ~523 (.wcsp-info .wcsl-license__price{display:inline-flex !important}). */
/*
.wcsl-license__price {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
*/
.wcsp-info .wcsl-license__price {
  display: inline-grid !important;
  grid-template-columns: 56px 76px;
  column-gap: 8px;
  align-items: baseline;
  justify-items: end;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wcsp-info .wcsl-license__price > * { grid-column: 2; }
.wcsp-info .wcsl-license__price > del,
.wcsp-info .wcsl-license__price > .wcsl-license__price-old { grid-column: 1; }
.wcsl-license__price-old,
.wcsl-license__price del {
  color: var(--mhc-text-faint, #6e7681) !important;
  font-size: 12px;
  font-weight: 500;
  text-decoration: line-through;
}
.wcsl-license__price-now,
.wcsl-license__price ins {
  color: var(--mhc-text, #e6edf3);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  font-family: Poppins, sans-serif;
}
.wcsl-license__option--active .wcsl-license__price-now,
.wcsl-license__option--active .wcsl-license__price ins {
  color: #39d98a;
}

/* ──────────── [2026-05-01e] In-buy-box services upsell ────────────
 * Compact checkbox-row list inside the buy box. Green-tinted bg
 * matching mockup. First row pre-checked (server-side via wcs_pdp_addons_render).
 * Selected rows get .is-checked class via inline JS toggle. */
.wcsp-addons {
  /* [2026-05-01k] Was margin:16px 0 14px — created ~30px gap above/below
   * on top of the form.cart's own 12px gap. Zero them so the only
   * inter-card spacing is the form gap (single source of truth). */
  margin: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(57, 217, 138, 0.06), rgba(57, 217, 138, 0.02));
  border: 1px solid rgba(57, 217, 138, 0.25);
  border-radius: 10px;
  /* [2026-05-01o] form.cart is display:flex flex-direction:row flex-wrap:wrap.
   * .wcsp-addons inherited the default flex:0 1 auto, so it shrank to its
   * intrinsic content width (~383px) instead of filling the row like the
   * license card and total row (both flex:0 0 100% = 494px). Force the same
   * full-width line so addons box matches license/total card widths. */
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}
.wcsp-addons__head { margin-bottom: 8px; }
.wcsp-addons__title {
  font-size: 12px;
  font-weight: 800;
  color: #39d98a;
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wcsp-addons__icon { font-size: 14px; }
.wcsp-addons__sub {
  font-size: 11px;
  color: var(--mhc-text-dim, #8b949e);
  margin: 0 0 6px;
}
.wcsp-addons__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(57, 217, 138, 0.15);
  cursor: pointer;
  font-size: 13px;
}
.wcsp-addons__row:last-child { border-bottom: 0; }
.wcsp-addons__row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.wcsp-addons__check {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid var(--mhc-text-faint, #6e7681);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
  position: relative;
}
.wcsp-addons__row.is-checked .wcsp-addons__check {
  border-color: #39d98a;
  background: #39d98a;
}
.wcsp-addons__row.is-checked .wcsp-addons__check::after {
  content: "✓";
  color: #062b18;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
}
.wcsp-addons__label {
  flex: 1;
  color: var(--mhc-text, #e6edf3);
  font-size: 13px;
}
/* [2026-05-01n] Was inline (block) with del+ins as inline siblings
 * separated by margin-right:4px on del. Strike widths varied by row
 * ($79 vs $149) shifting del's left edge across rows — visible zigzag.
 * Switched to inline-grid with fixed col widths so del + ins each
 * reserve identical vertical tracks across all add-on rows. */
.wcsp-addons__price {
  display: inline-grid;
  grid-template-columns: 50px 56px;
  column-gap: 6px;
  align-items: baseline;
  justify-items: end;
  color: #39d98a;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wcsp-addons__price > * { grid-column: 2; }
.wcsp-addons__price > del { grid-column: 1; }
.wcsp-addons__price del {
  color: var(--mhc-text-faint, #6e7681) !important;
  font-weight: 400;
  font-size: 11px;
  /* [2026-05-01n] Was margin-right:4px — replaced by grid column-gap. */
  text-decoration: line-through;
}
.wcsp-addons__price ins { text-decoration: none; }

/* ──────────── [2026-05-01k] Buy-box vertical density ────────────
 * Form.cart is display:flex flex-direction:row flex-wrap:wrap with
 * gap:12px between flex children. That's our single source of truth
 * for inter-card spacing. Trim it to 10px to match mockup density,
 * and zero out leftover margin-top/bottom on the license selector
 * + qty row so nothing compounds. */
.wcsp-single form.cart {
  gap: 10px !important;
}
.wcsp-single form.cart > .wcsl-license,
.wcsp-single form.cart > .wcs-qty {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ──────────── [2026-05-01e] Your Total row ────────────
 * Dynamic sum of license price + checked addons. Sits between the
 * upsell box and the Add-to-Cart button. Updated via JS in
 * wcs_pdp_addons_render() — formatting sourced from WC currency
 * settings (no hardcoded $). */
.wcsp-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* [2026-05-01j] Full-width inside buy-box card.
   * Buy-box (.wcsp-info) has padding:22px. Negative horizontal margins
   * pull the row out to the card's inner edges, then matching paddings
   * keep the label/amounts aligned with the rest of the card content.
   * Result: dashed separator + total row span the full card width.
   *
   * [2026-05-01k] FIX: parent <form.cart> is display:flex flex-wrap:wrap,
   * so this flex item was shrinking to content (~277px) instead of
   * filling the 374px inner row. Force a full-width flex line with
   * flex-basis:100% + width:100% + box-sizing so the negative margins
   * actually pull to both card edges. */
  flex: 0 0 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  /* [2026-05-01o] Was: padding:14px 22px; margin:0 -22px — pulled the row
   * 22px outside form.cart so the dashed borders broke out to the buy-box
   * card edges. User wants the dots to MATCH the license card width
   * (1202→1696, ~494px), so remove the negative margin and shrink padding. */
  margin: 0;
  padding: 14px 16px;
  border-top: 1px dashed var(--mhc-border, #30363d);
  border-bottom: 1px dashed var(--mhc-border, #30363d);
}
.wcsp-total__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mhc-text-dim, #8b949e);
}
.wcsp-total__amount {
  font-size: 26px;
  font-weight: 800;
  color: #39d98a;
  font-family: Poppins, sans-serif;
  line-height: 1;
}

/* ──────────── [2026-05-01d] Share row polish ──────────── */
.wcsp-share {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--mhc-surface, #161b22);
  border: 1px solid var(--mhc-border, #30363d);
  border-radius: 10px;
}
.wcsp-share__label {
  color: var(--mhc-text-dim, #8b949e);
  font-size: 12px;
  margin-right: 4px;
}
.wcsp-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--mhc-border, #30363d);
  background: transparent;
  border-radius: 50%;
  color: var(--mhc-text-dim, #8b949e);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
}
.wcsp-share__link:hover {
  color: #39d98a;
  border-color: #39d98a;
  transform: translateY(-1px);
}
/* ──────────── Email Capture ──────────── */
.wcsp-email-capture {
  background: linear-gradient(135deg, rgba(57, 217, 138, 0.13), rgba(88, 166, 255, 0.10));
  border: 1px solid var(--mhc-border, #30363d);
  border-radius: 14px;
  padding: 28px 32px;
  margin: 28px 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
/* [2026-05-01r] Was flex:1; min-width:240px — copy filled the entire row
 * minus the form, leaving the desc visually orphaned mid-row with a wide
 * gap before the form. Cap with max-width so copy reads as a tight column
 * on the left and the form anchors to the right with breathing room.
 * [2026-05-01s] Dropped max-width:620 — it created dead slack between copy
 * and form (copy stopped growing at 620 but form had no flex-grow, so the
 * parent's leftover ~370px just sat empty). Copy now grows proportionally
 * with the form (both flex:1), and the form's own max-width caps it from
 * dominating on wide screens. */
.wcsp-email-capture__copy { flex: 1 1 320px; min-width: 240px; }
.wcsp-email-capture__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--mhc-text, #e6edf3);
  /* [2026-05-01r] Was margin:0 0 4px — desc felt cramped under the title. */
  margin: 0 0 6px;
  line-height: 1.25;
}
.wcsp-email-capture__desc {
  font-size: 13px;
  color: var(--mhc-text-dim, #8b949e);
  margin: 0;
  line-height: 1.5;
}
.wcsp-email-capture__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* [2026-05-01s] Form was content-sized (no flex-grow), so any leftover
   * slack between copy and form became dead space. Adding flex:1 lets the
   * form absorb that slack — and because .wcsp-email-capture__input has
   * flex:1 inside the form, the input itself widens too. Cap at 540px so
   * the form doesn't dwarf the copy on wide viewports. */
  flex: 1 1 360px;
  max-width: 540px;
}
.wcsp-email-capture__input {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--mhc-border, #30363d);
  color: var(--mhc-text, #e6edf3);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  min-width: 240px;
  flex: 1;
  font-family: inherit;
}
.wcsp-email-capture__input::placeholder { color: var(--mhc-text-faint, #6e7681); }
.wcsp-email-capture__input:focus {
  outline: 2px solid #39d98a;
  outline-offset: 2px;
}
.wcsp-email-capture__btn {
  background: #39d98a;
  color: #062b18;
  font-weight: 800;
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s;
}
.wcsp-email-capture__btn:hover { transform: translateY(-1px); }
/* [2026-05-01r] Was: flex-basis:100%; min-height:18px; margin-top:8px on the
 * base rule — that forced an empty msg div to wrap to a full row even when
 * untouched, adding ~50-70px of phantom whitespace below the form. Now
 * the empty msg contributes 0 to layout (no flex-basis, no margin); only
 * non-empty messages break to a full-width row with breathing room. */
.wcsp-email-capture__msg {
  font-size: 13px;
  color: var(--mhc-text-dim, #8b949e);
}
.wcsp-email-capture__msg:not(:empty) {
  flex-basis: 100%;
  margin-top: 12px;
}
.wcsp-email-capture__msg.is-success { color: #39d98a; font-weight: 600; }

@media (max-width: 720px) {
  .wcsp-email-capture { padding: 22px 20px; }
  .wcsp-email-capture__form { width: 100%; }
  .wcsp-email-capture__input { min-width: 0; width: 100%; }
  .wcsp-email-capture__btn { width: 100%; }
}