/* Extracted from app/Views/site/layouts/master.php on 2026-06-09.
   Style A (Mint/Navy) theme CSS — cached externally for performance.
   Dynamic theme blocks remain inline in master.php. */

    /* ═════════════════════════════════════════════════════════
       STYLE A — Mint / Navy theme (mobile-first)
       Brand: Mint #5FCFC0 • Navy #0E2A3B • Page #F2F7FA
       Font:  Plus Jakarta Sans
       ═════════════════════════════════════════════════════════ */

    :root {
      /* Brand palette */
      --sa-mint:       #5FCFC0;
      --sa-mint-soft:  #D4F0EC;
      --sa-mint-tint:  #EAF6F5;
      --sa-mint-ink:   #1B6A5E;
      --sa-mint-dark:  #4AB5A6;
      --sa-navy:       #0E2A3B;
      --sa-navy-soft:  #1A3A4F;

      /* Surfaces */
      --sa-bg:         #F2F7FA;
      --sa-card:       #FFFFFF;
      --sa-rule:       #E2EBF0;
      --sa-rule-2:     #C6D3DC;

      /* Text */
      --sa-ink:        #0E2A3B;
      --sa-ink-2:      #2C4658;
      --sa-ink-3:      #4F6878;
      --sa-ink-4:      #708392;
      --sa-ink-5:      #9AA8B3;
      --sa-ink-6:      #BFC9D1;

      /* Shadows */
      --sa-shadow-xs:  0 1px 2px rgba(14,42,59,.06);
      --sa-shadow-sm:  0 2px 6px rgba(14,42,59,.08);
      --sa-shadow-md:  0 8px 20px rgba(14,42,59,.10);
      --sa-shadow-lg:  0 20px 50px -16px rgba(14,42,59,.18);

      /* Layout */
      --sa-bar-h:      56px;
      --sa-bar-h-d:    72px;
      --sa-radius:     14px;
      --sa-radius-lg:  22px;

      /* Override legacy tokens so existing components inherit Style A */
      --bg:            var(--sa-bg);
      --card:          var(--sa-card);
      --txt:           var(--sa-ink);
      --muted:         var(--sa-ink-3);
      --line:          var(--sa-rule);
      --line2:         var(--sa-rule);
      --a:             var(--sa-mint);
      --b:             var(--sa-mint-ink);
      --pill-soft-bg:  var(--sa-mint-tint);
      --pill-soft-border: var(--sa-mint-soft);
      --bg-grad-top:   var(--sa-bg);
      --bg-grad-bottom:var(--sa-bg);
      --r:             var(--sa-radius);
      --shadow:        var(--sa-shadow-md);
      --shadow2:       var(--sa-shadow-sm);
      --sans:          'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --head:          'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }

    /* Base typography */
    html, body {
      font-family: var(--sa-head);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: -.005em;
    }
    body {
      background: var(--sa-bg) !important;
      color: var(--sa-ink) !important;
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
      letter-spacing: -.022em;
      color: var(--sa-ink) !important;
      font-weight: 700;
    }

    /* ── HEADER / NAVIGATION ── */
    header[role="banner"],
    .sh-header {
      background: var(--sa-card) !important;
      border-bottom: 1px solid var(--sa-rule) !important;
      box-shadow: var(--sa-shadow-xs) !important;
    }
    .sh-mobile-nav {
      background: var(--sa-card) !important;
      border-top: 1px solid var(--sa-rule) !important;
    }

    /* ── BUTTONS ── */
    .btn, button.btn, a.btn {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      font-weight: 600;
      letter-spacing: 0;
      border-radius: 999px;
      transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    }
    .btn.primary, .btn-primary {
      background: var(--sa-mint) !important;
      background-image: none !important;
      border: 1px solid var(--sa-mint) !important;
      color: var(--sa-navy) !important;
    }
    .btn.primary:hover, .btn-primary:hover {
      background: var(--sa-mint-dark) !important;
      border-color: var(--sa-mint-dark) !important;
      color: #fff !important;
      transform: translateY(-1px);
    }
    .btn.ghost, .btn-ghost, .btn.secondary {
      background: var(--sa-card) !important;
      background-image: none !important;
      border: 1px solid var(--sa-rule-2) !important;
      color: var(--sa-ink) !important;
    }
    .btn.ghost:hover, .btn-ghost:hover, .btn.secondary:hover {
      background: var(--sa-mint-tint) !important;
      border-color: var(--sa-mint) !important;
      color: var(--sa-mint-ink) !important;
    }
    .btn.dark, .btn-dark {
      background: var(--sa-navy) !important;
      border: 1px solid var(--sa-navy) !important;
      color: #fff !important;
    }
    .btn.dark:hover, .btn-dark:hover {
      background: var(--sa-navy-soft) !important;
      border-color: var(--sa-navy-soft) !important;
    }

    /* Generic Bootstrap buttons used in the storefront */
    .btn-info {
      background: var(--sa-mint-tint) !important;
      background-image: none !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
    }

    /* ── PILLS / CHIPS ── */
    .pill, .badge.pill, .chip, .tag.pill {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      font-weight: 600;
      border-radius: 999px;
      background: var(--sa-card) !important;
      background-image: none !important;
      border: 1px solid var(--sa-rule) !important;
      color: var(--sa-ink-2) !important;
    }
    .pill:hover, .chip:hover {
      border-color: var(--sa-rule-2) !important;
      color: var(--sa-ink) !important;
    }
    .pill.is-active, .pill.active, .chip.is-active, .chip.active {
      background: var(--sa-mint) !important;
      border-color: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
    }
    .pill.soft, .chip.soft, .pill-soft {
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
    }

    /* ── LINKS ── */
    a { color: var(--sa-mint-ink); }
    a:hover { color: var(--sa-mint-dark); }

    /* ── CARDS ── */
    .card, .panel, .surface, .shop-card, .product-card, .kit-card {
      background: var(--sa-card) !important;
      background-image: none !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: var(--sa-radius) !important;
      box-shadow: var(--sa-shadow-xs) !important;
    }
    .card:hover, .product-card:hover, .kit-card:hover {
      border-color: var(--sa-mint) !important;
      box-shadow: var(--sa-shadow-md) !important;
    }

    /* ── INPUTS ── */
    input[type="text"], input[type="email"], input[type="search"],
    input[type="tel"], input[type="number"], input[type="password"],
    select, textarea, .form-control {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      border: 1px solid var(--sa-rule-2) !important;
      border-radius: 12px !important;
      background: var(--sa-card) !important;
      color: var(--sa-ink) !important;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    input:focus, select:focus, textarea:focus, .form-control:focus {
      outline: none !important;
      border-color: var(--sa-mint) !important;
      box-shadow: 0 0 0 3px rgba(95,207,192,.22) !important;
    }

    /* ── SECTION TITLES (eyebrow) ── */
    .section-eyebrow, .kicker, .eyebrow {
      font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--sa-mint-ink);
    }

    /* ── FOOTER ── */
    footer.site-footer, .site-footer, footer[role="contentinfo"] {
      background: var(--sa-navy) !important;
      color: rgba(255,255,255,.72) !important;
      border-top: 1px solid var(--sa-navy) !important;
    }
    footer.site-footer h3, footer.site-footer h4, footer.site-footer h5,
    .site-footer h3, .site-footer h4, .site-footer h5,
    footer[role="contentinfo"] h3, footer[role="contentinfo"] h4, footer[role="contentinfo"] h5 {
      color: #ffffff !important;
    }
    footer.site-footer a, .site-footer a, footer[role="contentinfo"] a {
      color: rgba(255,255,255,.7) !important;
    }
    footer.site-footer a:hover, .site-footer a:hover, footer[role="contentinfo"] a:hover {
      color: var(--sa-mint) !important;
    }

    /* ── HERO BACKGROUNDS (homepage / blocks) ── */
    .hero, .blk-hero, [data-block="hero"] {
      background-image: linear-gradient(135deg, #6BA8E8 0%, #5FCFC0 60%, #B6E5DD 100%) !important;
    }

    /* ── CUSTOM CTA / DARK PANEL ── */
    .custom-cta, .blk-cta, [data-block="cta"] {
      background: var(--sa-navy) !important;
      background-image: none !important;
      color: #fff !important;
      border-radius: var(--sa-radius-lg) !important;
    }
    .custom-cta h2, .custom-cta h3, .blk-cta h2, .blk-cta h3 {
      color: #fff !important;
    }
    .custom-cta p, .blk-cta p {
      color: rgba(255,255,255,.78) !important;
    }

    /* ── TRUST STRIP ── */
    .trust, .trust-strip, [data-block="trust"] {
      background: var(--sa-card) !important;
    }
    .trust-card, .trust-item {
      background: transparent !important;
      border: none !important;
    }
    .trust-card .icon, .trust-item .icon {
      background: var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
    }

    /* ── CART / QUOTE / ACCOUNT PILL BUTTONS in header ── */
    .header-action, .nav-action, .header-cta {
      border-radius: 999px !important;
    }

    /* ──────────────────────────────────────
       MOBILE-FIRST SPACING TIGHTENERS
       ────────────────────────────────────── */
    @media (max-width: 720px) {
      .container, .wrap, main.wrap {
        padding-left: 14px !important;
        padding-right: 14px !important;
      }
      h1 { font-size: clamp(1.75rem, 6vw, 2.4rem) !important; line-height: 1.15 !important; }
      h2 { font-size: clamp(1.4rem, 5vw, 1.85rem) !important; line-height: 1.2 !important; }
      h3 { font-size: clamp(1.15rem, 4vw, 1.5rem) !important; line-height: 1.25 !important; }
      .btn, button.btn, a.btn { min-height: 44px; padding-left: 18px; padding-right: 18px; }
      .pill, .chip { min-height: 32px; }
    }

    /* Ensure all touch targets meet accessibility minimum on small screens */
    @media (hover: none) and (pointer: coarse) {
      button, a.btn, .pill, .chip, input, select { min-height: 40px; }
    }

    /* ═════════════════════════════════════════════════════════
       STYLE A — KIT DETAIL PAGE (.kit-*)
       Flips the dark cinematic look to a clean light catalog UI.
       ═════════════════════════════════════════════════════════ */

    .kit-page { gap: clamp(16px, 2.4vw, 24px) !important; }

    /* Hero block */
    .kit-hero {
      border-radius: var(--sa-radius-lg) !important;
      border: none !important;
      background: var(--sa-card) !important;
      background-image: none !important;
      box-shadow: none !important;
    }
    .kit-hero::before, .kit-hero::after { display: none !important; }
    .kit-hero-grid { padding: clamp(20px, 3vw, 32px) !important; }
    .kit-hero-copy h1 {
      color: var(--sa-ink) !important;
      letter-spacing: -.02em !important;
      line-height: 1.15 !important;
    }
    .kit-hero-copy p { color: var(--sa-ink-3) !important; line-height: 1.65 !important; }
    .kit-kicker {
      color: var(--sa-mint-ink) !important;
      letter-spacing: .12em !important;
    }

    /* Pills used throughout the kit page */
    .kit-pill {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      color: var(--sa-ink-2) !important;
      font-weight: 600 !important;
    }
    .kit-pill.success {
      background: #e9f9ef !important;
      border-color: #b2e6c2 !important;
      color: #14693a !important;
    }

    /* Price block */
    .kit-price strong { color: var(--sa-ink) !important; }
    .kit-price span { color: var(--sa-ink-3) !important; }
    .kit-cart-note { color: var(--sa-ink-3) !important; }
    .kit-cart-note strong { color: var(--sa-ink) !important; }

    /* Hero visual frame */
    .kit-hero-frame {
      border-radius: var(--sa-radius) !important;
      border: 1px solid var(--sa-rule) !important;
      background: var(--sa-bg) !important;
      min-height: 360px !important;
    }
    .kit-hero-frame.has-image::before,
    .kit-hero-frame.has-image::after { display: none !important; }
    .kit-hero-frame-empty { color: var(--sa-ink-4) !important; min-height: 360px !important; }
    .kit-hero-visual-copy {
      background: rgba(255,255,255,.94) !important;
      border: 1px solid var(--sa-rule) !important;
      box-shadow: var(--sa-shadow-md) !important;
      border-radius: 14px !important;
    }
    .kit-hero-visual-copy h2 { color: var(--sa-ink) !important; }
    .kit-hero-visual-copy p { color: var(--sa-ink-3) !important; }
    .kit-hero-label {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      color: var(--sa-ink-2) !important;
    }
    .kit-hero-preview-title {
      color: var(--sa-mint-ink) !important;
      letter-spacing: .12em !important;
    }
    .kit-hero-preview-card {
      border-radius: 12px !important;
      border: 1px solid var(--sa-rule) !important;
      background: var(--sa-card) !important;
    }
    .kit-hero-preview-thumb { background: var(--sa-bg) !important; }
    .kit-hero-preview-copy strong { color: var(--sa-ink) !important; }
    .kit-hero-preview-copy span { color: var(--sa-ink-3) !important; }

    /* Sections — outer panel only, no card chrome */
    .kit-section {
      background: var(--sa-card) !important;
      background-image: none !important;
      border: none !important;
      border-radius: var(--sa-radius-lg) !important;
      box-shadow: none !important;
      padding: clamp(20px, 3vw, 32px) !important;
    }
    .kit-section h2, .kit-section h3 { color: var(--sa-ink) !important; }
    .kit-section p { color: var(--sa-ink-3) !important; }

    /* Auto-public diagram section */
    .kit-auto-public {
      background: var(--sa-bg) !important;
      background-image: none !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: var(--sa-radius) !important;
    }
    .kit-auto-public__kicker { color: var(--sa-mint-ink) !important; }
    .kit-auto-public__desc { color: var(--sa-ink-3) !important; }
    .kit-auto-public-card {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 12px !important;
      box-shadow: var(--sa-shadow-xs) !important;
    }
    .kit-auto-public-card__role { color: var(--sa-mint-ink) !important; }
    .kit-auto-public-card__sku { color: var(--sa-ink-4) !important; }
    .kit-auto-public-card__title { color: var(--sa-ink) !important; }
    .kit-auto-public-card__qty { color: var(--sa-ink-2) !important; }
    .kit-auto-public-card__placeholder {
      background: var(--sa-bg) !important;
      color: var(--sa-ink-4) !important;
    }
    .kit-auto-public__wire-track {
      background: linear-gradient(90deg, var(--sa-mint-tint), var(--sa-mint-soft)) !important;
    }
    .kit-auto-public__wire-badge {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      color: var(--sa-mint-ink) !important;
    }
    .kit-auto-public__hub-note {
      color: var(--sa-ink-3) !important;
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
    }

    /* Guide / part list / steps wrappers — no outer chrome, the inner
       sub-cards carry their own visual treatment. */
    .kit-guide-card,
    .kit-related-card,
    .kit-buyer-main,
    .kit-list-item {
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
    }
    .kit-guide-card:hover,
    .kit-related-card:hover {
      border-color: var(--sa-mint) !important;
      box-shadow: var(--sa-shadow-sm) !important;
    }
    .kit-item-thumb,
    .kit-related-thumb {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 10px !important;
    }
    .kit-item-thumb-empty {
      background: var(--sa-bg) !important;
      color: var(--sa-ink-4) !important;
    }
    .kit-guide-copy strong { color: var(--sa-ink) !important; }
    .kit-guide-copy p, .kit-related-meta { color: var(--sa-ink-3) !important; }

    /* "Before you order" sub-cards (.kit-buyer-card) — tinted soft-slate */
    .kit-buyer-card {
      background: var(--sa-bg) !important;
      background-image: none !important;
      border: none !important;
      border-radius: 14px !important;
      padding: 18px 20px !important;
      box-shadow: none !important;
    }
    .kit-buyer-card h3, .kit-buyer-card h4 {
      color: var(--sa-ink) !important;
      font-size: 1rem !important;
      font-weight: 700 !important;
      margin-bottom: 10px !important;
    }
    .kit-buyer-card p,
    .kit-buyer-card li {
      color: var(--sa-ink-2) !important;
      font-size: .92rem !important;
      line-height: 1.55 !important;
    }
    .kit-buyer-card ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .kit-buyer-card li {
      padding-left: 22px !important;
      position: relative;
    }
    .kit-buyer-card li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--sa-mint-ink);
      font-weight: 800;
      line-height: 1.55;
    }

    /* Included parts grid (.kit-item-card) — soft-slate card with white image well */
    .kit-item-card {
      background: var(--sa-bg) !important;
      background-image: none !important;
      border: none !important;
      border-radius: 16px !important;
      padding: 14px !important;
      box-shadow: none !important;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .kit-item-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--sa-shadow-sm) !important;
    }
    .kit-item-card .kit-item-thumb {
      background: var(--sa-card) !important;
      border: none !important;
      border-radius: 12px !important;
      padding: 16px !important;
      aspect-ratio: 1.4 / 1;
      margin-bottom: 12px !important;
    }
    .kit-item-card .kit-item-sku,
    .kit-item-card .kit-item-code,
    .kit-item-card [class*="-sku"] {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: .72rem !important;
      color: var(--sa-ink-4) !important;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .kit-item-card .kit-item-name,
    .kit-item-card h3, .kit-item-card h4 {
      color: var(--sa-ink) !important;
      font-size: .94rem !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
      margin: 4px 0 !important;
    }
    .kit-item-card .kit-item-desc,
    .kit-item-card p {
      color: var(--sa-ink-3) !important;
      font-size: .82rem !important;
      line-height: 1.45 !important;
    }
    .kit-item-card .kit-item-qty,
    .kit-item-card [class*="-qty"]:not([class*="-empty"]) {
      display: inline-flex !important;
      align-items: center;
      gap: 5px;
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      border-radius: 999px !important;
      padding: 4px 10px !important;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
      font-size: .72rem !important;
      font-weight: 700 !important;
      color: var(--sa-mint-ink) !important;
    }

    /* "Visual representation only" notice — BLUE info banner (not mint) */
    .kit-diagram-notice {
      background: #EBF4FF !important;
      border: none !important;
      border-left: 3px solid #4F8DE6 !important;
      border-radius: 0 12px 12px 0 !important;
      color: var(--sa-ink-2) !important;
      padding: 12px 16px !important;
    }
    .kit-diagram-notice strong, .kit-diagram-notice h4 {
      color: #1B4566 !important;
      font-size: .94rem !important;
    }
    .kit-diagram-notice i, .kit-diagram-notice svg {
      color: #4F8DE6 !important;
    }

    /* "How to read this diagram" tip-banner (the bottom blue tip) */
    .kit-tip-banner {
      background: #EBF4FF !important;
      border: 1px solid #C6D9F2 !important;
      color: var(--sa-ink-2) !important;
    }
    .kit-tip-banner strong, .kit-tip-banner h4 {
      color: #1B4566 !important;
      font-size: .82rem !important;
      letter-spacing: .14em !important;
      text-transform: uppercase !important;
      font-weight: 700 !important;
    }

    /* Diagram tips row (.kit-diagram-legend → 3 cards) */
    .kit-diagram-legend {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 14px !important;
    }
    .kit-diagram-legend-card {
      background: var(--sa-bg) !important;
      border: none !important;
      border-radius: 14px !important;
      padding: 16px !important;
      box-shadow: none !important;
    }
    .kit-diagram-legend-card h4, .kit-diagram-legend-card strong {
      color: var(--sa-ink) !important;
      font-size: .94rem !important;
      font-weight: 700 !important;
      margin-bottom: 6px !important;
      display: block;
    }
    .kit-diagram-legend-card p {
      color: var(--sa-ink-2) !important;
      font-size: .85rem !important;
      line-height: 1.5 !important;
    }

    /* Wiring + Build order 2-col grid (.kit-diagram-guide-grid) */
    .kit-diagram-guide-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 16px !important;
    }
    .kit-diagram-guide-card {
      background: var(--sa-bg) !important;
      border: none !important;
      border-radius: 14px !important;
      padding: 18px 20px !important;
      box-shadow: none !important;
    }
    .kit-diagram-guide-card > h3,
    .kit-diagram-guide-card > h4,
    .kit-diagram-guide-card > strong:first-child {
      color: var(--sa-ink) !important;
      font-size: 1.02rem !important;
      font-weight: 700 !important;
      margin-bottom: 4px !important;
      display: block;
    }
    .kit-diagram-guide-card > p {
      color: var(--sa-ink-3) !important;
      font-size: .9rem !important;
      line-height: 1.55 !important;
      margin-bottom: 14px !important;
    }
    /* Inner sub-cards inside the wiring/build-order columns */
    .kit-diagram-guide-card .kit-step,
    .kit-diagram-guide-card .kit-list-item,
    .kit-diagram-guide-card > div > div {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 10px !important;
      padding: 12px 14px !important;
      margin-bottom: 8px !important;
    }
    .kit-diagram-guide-card .kit-step strong,
    .kit-diagram-guide-card .kit-list-item strong {
      color: var(--sa-ink) !important;
      font-size: .9rem !important;
    }
    .kit-diagram-guide-card .kit-step p,
    .kit-diagram-guide-card .kit-list-item p {
      color: var(--sa-ink-3) !important;
      font-size: .85rem !important;
      line-height: 1.5 !important;
      margin-top: 4px !important;
    }

    /* Hero right column: let the frame fill the whole column normally */
    .kit-hero-visual {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      min-width: 0;
    }
    .kit-hero-visual > .kit-hero-frame,
    .kit-hero-visual > .kit-hero-frame.is-auto-diagram {
      flex: 1 1 auto !important;
      min-height: 320px !important;
      max-height: 540px !important;
      overflow: hidden !important;
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      box-shadow: none !important;
      position: relative;
    }

    /* Compact auto-layout diagram living inside the hero frame —
       3-col × 2-row gallery: 1 main tile (col1, both rows),
       3 part thumbs (col2-3 row 1, col 2 row 2), + 1 mint
       "Auto kit diagram" card in col 3 row 2. */
    .kit-hero-frame .kit-auto-public.is-compact,
    .kit-hero-frame .kit-auto-public {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }
    .kit-hero-frame .kit-auto-public__compact-grid {
      display: grid !important;
      grid-template-columns: 2fr 1fr 1fr !important;
      grid-template-rows: 1fr 1fr !important;
      gap: 10px !important;
      width: 100% !important;
      height: 100%;
    }
    .kit-hero-frame .kit-auto-public__compact-grid > *:first-child {
      grid-column: 1 / span 1 !important;
      grid-row: 1 / span 2 !important;
    }
    /* Show 4 tiles total (1 main spanning 2 rows + 3 thumbs in cols 2-3),
       then the mint overlay takes the last cell (col 3 row 2). */
    .kit-hero-frame .kit-auto-public__compact-grid > *:nth-child(n+5) {
      display: none !important;
    }
    /* Cell wrapper — transparent (no double card) */
    .kit-hero-frame .kit-auto-public__compact-cell {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      min-height: 0 !important;
      box-shadow: none !important;
      display: block !important;
    }
    /* The actual tile — white card, thin border, rounded corners, centered image */
    .kit-hero-frame .kit-auto-public-card {
      position: relative !important;
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 18px !important;
      padding: 18px !important;
      min-height: 0 !important;
      height: 100% !important;
      width: 100% !important;
      box-shadow: none !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
      overflow: hidden;
    }
    .kit-hero-frame .kit-auto-public-card:hover {
      border-color: var(--sa-mint) !important;
      box-shadow: var(--sa-shadow-sm) !important;
      transform: translateY(-2px);
    }
    /* Media area — fills the card, transparent bg, big image */
    .kit-hero-frame .kit-auto-public-card__media {
      width: 100% !important;
      height: 100% !important;
      aspect-ratio: auto !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
    }
    .kit-hero-frame .kit-auto-public-card__media img {
      max-width: 80% !important;
      max-height: 80% !important;
      width: auto !important;
      height: auto !important;
      object-fit: contain !important;
    }
    /* Qty badge — small pill floating at bottom-right corner */
    .kit-hero-frame .kit-auto-public-card__qty-badge {
      position: absolute !important;
      bottom: 10px !important;
      right: 10px !important;
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 999px !important;
      padding: 3px 9px !important;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      color: var(--sa-ink-3) !important;
      margin: 0 !important;
    }
    /* Top-right expand/arrow icon — small pill */
    .kit-hero-frame .kit-auto-public-card__link-icon {
      display: inline-flex !important;
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      width: 28px !important;
      height: 28px !important;
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 8px !important;
      align-items: center;
      justify-content: center;
      color: var(--sa-ink-3) !important;
      font-size: 13px !important;
      transition: background .15s ease, border-color .15s ease, color .15s ease;
    }
    .kit-hero-frame .kit-auto-public-card:hover .kit-auto-public-card__link-icon {
      background: var(--sa-mint-tint) !important;
      border-color: var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
    }

    /* "Auto kit diagram" mint card — pin to bottom-right grid cell
       (col 3 row 2). Card frame stays since this IS a callout/alert. */
    .kit-hero-frame .kit-hero-visual-copy {
      position: absolute !important;
      right: 0 !important;
      bottom: 0 !important;
      left: auto !important;
      top: auto !important;
      width: calc((100% - 20px) / 4) !important;
      height: calc((100% - 10px) / 2) !important;
      max-width: 200px !important;
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      box-shadow: none !important;
      border-radius: 14px !important;
      padding: 10px 12px !important;
      overflow: hidden;
      display: flex !important;
      flex-direction: column;
      gap: 6px;
    }
    .kit-hero-frame .kit-hero-visual-copy .kit-hero-label {
      background: var(--sa-card) !important;
      border-color: var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
      font-size: .62rem !important;
      padding: .22rem .5rem !important;
      align-self: flex-start;
      white-space: nowrap;
      max-width: 100%;
    }
    .kit-hero-frame .kit-hero-visual-copy h2 {
      color: var(--sa-mint-ink) !important;
      font-size: .82rem !important;
      line-height: 1.25 !important;
      margin: 2px 0 0 !important;
      font-weight: 700 !important;
    }
    .kit-hero-frame .kit-hero-visual-copy p {
      color: var(--sa-ink-2) !important;
      font-size: .68rem !important;
      line-height: 1.35 !important;
      margin: 0 !important;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
    }

    /* Hero grid: make the right column a fixed share so the gallery doesn't squeeze */
    .kit-hero-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
      gap: 28px !important;
    }

    /* Mobile: hero stacks; gallery is a single column scroll */
    @media (max-width: 900px) {
      .kit-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
      }
      .kit-hero-visual > .kit-hero-frame {
        min-height: 0 !important;
        padding: 14px !important;
      }
      .kit-hero-frame .kit-hero-visual-copy {
        position: static !important;
        max-width: none !important;
        width: 100% !important;
        margin-top: 12px;
      }
      .kit-diagram-legend { grid-template-columns: 1fr !important; }
      .kit-diagram-guide-grid { grid-template-columns: 1fr !important; }
      .kit-buyer-card { padding: 16px !important; }
      .kit-item-card { padding: 12px !important; }
    }

    .kit-step {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 12px !important;
    }
    .kit-step-no {
      background: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      font-weight: 700 !important;
    }
    .kit-step strong { color: var(--sa-ink) !important; }
    .kit-step p { color: var(--sa-ink-3) !important; }

    /* (.kit-tip-banner styled below in the Reference-match block — left intact there) */

    /* Code block */
    .kit-code-panel,
    .kit-code-card {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 12px !important;
      box-shadow: var(--sa-shadow-xs) !important;
    }
    /* (.kit-diagram-legend-card and .kit-diagram-guide-card styled below
        in the Reference-match block — left intact there) */

    /* ─────── Build diagram section: strip nested chrome ─────── */
    /* Outer showcase wrapper + image-card stage — flat */
    .kit-diagram-showcase,
    .kit-diagram-showcase-card,
    .kit-diagram-showcase-card.is-primary,
    .kit-diagram-image-card,
    .kit-diagram-image-card--stage {
      background: transparent !important;
      background-image: none !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
    }
    /* The diagram canvas — flatten heavy shadow, keep tint if any */
    .kit-preview-stage,
    .kit-preview-stage__canvas {
      border: none !important;
      box-shadow: none !important;
      background: var(--sa-bg) !important;
      border-radius: 16px !important;
    }
    /* Each component card on the diagram — light, single-layer card */
    .kit-preview-layer.kit-preview-layer--diagram-card {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 12px !important;
      box-shadow: var(--sa-shadow-xs) !important;
    }
    /* The image well inside each component card — no double border */
    .kit-preview-layer__diagram-media {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    /* Images themselves never carry border/shadow */
    .kit-preview-stage img,
    .kit-preview-layer img,
    .kit-diagram-image-card img,
    .kit-diagram-showcase img {
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
    }
    /* Text boxes inside the diagram — tinted callout, no shadow */
    .kit-preview-layer__text-box {
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      box-shadow: none !important;
      border-radius: 10px !important;
    }
    /* Connector badges — keep the tint but flatten */
    .kit-preview-layer__diagram-connector-badge {
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
      box-shadow: none !important;
    }
    .kit-diagram-showcase-kicker { color: var(--sa-mint-ink) !important; }
    .kit-code-snippet {
      background: var(--sa-navy) !important;
      color: #e7eef4 !important;
      border: 1px solid #1a3a4f !important;
      border-radius: 10px !important;
    }
    .kit-code-step-no {
      background: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      font-weight: 700 !important;
    }
    .kit-code-step-text { color: var(--sa-ink-2) !important; }
    .kit-code-file { color: var(--sa-ink-4) !important; }
    .kit-code-note { color: var(--sa-ink-3) !important; }
    .kit-pin-row {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      color: var(--sa-ink) !important;
    }
    /* (.kit-diagram-notice styled below in the Reference-match block — left intact there) */

    /* ═════════════════════════════════════════════════════════
       STYLE A — PRODUCT DETAIL PAGE (.product-*, .pd-*)
       ═════════════════════════════════════════════════════════ */
    .product-page,
    .pd-page,
    .product-detail {
      background: var(--sa-bg) !important;
    }

    .product-hero,
    .pd-hero,
    .product-card-shell,
    .pd-card,
    .product-gallery,
    .pd-gallery,
    .product-info,
    .pd-info,
    .product-meta-card,
    .product-buy-box,
    .pd-buy-box,
    .product-tabs,
    .product-section,
    .pd-section,
    .product-related,
    .pd-related,
    .product-reviews-card {
      background: var(--sa-card) !important;
      background-image: none !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: var(--sa-radius) !important;
      box-shadow: var(--sa-shadow-xs) !important;
    }
    .product-hero::before, .product-hero::after,
    .pd-hero::before, .pd-hero::after { display: none !important; }

    .product-title, .pd-title, .product-name h1 {
      color: var(--sa-ink) !important;
      letter-spacing: -.02em !important;
      line-height: 1.15 !important;
    }
    .product-desc, .pd-desc, .product-info p { color: var(--sa-ink-3) !important; line-height: 1.65 !important; }
    .product-price, .pd-price, .price-now { color: var(--sa-ink) !important; }
    .product-price-old, .price-old, .strike { color: var(--sa-ink-4) !important; }
    .product-stock, .pd-stock, .stock-badge {
      background: #e9f9ef !important;
      border: 1px solid #b2e6c2 !important;
      color: #14693a !important;
    }
    .product-stock.out, .stock-badge.out, .pd-stock.out {
      background: #fde8eb !important;
      border-color: #f4b8c0 !important;
      color: #8a1f32 !important;
    }
    .product-meta, .pd-meta, .product-spec-row {
      color: var(--sa-ink-3) !important;
    }
    .product-spec-key, .pd-spec-key { color: var(--sa-ink-4) !important; font-weight: 600 !important; }
    .product-spec-val, .pd-spec-val { color: var(--sa-ink) !important; font-weight: 600 !important; }

    .product-gallery .thumb,
    .pd-gallery .thumb,
    .product-thumb {
      border: 1px solid var(--sa-rule) !important;
      border-radius: 10px !important;
      background: var(--sa-bg) !important;
    }
    .product-gallery .thumb.active,
    .pd-gallery .thumb.active,
    .product-thumb.active {
      border-color: var(--sa-mint) !important;
      box-shadow: 0 0 0 2px rgba(95,207,192,.25) !important;
    }
    .product-main-image,
    .pd-main-image {
      background: var(--sa-bg) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: var(--sa-radius) !important;
    }

    /* Quantity stepper */
    .qty-stepper, .product-qty {
      border: 1px solid var(--sa-rule-2) !important;
      border-radius: 12px !important;
      background: var(--sa-card) !important;
    }
    .qty-stepper button { color: var(--sa-ink) !important; }

    /* Add-to-cart row */
    .add-to-cart, .pd-add-to-cart, .btn-add-cart, .product-buy-box .btn.primary {
      background: var(--sa-mint) !important;
      border-color: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
    }
    .add-to-cart:hover, .pd-add-to-cart:hover, .btn-add-cart:hover {
      background: var(--sa-mint-dark) !important;
      border-color: var(--sa-mint-dark) !important;
      color: #fff !important;
    }

    /* Product tabs */
    .product-tabs .tab,
    .pd-tab,
    [role="tab"] {
      color: var(--sa-ink-3) !important;
      border-bottom: 2px solid transparent !important;
    }
    .product-tabs .tab.active,
    .pd-tab.active,
    [role="tab"][aria-selected="true"] {
      color: var(--sa-ink) !important;
      border-bottom-color: var(--sa-mint) !important;
    }

    /* Compatible-with / kit-link list on product page */
    .product-kits-list,
    .pd-kits-list,
    .compatible-kits {
      background: var(--sa-bg) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 12px !important;
    }

    /* Related products grid */
    .related-products .product-card,
    .pd-related .product-card,
    .product-related .product-card {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 12px !important;
      box-shadow: var(--sa-shadow-xs) !important;
    }
    .related-products .product-card:hover,
    .product-related .product-card:hover {
      border-color: var(--sa-mint) !important;
      box-shadow: var(--sa-shadow-md) !important;
    }

    /* Mobile-first tweaks for both detail pages */
    @media (max-width: 720px) {
      .kit-hero-grid { grid-template-columns: 1fr !important; }
      .kit-hero-frame, .kit-hero-frame-empty { min-height: 240px !important; }
      .kit-hero-preview { grid-template-columns: repeat(2, 1fr) !important; }
      .kit-section { padding: 18px !important; }

      .product-page .row,
      .pd-page .row { gap: 14px !important; }
      .product-main-image, .pd-main-image { aspect-ratio: 1 / 1 !important; }
    }

    /* ═════════════════════════════════════════════════════════
       READABILITY FIXES — kit detail in-page nav + sticky bar
       ═════════════════════════════════════════════════════════ */

    /* In-page nav pills (Parts / Diagram / Steps / Code etc.) */
    .kit-nav-pill {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      color: var(--sa-ink-2) !important;
      font-weight: 700 !important;
      font-size: .82rem !important;
      padding: .5rem .9rem !important;
      min-height: 36px !important;
    }
    .kit-nav-pill:hover {
      border-color: var(--sa-mint) !important;
      background: var(--sa-mint-tint) !important;
      color: var(--sa-mint-ink) !important;
    }
    .kit-nav-pill.is-active {
      background: var(--sa-mint) !important;
      border-color: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
    }
    .kit-page-nav-wrap {
      background: rgba(242, 247, 250, .9) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--sa-rule);
    }

    /* Sticky bottom add-to-cart bar — keep dark for distinction but ensure contrast */
    .kit-sticky {
      background: var(--sa-navy) !important;
      border-top: 1px solid var(--sa-navy-soft) !important;
      box-shadow: 0 -8px 24px rgba(14,42,59,.18) !important;
    }
    .kit-sticky-name { color: #ffffff !important; font-weight: 700 !important; }
    .kit-sticky-price { color: rgba(255,255,255,.78) !important; font-size: .85rem !important; }
    .kit-sticky .btn.primary {
      background: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      border-color: var(--sa-mint) !important;
    }

    /* Quantity badge inside thumbs — keep dark since it sits on light photos */
    .kit-item-qty-badge {
      background: var(--sa-navy) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      font-size: .78rem !important;
    }

    /* Make small/secondary text on kit page strong enough to read */
    .kit-meta, .kit-spec, .kit-note,
    .kit-step p, .kit-code-note, .kit-code-step-text,
    .kit-related-meta, .kit-guide-copy p,
    .kit-list-item p, .kit-buyer-list li {
      color: var(--sa-ink-2) !important;
      font-size: .94rem !important;
      line-height: 1.6 !important;
    }
    .kit-pill { font-size: .8rem !important; padding: .42rem .82rem !important; }

    /* ═════════════════════════════════════════════════════════
       STYLE A — CUSTOM KIT BUILDER (.kit-builder-*, .kit-qs-*, .ck-*)
       ═════════════════════════════════════════════════════════ */

    .kit-builder-page { background: var(--sa-bg) !important; }

    .kit-builder-hero,
    .kit-builder-welcome,
    .kit-builder-step,
    .ck-step,
    .kit-builder-card,
    .ck-card,
    .kit-builder-summary,
    .ck-summary,
    .kit-builder-form-card,
    .ck-form-card {
      background: var(--sa-card) !important;
      background-image: none !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: var(--sa-radius-lg) !important;
      box-shadow: var(--sa-shadow-xs) !important;
      color: var(--sa-ink) !important;
    }
    .kit-builder-hero::before, .kit-builder-hero::after { display: none !important; }

    .kit-builder-hero h1,
    .kit-builder-hero h2,
    .kit-builder-copy h1,
    .kit-builder-copy h2,
    .ck-step h2, .ck-step h3 {
      color: var(--sa-ink) !important;
      letter-spacing: -.02em !important;
      line-height: 1.15 !important;
    }
    .kit-builder-hero p,
    .kit-builder-copy p,
    .ck-step p,
    .ck-help-text {
      color: var(--sa-ink-3) !important;
      font-size: 1rem !important;
      line-height: 1.65 !important;
    }

    /* Brand the kicker / quickstart label with mint */
    .kit-builder-kicker,
    .kit-quickstart-label,
    .ck-eyebrow {
      background: var(--sa-mint-tint) !important;
      color: var(--sa-mint-ink) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      font-weight: 700 !important;
      font-size: .78rem !important;
      letter-spacing: .12em !important;
    }

    /* Trust pills */
    .kit-builder-trust-pill {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule-2) !important;
      color: var(--sa-ink-2) !important;
      font-weight: 600 !important;
      font-size: .82rem !important;
      padding: .42rem .78rem !important;
    }

    /* Quickstart tiles (the buttons asking what you're building) */
    .kit-qs-tile,
    .ck-tile,
    .ck-option-tile {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule-2) !important;
      border-radius: 12px !important;
      color: var(--sa-ink) !important;
      font-weight: 600 !important;
      font-size: .94rem !important;
      padding: 14px 16px !important;
      min-height: 48px !important;
      transition: border-color .15s ease, background .15s ease, transform .15s ease;
    }
    .kit-qs-tile:hover,
    .ck-tile:hover,
    .ck-option-tile:hover {
      border-color: var(--sa-mint) !important;
      background: var(--sa-mint-tint) !important;
      color: var(--sa-mint-ink) !important;
      transform: translateY(-1px);
    }
    .kit-qs-tile.is-active,
    .kit-qs-tile[aria-pressed="true"],
    .ck-tile.is-active,
    .ck-option-tile.is-active {
      border-color: var(--sa-mint) !important;
      background: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
    }

    .kit-quickstart-q,
    .ck-question-title {
      color: var(--sa-ink) !important;
      font-weight: 700 !important;
      font-size: 1.05rem !important;
      line-height: 1.35 !important;
      margin-bottom: 8px !important;
    }
    .kit-quickstart-go,
    .ck-help-meta {
      color: var(--sa-ink-3) !important;
      font-size: .94rem !important;
      line-height: 1.55 !important;
    }

    /* Form fields on the builder */
    .kit-builder-page input[type="text"],
    .kit-builder-page input[type="email"],
    .kit-builder-page input[type="tel"],
    .kit-builder-page input[type="number"],
    .kit-builder-page select,
    .kit-builder-page textarea,
    .ck-input, .ck-select, .ck-textarea {
      border: 1px solid var(--sa-rule-2) !important;
      border-radius: 10px !important;
      background: var(--sa-card) !important;
      color: var(--sa-ink) !important;
      font-size: 16px !important;  /* prevent iOS zoom */
      line-height: 1.4 !important;
      padding: 11px 14px !important;
    }
    .kit-builder-page input:focus,
    .kit-builder-page select:focus,
    .kit-builder-page textarea:focus,
    .ck-input:focus, .ck-select:focus, .ck-textarea:focus {
      outline: none !important;
      border-color: var(--sa-mint) !important;
      box-shadow: 0 0 0 3px rgba(95,207,192,.22) !important;
    }
    .kit-builder-page label,
    .ck-label {
      color: var(--sa-ink) !important;
      font-weight: 600 !important;
      font-size: .92rem !important;
      margin-bottom: 6px !important;
      display: block;
    }
    .kit-builder-page .help,
    .kit-builder-page .form-hint,
    .ck-help, .form-text {
      color: var(--sa-ink-3) !important;
      font-size: .85rem !important;
      line-height: 1.5 !important;
    }

    /* Step indicator */
    .kit-builder-stepnum,
    .ck-step-num,
    .ck-step-circle {
      background: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      font-weight: 800 !important;
    }
    .kit-builder-step-title,
    .ck-step-title {
      color: var(--sa-ink) !important;
      font-size: 1.1rem !important;
      font-weight: 700 !important;
    }

    /* Summary panel pricing */
    .kit-builder-summary .total,
    .ck-summary-total {
      color: var(--sa-ink) !important;
      font-weight: 700 !important;
    }

    /* Submit / next buttons on the builder */
    .kit-builder-page .btn.primary,
    .kit-builder-page .ck-submit,
    .kit-builder-next,
    .ck-next-btn {
      background: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      border: 1px solid var(--sa-mint) !important;
      min-height: 48px !important;
      font-weight: 700 !important;
      padding: .7rem 1.4rem !important;
    }
    .kit-builder-page .btn.primary:hover,
    .kit-builder-next:hover,
    .ck-next-btn:hover {
      background: var(--sa-mint-dark) !important;
      border-color: var(--sa-mint-dark) !important;
      color: #fff !important;
    }

    /* Mobile-first sizing for the custom kit builder */
    @media (max-width: 720px) {
      .kit-builder-hero h1,
      .kit-builder-copy h1 {
        font-size: clamp(1.7rem, 5.5vw, 2.2rem) !important;
        line-height: 1.18 !important;
      }
      .kit-builder-hero p,
      .kit-builder-copy p { font-size: .98rem !important; }
      .kit-qs-tile, .ck-tile, .ck-option-tile {
        font-size: .9rem !important;
        padding: 12px 14px !important;
      }
      .kit-builder-trust-pill { font-size: .78rem !important; }
    }

    /* ═════════════════════════════════════════════════════════
       UNIVERSAL READABILITY GUARDRAILS
       — Forces minimum legible sizes and high-contrast text
       ═════════════════════════════════════════════════════════ */

    /* Body copy minimum */
    main p, main li { font-size: max(.95rem, 15px); line-height: 1.65; color: var(--sa-ink-2); }

    /* Anything with <11px text on a light page → bump to 12px */
    main .pill,
    main .chip,
    main .badge,
    main small {
      font-size: max(.78rem, 12px) !important;
    }

    /* Faded text colors used across the site → upgrade to readable */
    main [class*="muted"],
    main [class*="-meta"],
    main [class*="-note"]:not(.kit-tip-banner):not(.kit-diagram-notice),
    main [class*="-hint"]:not(.kit-builder-ai-step-hint-btn):not(button):not(a),
    main [class*="-desc"]:not(.kit-builder-kicker) {
      color: var(--sa-ink-3) !important;
    }

    /* Form labels and field labels — never below 14px */
    main label, main .form-label, main legend {
      font-size: max(.92rem, 14px) !important;
      color: var(--sa-ink) !important;
      font-weight: 600 !important;
    }

    /* When the kit sticky bottom bar is visible, push the chat widget and
       cookie-settings FAB above it. The 'has-kit-sticky' class is mirrored
       on <body> by the kit page's IntersectionObserver. */
    body.has-kit-sticky .ai-chat-root {
      bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.has-kit-sticky .cookie-settings-fab {
      bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Make sure the sticky bar sits below the chat (and never covers it) */
    .kit-sticky { z-index: 900 !important; }
    .ai-chat-root { z-index: 1200 !important; }
    .cookie-settings-fab { z-index: 1100 !important; }

    /* ═════════════════════════════════════════════════════════
       STYLE A — CUSTOM KIT AI ADVISOR ("TITAN")
       Make AI assistance unmistakable + easy to use
       ═════════════════════════════════════════════════════════ */

    /* "Start & meet TITAN" / "Open the AI advisor" — primary mint CTA */
    .kit-compass-open-btn,
    a.kit-compass-open-btn,
    button.kit-compass-open-btn {
      background: var(--sa-mint) !important;
      background-image: linear-gradient(135deg, var(--sa-mint) 0%, #6FD9CB 100%) !important;
      border: 1px solid var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      font-weight: 700 !important;
      font-size: .96rem !important;
      padding: .75rem 1.4rem !important;
      min-height: 48px !important;
      box-shadow: 0 6px 18px rgba(95,207,192,.32) !important;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
    .kit-compass-open-btn::before {
      content: "✨";
      font-size: 1.05em;
      line-height: 1;
    }
    .kit-compass-open-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(95,207,192,.4) !important;
      background-image: linear-gradient(135deg, #6FD9CB 0%, var(--sa-mint) 100%) !important;
    }

    /* Per-step "Get direction ideas / Suggest options / Suggest parts" buttons */
    .kit-builder-ai-step-hint-btn {
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
      font-weight: 700 !important;
      font-size: .85rem !important;
      padding: .55rem 1rem !important;
      min-height: 40px !important;
      transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
    }
    .kit-builder-ai-step-hint-btn::before {
      content: "✨";
      font-size: 1em;
      line-height: 1;
    }
    .kit-builder-ai-step-hint-btn:hover {
      background: var(--sa-mint) !important;
      border-color: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      transform: translateY(-1px);
    }

    /* The advisor modal — Style A look */
    #customKitAdvisorModal {
      background: rgba(14,42,59,.55) !important;
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    #customKitAdvisorModal .kit-builder-modal-card {
      background: var(--sa-card) !important;
      background-image: none !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: var(--sa-radius-lg) !important;
      box-shadow: var(--sa-shadow-lg) !important;
      color: var(--sa-ink) !important;
      max-height: 92vh;
    }
    #customKitAdvisorModal .kit-builder-modal-head h3,
    #customKitAdvisorModal .kit-builder-modal-head h4 {
      color: var(--sa-ink) !important;
      letter-spacing: -.015em !important;
    }
    #customKitAdvisorModal .kit-builder-modal-head p {
      color: var(--sa-ink-3) !important;
      font-size: .96rem !important;
      line-height: 1.5 !important;
    }

    /* Brief / context cards inside the modal */
    #customKitAdvisorModal .kit-builder-modal-section,
    #customKitAdvisorModal .kit-builder-brief-card,
    #customKitAdvisorModal .kit-advisor-context {
      background: var(--sa-bg) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 12px !important;
      color: var(--sa-ink) !important;
    }
    #customKitAdvisorModal .kit-builder-modal-section h4,
    #customKitAdvisorModal .kit-builder-brief-card strong {
      color: var(--sa-ink) !important;
      font-weight: 700 !important;
      font-size: .9rem !important;
    }
    #customKitAdvisorModal .kit-builder-modal-section p,
    #customKitAdvisorModal .kit-builder-brief-card span {
      color: var(--sa-ink-3) !important;
      font-size: .92rem !important;
      line-height: 1.55 !important;
    }

    /* Chat shell + log */
    #customKitAdvisorModal .kit-builder-chat-shell {
      background: var(--sa-bg) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 14px !important;
    }
    #customKitAdvisorModal .kit-builder-chat-top {
      background: var(--sa-card) !important;
      border-bottom: 1px solid var(--sa-rule) !important;
    }
    #customKitAdvisorModal .kit-builder-chat-brief h4 {
      color: var(--sa-ink) !important;
      font-size: 1rem !important;
      font-weight: 700 !important;
    }
    #customKitAdvisorModal .kit-builder-chat-brief p {
      color: var(--sa-ink-3) !important;
      font-size: .9rem !important;
      line-height: 1.5 !important;
    }
    #customKitAdvisorModal .kit-builder-chat-meta-pill {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      color: var(--sa-ink-2) !important;
      font-size: .78rem !important;
      font-weight: 600 !important;
    }

    /* Quick-question chips inside the chat */
    #customKitAdvisorModal .kit-builder-chat-quick {
      background: transparent !important;
      gap: 8px !important;
    }
    #customKitAdvisorModal .kit-builder-chat-quick-btn {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
      border-radius: 999px !important;
      padding: .5rem .9rem !important;
      font-weight: 600 !important;
      font-size: .85rem !important;
      min-height: 36px !important;
      transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
    }
    #customKitAdvisorModal .kit-builder-chat-quick-btn:hover {
      background: var(--sa-mint-tint) !important;
      border-color: var(--sa-mint) !important;
      transform: translateY(-1px);
    }
    #customKitAdvisorModal .kit-builder-chat-quick-btn i {
      color: var(--sa-mint-ink) !important;
    }

    /* Chat log + bubbles */
    #customKitAdvisorModal .kit-builder-chat-log {
      background: var(--sa-bg) !important;
      padding: 16px !important;
      gap: 10px !important;
    }
    #customKitAdvisorModal .kit-builder-chat-log .msg,
    #customKitAdvisorModal .kit-builder-chat-log .chat-msg,
    #customKitAdvisorModal .kit-builder-chat-log [class*="-bot"],
    #customKitAdvisorModal .kit-builder-chat-log [class*="-user"] {
      max-width: 88%;
      padding: 10px 14px !important;
      border-radius: 14px !important;
      font-size: .94rem !important;
      line-height: 1.55 !important;
      border: 1px solid var(--sa-rule) !important;
    }
    #customKitAdvisorModal .kit-builder-chat-log [class*="-bot"],
    #customKitAdvisorModal .kit-builder-chat-log .msg.bot,
    #customKitAdvisorModal .kit-builder-chat-log .from-bot {
      background: var(--sa-card) !important;
      color: var(--sa-ink) !important;
      align-self: flex-start;
      border-color: var(--sa-rule) !important;
    }
    #customKitAdvisorModal .kit-builder-chat-log [class*="-user"],
    #customKitAdvisorModal .kit-builder-chat-log .msg.user,
    #customKitAdvisorModal .kit-builder-chat-log .from-user {
      background: var(--sa-mint-tint) !important;
      color: var(--sa-mint-ink) !important;
      align-self: flex-end;
      margin-left: auto;
      border-color: var(--sa-mint-soft) !important;
    }

    /* Chat input */
    #customKitAdvisorModal .kit-builder-chat-form {
      background: var(--sa-card) !important;
      border-top: 1px solid var(--sa-rule) !important;
      padding: 12px !important;
      gap: 10px !important;
    }
    #customKitAdvisorModal .kit-builder-chat-form textarea {
      border: 1px solid var(--sa-rule-2) !important;
      background: var(--sa-card) !important;
      color: var(--sa-ink) !important;
      border-radius: 12px !important;
      font-size: 16px !important;
      line-height: 1.5 !important;
      min-height: 44px !important;
      padding: 11px 14px !important;
    }
    #customKitAdvisorModal .kit-builder-chat-form textarea:focus {
      outline: none !important;
      border-color: var(--sa-mint) !important;
      box-shadow: 0 0 0 3px rgba(95,207,192,.22) !important;
    }
    #customKitAdvisorModal .kit-builder-chat-actions .btn,
    #customKitAdvisorModal .kit-builder-chat-actions button {
      background: var(--sa-mint) !important;
      border-color: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      font-weight: 700 !important;
      min-height: 44px !important;
      padding: .55rem 1.2rem !important;
    }
    #customKitAdvisorModal .kit-builder-chat-actions .btn:hover {
      background: var(--sa-mint-dark) !important;
      border-color: var(--sa-mint-dark) !important;
      color: #fff !important;
    }
    #customKitAdvisorModal .kit-builder-chat-hint {
      color: var(--sa-ink-3) !important;
      font-size: .82rem !important;
      line-height: 1.5 !important;
    }

    /* Status / analysis chip + summary */
    #customKitAdvisorModal .kit-builder-status-chip {
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
      font-weight: 700 !important;
      font-size: .8rem !important;
    }
    #customKitAdvisorModal .kit-builder-summary-label {
      color: var(--sa-mint-ink) !important;
      font-weight: 700 !important;
      font-size: .78rem !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
    }

    /* Review-step advisor block */
    .kit-builder-review-advisor {
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      border-radius: var(--sa-radius) !important;
    }
    .kit-builder-review-advisor h4,
    .kit-builder-review-advisor-copy h4 {
      color: var(--sa-mint-ink) !important;
      font-weight: 700 !important;
    }
    .kit-builder-review-advisor p,
    .kit-builder-review-advisor-copy p {
      color: var(--sa-ink-2) !important;
      line-height: 1.6 !important;
    }
    .kit-builder-review-advisor-shortcut {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
      font-weight: 700 !important;
      transition: background .15s ease, border-color .15s ease;
    }
    .kit-builder-review-advisor-shortcut:hover {
      background: var(--sa-mint) !important;
      border-color: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
    }

    /* Step nav (numbered tabs at the top: 1 Direction, 2 Options, 3 Custom, 4 Review) */
    .kit-builder-step-nav-btn {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      color: var(--sa-ink-3) !important;
      border-radius: 12px !important;
      font-size: .92rem !important;
    }
    .kit-builder-step-nav-btn .step-num,
    .kit-builder-step-nav-btn::before {
      background: var(--sa-bg) !important;
      color: var(--sa-ink-3) !important;
    }
    .kit-builder-step-nav-btn.complete {
      background: var(--sa-mint-tint) !important;
      border-color: var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
    }
    .kit-builder-step-nav-btn.is-active,
    .kit-builder-step-nav-btn.active {
      background: var(--sa-mint) !important;
      border-color: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
      font-weight: 700 !important;
    }

    /* Base-direction kit cards (the row at Step 1: "Air Quality Monitor Kit", etc.) */
    .kit-kit-card {
      background: var(--sa-card) !important;
      background-image: none !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 14px !important;
      color: var(--sa-ink) !important;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease !important;
    }
    .kit-kit-card:hover {
      border-color: var(--sa-mint) !important;
      box-shadow: var(--sa-shadow-sm) !important;
      transform: translateY(-1px);
    }
    .kit-kit-card.selected,
    .kit-kit-card[aria-pressed="true"],
    .kit-kit-card.is-selected,
    .kit-kit-card.is-active {
      background: var(--sa-mint-tint) !important;
      background-image: none !important;
      border-color: var(--sa-mint) !important;
      box-shadow: 0 0 0 2px rgba(95,207,192,.25), var(--sa-shadow-sm) !important;
    }
    .kit-kit-card .kit-kit-card-icon,
    .kit-kit-card [class*="-icon"] {
      background: var(--sa-bg) !important;
      color: var(--sa-mint-ink) !important;
    }
    .kit-kit-card.selected .kit-kit-card-icon,
    .kit-kit-card.selected [class*="-icon"] {
      background: var(--sa-mint) !important;
      color: var(--sa-navy) !important;
    }
    .kit-kit-card h3, .kit-kit-card h4, .kit-kit-card .title {
      color: var(--sa-ink) !important;
      font-weight: 700 !important;
      font-size: 1rem !important;
      line-height: 1.3 !important;
    }
    .kit-kit-card.selected h3, .kit-kit-card.selected h4, .kit-kit-card.selected .title {
      color: var(--sa-mint-ink) !important;
    }
    .kit-kit-card .meta, .kit-kit-card .tag, .kit-kit-card .duration {
      color: var(--sa-ink-3) !important;
      font-size: .85rem !important;
    }

    /* Tip / hint banner inside the builder ("You do not need to know every exact part yet...") */
    .kit-builder-step-tip,
    .kit-step-tip,
    .kit-builder-tip {
      background: var(--sa-mint-tint) !important;
      background-image: none !important;
      border: 1px dashed var(--sa-mint-soft) !important;
      border-radius: 12px !important;
      color: var(--sa-mint-ink) !important;
      font-size: .92rem !important;
      line-height: 1.55 !important;
      padding: 12px 16px !important;
    }
    .kit-builder-step-tip i,
    .kit-step-tip i,
    .kit-builder-tip i {
      color: var(--sa-mint-ink) !important;
    }

    /* Step badge (the "STEP 1" pill above each section title) */
    .kit-builder-step-badge,
    .kit-step-badge,
    .step-pill {
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
      font-weight: 700 !important;
      font-size: .76rem !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
    }

    /* Status / progress dashboard at top of modal (READINESS / COMPLETED / CURRENT FOCUS) */
    .kit-builder-status,
    .kit-builder-readiness,
    .kit-builder-stat,
    .kit-builder-progress {
      background: var(--sa-card) !important;
      border: 1px solid var(--sa-rule) !important;
      border-radius: 12px !important;
    }
    .kit-builder-stat-label,
    .kit-builder-status-label {
      color: var(--sa-ink-3) !important;
      font-size: .76rem !important;
      font-weight: 700 !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
    }
    .kit-builder-stat-value,
    .kit-builder-status-value {
      color: var(--sa-ink) !important;
      font-weight: 700 !important;
      font-size: 1.05rem !important;
    }
    .kit-builder-progress-bar,
    .kit-builder-readiness-bar {
      background: var(--sa-bg) !important;
      border-radius: 999px !important;
      overflow: hidden;
    }
    .kit-builder-progress-bar > *,
    .kit-builder-readiness-bar > *,
    [class*="progress-fill"],
    [class*="readiness-fill"] {
      background: linear-gradient(90deg, var(--sa-mint) 0%, #6FD9CB 100%) !important;
    }

    /* "Preview summary" / "Four-step request flow" header chip in the modal */
    .kit-builder-eyebrow,
    .kit-builder-flow-label,
    .kit-builder-modal-eyebrow {
      background: var(--sa-mint-tint) !important;
      border: 1px solid var(--sa-mint-soft) !important;
      color: var(--sa-mint-ink) !important;
      font-weight: 700 !important;
      font-size: .8rem !important;
      letter-spacing: .12em !important;
    }

    /* Section title row inside the modal body */
    .kit-builder-section-head h2,
    .kit-builder-section-head h3,
    .kit-builder-shell h2,
    .kit-builder-shell h3 {
      color: var(--sa-ink) !important;
      font-weight: 700 !important;
      letter-spacing: -.015em !important;
      line-height: 1.25 !important;
    }
    .kit-builder-section-head p,
    .kit-builder-shell > p {
      color: var(--sa-ink-3) !important;
      font-size: .94rem !important;
      line-height: 1.55 !important;
    }

    /* The AI hint actions row — make it stand out a bit more */
    .kit-builder-ai-step-hint-actions {
      gap: 8px !important;
      margin: 8px 0 14px !important;
    }

    /* Mobile: full-screen modal, larger tap targets */
    @media (max-width: 720px) {
      #customKitAdvisorModal .kit-builder-modal-card {
        max-height: 100dvh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
      }
      #customKitAdvisorModal .kit-builder-modal-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      #customKitAdvisorModal .kit-builder-chat-quick {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
      }
      #customKitAdvisorModal .kit-builder-chat-quick-btn {
        flex: 0 0 auto;
        white-space: nowrap;
      }
      .kit-compass-open-btn {
        width: 100%;
        justify-content: center !important;
        font-size: 1rem !important;
      }
      .kit-builder-ai-step-hint-btn {
        font-size: .9rem !important;
      }
    }