/**
 * Scopione — Dealer Inquiry Stylesheet
 *
 * Dedicated styles for the Dealer Inquiry template (page-dealer.php). Carved out
 * of the old shared contact/dealer sheet in DEALER-1 (made standalone), built out
 * across DEALER-2→16 (full page redesign), then audited + de-crufted in DEALER-A1.
 * Contact has its OWN sheet now (scopione-contact.css); this one is dealer-only.
 *
 * Conditionally enqueued via functions.php — scopione_enqueue_dealer_css() — on
 * page-dealer.php only. Depends on scopione-child.css. filemtime() cache-busting.
 *
 * NOTE: many inline comments still carry historical CONTACT-N / "shared" batch
 * tags from the original carve. They're cosmetic labels — the sheet is NOT shared.
 *
 * @package Scopione_Child
 * @since 1.0.0
 */

/* =========================================================
   CONTACT CHANNEL CARDS (shared: contact + dealer) — CONTACT-4

   Design-system cards: gold icon chip + label + value, mirroring the
   /promotions/ .sc-promo-metric icon-chip (56px circle, 28px line-icon).
   Replaced the old `.media`-based 3-up grid — both templates now render the
   shared sc_contact_render_channels() card row.
   ========================================================= */

.sc-dealer-channels {
  padding: var(--shop-section-gap) 0 clamp(1rem, 2vw, 1.5rem); /* POLISH-4 token rhythm; ENH-3-fix: tighter bottom (badges below) */
  text-align: center;
}

.sc-dealer-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 10px;
  padding: clamp(1.6rem, 2.5vw, 1.85rem) 1.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sc-dealer-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 190, 61, 0.5);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09), 0 0 20px rgba(255, 190, 61, 0.2);
}

.sc-dealer-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.95rem;
  color: var(--sc-yellow);
  background: rgba(255, 190, 61, 0.08);
  border: 1px solid rgba(255, 190, 61, 0.25);
  border-radius: 50%;
}

.sc-dealer-card-icon svg {
  width: 28px;
  height: 28px;
}

.sc-dealer-card-label {
  margin: 0 0 0.4rem;
  font-size: var(--shop-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.62); /* CLEAN-1: WCAG-AAA headroom (was 0.55) */
}

.sc-dealer-card-value {
  margin: 0;
  font-size: var(--shop-body);
  font-weight: 600;
  line-height: 1.45;
  color: #111;
  word-break: break-word;
}

.sc-dealer-card-value a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.sc-dealer-card-value a:hover {
  color: var(--sc-yellow);
  text-decoration: underline;
}

.sc-dealer-card-value a:focus-visible {
  outline: 2px solid var(--sc-yellow);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =========================================================
   CONTACT FORM 7 — SUBMIT BUTTON (shared: contact + dealer)
   ========================================================= */

/* === Scopione Style for Contact Form 7 Submit Button === */
.wpcf7 input.wpcf7-submit.btn-scopione,
.wpcf7 .btn-scopione.wpcf7-submit {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--sc-yellow); /* Scopione Yellow */
  background-image: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.85) 50%, transparent 65%); /* CR2: brighter band so the hover sweep reads as a crisp shine on the dark hover bg */
  background-repeat: no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0; /* POLISH-2: shine band parked off-screen right */
  color: var(--sc-dark);         /* Dark text */
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 1.25rem 0;
  text-decoration: none;
  border: 2px solid transparent; /* CR2-fix: 2px (was 1px) so the gold hover border reads as a distinct outline instead of blending into the glow; no-shift via BS border-box */
  border-radius: 8px;  /* same rounded corners as Back-to-Top */
  box-shadow: 0 6px 18px color-mix(in srgb, var(--sc-yellow) 32%, transparent); /* POLISH-2: gold glow (was a dark inset shadow that read as 'sinking in') */
  margin: 1.5rem auto; /* equal spacing above and below */
  position: relative;
  z-index: 5;
  opacity: 1 !important;
  transform: none !important;
  transition: background-color 0.3s ease, background-position 0.7s ease, box-shadow 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

/* Hover = same animation and highlight as .back-top-wide */
.wpcf7 input.wpcf7-submit.btn-scopione:hover,
.wpcf7 .btn-scopione.wpcf7-submit:hover {
  background-color: var(--sc-dark); /* CR2: invert gold→dark on hover so the white text + white shine band read (was lighter gold) */
  background-position: -50% 0; /* sweep the white shine band across the now-dark pill */
  color: #fff; /* CR2: text black→white on hover */
  border-color: var(--sc-yellow); /* CR2: gold outline on the dark pill (echoes the /about/ CTA's dark+gold state) */
  box-shadow: 0 0 25px color-mix(in srgb, var(--sc-yellow) 60%, transparent), 0 10px 40px color-mix(in srgb, var(--sc-yellow) 30%, transparent); /* gold-halo glow */
}

/* Focus accessibility ring */
.wpcf7 input.wpcf7-submit.btn-scopione:focus-visible,
.wpcf7 .btn-scopione.wpcf7-submit:focus-visible {
  outline: 2px solid var(--sc-dark);
  outline-offset: -3px;
}

/* Optional max-width for large screens (keeps it elegant) */
/* Default: full width on phones */
.wpcf7 input.wpcf7-submit.btn-scopione,
.wpcf7 input.wpcf7-submit.btn-scopione-cta {
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* Optional max-width for medium screens (tablet & up) */
@media (min-width: 576px) {
  .wpcf7 input.wpcf7-submit.btn-scopione,
  .wpcf7 input.wpcf7-submit.btn-scopione-cta {
    max-width: 480px;  /* ~60% of .col-lg-8 */
  }
}

/* Large desktop screens — keep it elegant & centered */
@media (min-width: 992px) {
  .wpcf7 input.wpcf7-submit.btn-scopione,
  .wpcf7 input.wpcf7-submit.btn-scopione-cta {
    max-width: 420px;  /* keeps form CTA compact */
  }
}

/* =========================================================
   CONTACT FORM 7 — PREMIUM FORM STYLING (shared: contact + dealer)
   ========================================================= */

/* Scopione CF7 Premium Form Styling.
   CONTACT-8: the form is now wrapped in `.scopione-form-wrap` (was dormant —
   the styling existed but no markup carried the class). Centered + max-width,
   and the form-section is a WHITE card so it pops on the gray `.bg-light`
   section (was #f9f9f9 ≈ the section bg, so it didn't read as a card). */
.scopione-form-wrap {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* DEALER-A4 / A7: the dealer CF7 form groups fields in <fieldset><legend> (the two
   section headings are <legend><h3>). A7 — the gold accent is now a FIXED-WIDTH
   centered bar (::after), NOT a text-width `border-bottom`: on a narrow screen the
   long heading ("Company Details & Primary Contact Information") filled the container,
   so the underline went full-width and sat too tight to the title + the field below.
   A 56px bar is length-independent — tidy + centered at every width, with room above
   (0.85rem) and below (legend margin) regardless of whether the title wraps. */
.scopione-form-wrap fieldset legend h3 {
  color: var(--sc-dark);
  display: block;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
}
.scopione-form-wrap fieldset legend h3::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 0.85rem auto 0;
  background: var(--sc-yellow);
  border-radius: 999px;
}
.scopione-form-wrap fieldset legend {
  margin-bottom: 1.35rem;
}

.scopione-form-wrap label {
  font-weight: 600;
  margin-bottom: .25rem;
}

.scopione-form-wrap .form-text.text-muted {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  color: #666;
}

.scopione-form-wrap input[type="text"],
.scopione-form-wrap input[type="email"],
.scopione-form-wrap input[type="url"],
.scopione-form-wrap input[type="tel"],
.scopione-form-wrap input[type="number"],
.scopione-form-wrap select,
.scopione-form-wrap textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 46px; /* DEALER-8: was an intrinsic 38px → content box 16px === font-size, so native <select> clipped its text's descenders. 46px gives a 24px content box (clears the glyphs) and keeps inputs + selects the same height in the 2-col rows. */
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.scopione-form-wrap textarea { min-height: 120px; }

.scopione-form-wrap input:focus,
.scopione-form-wrap select:focus,
.scopione-form-wrap textarea:focus {
  border-color: var(--sc-yellow);
  box-shadow: 0 0 0 3px rgba(255,190,61,.25);
  outline: none;
}

.scopione-form-wrap .text-danger { color: #c62828; }

.btn-scopione {
  background: var(--sc-yellow);
  color: var(--sc-dark);
  border-radius: 999px;
  border: none;
  padding: 12px 22px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(255,190,61,.35);
  transition: transform .06s ease, box-shadow .2s ease;
}

.btn-scopione:hover,
.btn-scopione:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255,190,61,.45);
}

/* Mobile spacing */
@media (max-width: 767.98px) {
  .scopione-form-wrap .form-group { margin-bottom: 1.1rem; }
  .btn-scopione { width: 100%; }
}

/* Scopione CF7 submit button behavior */
.wpcf7 input.wpcf7-submit.btn-scopione:disabled,
.wpcf7 input.wpcf7-submit.btn-scopione[disabled] {
  cursor: not-allowed !important;     /* Stop sign cursor */
  opacity: 0.6;                       /* Slightly faded to indicate inactive */
  pointer-events: auto;               /* Ensure cursor still shows */
  transition: opacity 0.3s ease;
}

/* Restore normal state when enabled */
.wpcf7 input.wpcf7-submit.btn-scopione:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.wpcf7-not-valid {
  border-color: var(--sc-yellow); /* Scopione yellow for invalid highlight */
  box-shadow: 0 0 0 2px rgba(255, 190, 61, 0.2);
}

/* CF7 response messages */
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 0;
  font-weight: 600;
}

.wpcf7 form.sent .wpcf7-response-output {
  background: #e7f7ea;
  color: #155724;
  box-shadow: inset 0 0 0 3px rgba(21,87,36,.15);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  background: #fdecea;
  color: #7f1d1d;
  box-shadow: inset 0 0 0 3px rgba(127,29,29,.12);
}

/* Consent checkbox alignment */
.scopione-form-wrap .consent-wrap {
  text-align: left;
  display: inline-block;
  max-width: 720px;
}

.form-check-label {
  font-size: 0.95rem;
  line-height: 1.5;
}
.form-check-input {
  margin-top: 0.2rem;
}
.form-check a {
  color: #333333;
  text-decoration: underline;
}
.form-check a:hover {
  text-decoration: none;
  color: var(--sc-yellow);
}
.form-check a:focus-visible { /* DEALER-A2: was the one interactive element with no focus ring */
  outline: 2px solid var(--sc-yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================================
   IN-CONTENT BODY RULES (.sc-info-body) — ported from scopione-pages.css

   The dealer intro lead renders an ACF wysiwyg into `.sc-info-body` (scopione-
   pages.css is de-leaked off this template, so the subset that body actually
   uses is ported here): long-form type rhythm (p/li) + brand-styled in-content
   links. DEALER-A1 removed the image / figure / figcaption / aligned-media
   rules — the intro wysiwyg is registered `media_upload => 0`, so they were
   dead (no images/captions can ever render).
   ========================================================= */

/* Readability: type rhythm for long-form bodies */
.sc-info-body :where(p, li) {
  line-height: 1.7;
}
.sc-info-body :where(li) {
  margin-bottom: .35em;
}

/* In-content links: brand-aligned gold underline + hover */
.sc-info-body :where(p, li, td, dd) a:not(.button):not(.wp-block-button__link):not(.kb-button) {
  text-decoration-line: underline;
  text-decoration-color: rgba(255,190,61,.45);
  text-underline-offset: .18em;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color .15s ease;
}
.sc-info-body :where(p, li, td, dd) a:not(.button):not(.wp-block-button__link):not(.kb-button):hover {
  text-decoration-color: #ffbe3d;
}
.sc-info-body :where(p, li, td, dd) a:not(.button):not(.wp-block-button__link):not(.kb-button):focus-visible {
  outline: 2px solid #ffbe3d;
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================================
   CONTACT HERO — design-system treatment (CONTACT-5 + CONTACT-6)

   Layered ON TOP of the shared `.shop-header` hero (so other templates that
   use .shop-header are untouched). CONTACT-6 (Stan ask): the breadcrumb +
   title block now matches /about/ + /promotions/ exactly — an uppercase,
   letter-spaced breadcrumb trail + a gold-rule divider UNDER the breadcrumbs,
   and the H1 uses the same clamp/weight/tracking + a matching gold underline
   (the H1 sits centred between the two gold rules). The eyebrow is kept but
   hidden by default (Stan removed "GET IN TOUCH"; the ACF field stays for
   future use). `text-white-50` was removed from the tagline markup so this
   rule controls its colour.

   `--sc-gold-rule` + the breadcrumb styles are redefined here because
   about.css / promotions.css (which define them on :root) don't load on
   /contact-us/.
   ========================================================= */

.sc-dealer-hero {
  --sc-gold-rule: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--sc-yellow) 30%, transparent) 30%,
    color-mix(in srgb, var(--sc-yellow) 50%, transparent) 50%,
    color-mix(in srgb, var(--sc-yellow) 30%, transparent) 70%,
    transparent
  );
}

/* Breadcrumb trail — uppercase, letter-spaced, dim white, gold hover. */
.sc-dealer-hero .scopione-breadcrumbs {
  margin: 0;
  font-size: var(--shop-small);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65); /* DEALER-A2: 0.52 → 0.65 (comfortable AA on the dark hero) */
}

.sc-dealer-hero .scopione-breadcrumbs .yoast-breadcrumbs {
  display: inline-block;
}

.sc-dealer-hero .scopione-breadcrumbs a,
.sc-dealer-hero .scopione-breadcrumbs a:visited {
  color: rgba(255, 255, 255, 0.65); /* DEALER-A2: 0.55 → 0.65 (comfortable AA) */
  text-decoration: none;
  transition: color 0.2s ease;
}

.sc-dealer-hero .scopione-breadcrumbs a:hover,
.sc-dealer-hero .scopione-breadcrumbs a:focus-visible {
  color: var(--sc-yellow);
}

.sc-dealer-hero .scopione-breadcrumbs a:focus-visible {
  outline: 2px solid var(--sc-yellow);
  outline-offset: 2px;
}

.sc-dealer-hero .scopione-breadcrumbs .yoast-breadcrumbs span.separator {
  margin: 0 0.35em;
  color: rgba(255, 255, 255, 0.62);
}

.sc-dealer-hero .scopione-breadcrumbs .breadcrumb_last,
.sc-dealer-hero .scopione-breadcrumbs .breadcrumb_last strong {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
}

/* Gold rule UNDER the breadcrumbs (Stan: "yellow line under the breadcrumbs"). */
.sc-dealer-hero .scopione-breadcrumbs::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 280px;
  height: 1px;
  margin: 1rem auto 1rem;
  background: var(--sc-gold-rule);
}

/* Eyebrow — hidden by default (empty value); kept for ACF re-enable. */
.sc-dealer-hero .sc-dealer-eyebrow {
  margin: 0 0 0.6rem;
  font-size: var(--shop-small);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sc-yellow);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* H1 — same clamp + weight + tracking as /about/'s .about-hero-headline. */
.sc-dealer-hero h1 {
  display: inline-block;
  position: relative;
  margin: 0 0 0.85rem;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--shop-h1);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

/* Gold underline under the H1 — shares the --sc-gold-rule gradient with the
   breadcrumb rule, so the H1 sits centred between the two. */
.sc-dealer-hero h1::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 280px;
  height: 1px;
  margin: 1rem auto 0;
  background: var(--sc-gold-rule);
}

.sc-dealer-hero .sc-dealer-hero-tagline {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--shop-body);
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 767.98px) {
  .sc-dealer-hero .scopione-breadcrumbs::after,
  .sc-dealer-hero h1::after {
    max-width: 180px;
  }
}

@media (max-width: 600px) {
  .sc-dealer-hero .scopione-breadcrumbs::after {
    margin: 1rem auto 0.6rem;
  }
  .sc-dealer-hero h1::after {
    margin-top: 0.6rem;
  }
}

/* =========================================================
   SCROLL-REVEAL FADES (CONTACT-10)

   Pure-CSS `animation-timeline: view()` section fade-ins, matching the
   cross-surface FADE-READABILITY pattern (about/shop/promotions): opacity
   floor 0.6 (never washes out mid-reveal), ≥768px gate (no fade on phones),
   `@supports` gate (parsed-but-inert on browsers without view-timelines →
   content renders at full opacity), reduced-motion respected via the
   no-preference media query.

   All faded sections here are light-bg (white / .bg-light), so fade-up
   (opacity + translateY) is safe — the translateY gap only ever reveals the
   white body bg. The dark hero is intentionally excluded (above the fold, and
   a translateY there would expose a color boundary — Trap #50). Scoped to
   .page-template-page-dealer so /dealer/ (shared sheet) is unaffected.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  @supports (animation-timeline: view()) {
    .page-template-page-dealer section.bg-light,
    .page-template-page-dealer .sc-dealer-channels {
      animation: sc-dealer-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    @keyframes sc-dealer-fade-up {
      from {
        opacity: 0.6;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

/* =========================================================
   SCROLL-PROGRESS GOLD BAR — "top yellow bar" (POLISH-1)

   2px gold bar pinned to the viewport top; its width tracks scroll depth via
   pure-CSS `animation-timeline: scroll(root)`. Replicates /about/
   (scopione-about.css). Gated ≥768px + `@supports` + reduced-motion → a clean
   no-op on phones / older browsers / reduced-motion. Contact-only (the body
   class is `page-template-page-dealer`; /dealer/ is excluded).
   ========================================================= */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  @supports (animation-timeline: scroll(root)) {
    .page-template-page-dealer::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--sc-yellow);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: sc-dealer-scroll-progress linear forwards;
      animation-timeline: scroll(root);
      z-index: 9999;
      pointer-events: none;
      box-shadow: 0 0 8px color-mix(in srgb, var(--sc-yellow) 60%, transparent);
    }

    @keyframes sc-dealer-scroll-progress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}

/* =========================================================
   SHINE SWEEPS + HOVER GLOW (POLISH-2)

   Diagonal shine sweep on hover, in the spirit of /about/'s scReviewShine — but
   GOLD-tinted (not white): the contact cards are pure #fff, so a white sweep
   would be invisible on them (Trap #54 — effects tuned for one bg don't
   translate). Desktop fine-pointer ≥992px only (no motion on touch); reduced-
   motion users keep the static cards. The cards are <div>s
   (support ::after); the CF7 submit is an <input> (no pseudo) → its shine is a
   background-position sweep in the button rules above.
   ========================================================= */

.sc-dealer-card::after,
.sc-dealer-trust-panel::after,
.sc-dealer-feature::after,
.sc-dealer-benefit-card::after,
.sc-dealer-audience-card::after,
.sc-dealer-advantage-panel::after,
.sc-dealer-intro-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(75deg, transparent 40%, rgba(255, 190, 61, 0.3) 50%, transparent 60%);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 3;
}

@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .sc-dealer-card:hover::after,
  .sc-dealer-trust-panel:hover::after,
  .sc-dealer-feature:hover::after,
  .sc-dealer-benefit-card:hover::after,
  .sc-dealer-audience-card:hover::after,
  .sc-dealer-advantage-panel:hover::after,
  .sc-dealer-intro-inner:hover::after {
    animation: sc-dealer-shine 2.4s ease-out forwards;
  }
}

@keyframes sc-dealer-shine {
  0%   { opacity: 0; transform: translateX(-100%); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

/* =========================================================
   REDUCED-MOTION (CLEAN-1) — the scroll bar and scroll-fades are already
   gated elsewhere; this neutralises the remaining MOTION: the diagonal shine
   sweeps, the submit button's background-position sweep, and the hover-lift
   transforms. Colour, shadow and border hover feedback are intentionally kept
   (those are not motion).
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .sc-dealer-card::after,
  .sc-dealer-trust-panel::after,
  .sc-dealer-feature::after,
  .sc-dealer-benefit-card::after,
  .sc-dealer-audience-card::after,
  .sc-dealer-advantage-panel::after,
  .sc-dealer-intro-inner::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .wpcf7 input.wpcf7-submit.btn-scopione,
  .wpcf7 input.wpcf7-submit.btn-scopione:hover {
    background-position: 150% 0 !important; /* park the shine band — no sweep */
  }
  .sc-dealer-card:hover,
  .sc-dealer-trust-panel:hover,
  .sc-dealer-feature:hover,
  .sc-dealer-benefit-card:hover,
  .sc-dealer-audience-card:hover,
  .sc-dealer-advantage-panel:hover,
  .sc-dealer-advantage-panel:hover .sc-dealer-advantage-icon,
  .sc-dealer-advantage-panel:hover .sc-dealer-advantage-pillar-icon,
  .sc-dealer-intro-inner:hover,
  .sc-about-metric:hover,
  .sc-about-metric:hover::before {
    transform: none !important;
  }
}

/* DEALER-A2 — Touch devices: neutralise the hover lift so it doesn't "stick" after a
   tap (the shine ::after is already hover-gated; this handles the lift/border/shadow).
   The 4 cards + trust panel share one base border/shadow → reset all three; the
   advantage + intro panels (different base) just drop the lift. */
@media (hover: none) {
  .sc-dealer-card:hover,
  .sc-dealer-trust-panel:hover,
  .sc-dealer-feature:hover,
  .sc-dealer-benefit-card:hover,
  .sc-dealer-audience-card:hover {
    transform: none;
    border-color: rgba(17, 17, 17, 0.09);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  .sc-dealer-advantage-panel:hover,
  .sc-dealer-advantage-panel:hover .sc-dealer-advantage-icon,
  .sc-dealer-advantage-panel:hover .sc-dealer-advantage-pillar-icon,
  .sc-dealer-intro-inner:hover,
  .sc-about-metric:hover,
  .sc-about-metric:hover::before {
    transform: none;
  }
}

/* =========================================================
   DESIGN-SYSTEM TYPE + SPACING TOKENS (POLISH-3 / POLISH-4)

   The /about/ + /promotions/ + /shop/ type/spacing scale lives in the :root of
   THOSE sheets, which don't load on /contact-us/ (or /dealer/) — so the tokens
   are undefined here. Define them locally (scoped to both page-template body
   classes; CSS vars inherit) so the contact elements match the canonical scale
   exactly. Values verbatim from scopione-about.css:17–33.
   ========================================================= */
.page-template-page-dealer {
  --shop-h1: clamp(1.9rem, 4.5vw, 2.75rem);
  --shop-h2: clamp(1.55rem, 3.2vw, 2.1rem);
  --shop-card-title: clamp(1.2rem, 1.7vw, 1.3rem); /* DEALER-13: unified card/sub-title tier — was hardcoded 1.15rem (benefit, advantage tagline) + 1.25rem (audience). ~19.2-20.8px, a clear step above --shop-body. */
  --shop-body: clamp(1rem, 1.5vw, 1.1rem);
  --shop-small: clamp(0.8rem, 1.2vw, 0.9rem);
  --shop-section-gap: clamp(2rem, 3.5vw, 2.75rem); /* DEALER-16: tightened between-section rhythm — was 3–4rem (48–64px → ~128px gaps); now 32–44px (~88px gaps) to cut unnecessary space. Drives intro/why/benefits/advantage/audience + channels-top + final-cta + reviews-bottom. */
  /* CLEAN-1: removed unused --shop-section-gap-sm (defined, never referenced). */
}

/* =========================================================
   FORM-AREA POLISH (ENH-2: items 5–7)
   Targets the CF7 form 96 markup (acceptance checkbox + submit <p> + the
   response-time <p class="text-muted">), all inside .scopione-form-wrap.
   (Item 4 — the section-heading size — moved up into the `fieldset legend h3`
   rule when DEALER-A4 retired the dead `.form-section` selectors.)
   ========================================================= */

/* Item 6 — more space between the form card and the SEND YOUR MESSAGE pill;
   Item 7 — less space below the pill (down to the response-time line). */
.scopione-form-wrap .wpcf7-form p:has(input.wpcf7-submit) {
  margin: 2.5rem 0 0.5rem;
}

/* Item 7 — tighten the response-time line to the pill + enlarge it. */
.scopione-form-wrap .wpcf7-form p.text-muted {
  margin-top: 0 !important;
}
.scopione-form-wrap .wpcf7-form p.text-muted br {
  display: none;
}
.scopione-form-wrap .wpcf7-form small {
  font-size: 0.95rem;
}

/* Item 5 — center the consent block + a gold checkbox (accent-color) on all screens. */
.scopione-form-wrap .form-group.form-check {
  padding-left: 0;
  text-align: center;
}
/* DEALER-A5: block (not inline-block) so a SHORT consent line (e.g. the 1-line
   marketing opt-in) still fills the 620px and its checkbox lines up with the longer
   terms/privacy rows — `margin: 0 auto` keeps the block centered in the form. */
.scopione-form-wrap .form-check .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}
.scopione-form-wrap .form-check .form-check-input {
  flex: 0 0 auto;
  position: static;
  width: 16px;
  height: 16px;
  margin: 0.15rem 0 0; /* ENH-3-fix: flex gap handles the gap to the text */
  accent-color: var(--sc-yellow);
}

/* ENH-3-fix: consent checkbox to the LEFT of the text (flex row), block stays centred. */
.scopione-form-wrap .form-check .wpcf7-list-item > label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
}
.scopione-form-wrap .form-check .wpcf7-list-item-label {
  flex: 1 1 auto;
}

/* =========================================================
   TRUST BADGES (ENH-3) — "Scopione by the numbers" above the footer.

   Rendered by sc_about_render_trust_metrics() (reuses /about/'s renderer →
   defaults here). The `.sc-about-metric*` rules are a self-contained copy of
   scopione-about.css (about.css doesn't load on /contact-us/), with literal
   values instead of about's tokens. Icons are the same Lucide line-art SVGs.
   No count-up JS here → the static "20+" / "25,000+" values render as-is.
   ========================================================= */

.sc-dealer-trust {
  padding: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(1.5rem, 3vw, 2.5rem); /* ENH-3-fix tighter top; DEALER-16: trim bottom (was 2–3.5rem / 56px) to reduce the gap down to the final CTA */
}

.sc-dealer-trust-panel {
  position: relative;   /* CR2: clip the shine ::after + adopt the .sc-dealer-card system */
  overflow: hidden;
  max-width: none; /* ENH-3-fix: fill the container so it matches the cards width above */
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2.5rem);
  background: #fff;       /* CR2: white pillow (was #f8f8f8) */
  border: 1px solid rgba(17, 17, 17, 0.09);    /* CR2: same border as .sc-dealer-card */
  border-radius: 10px;    /* CR2: match the cards (was 14px) */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);  /* CR2: same resting shadow as .sc-dealer-card */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* CR2: same hover lift + gold glow as .sc-dealer-card (gated so touch taps don't stick). */
@media (hover: hover) and (pointer: fine) {
  .sc-dealer-trust-panel:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 190, 61, 0.5);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09), 0 0 20px rgba(255, 190, 61, 0.2);
  }
}

@media (max-width: 767.98px) {
  .sc-dealer-trust-panel {
    padding: clamp(1.25rem, 4vw, 1.6rem) 1rem; /* CR2: keep the white card on mobile (was transparent), tighter padding */
  }
}

.sc-about-metric {
  transition: transform 0.25s ease;
}

.sc-about-metric:hover {
  transform: translateY(-2px);
}

.sc-about-metric::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 0.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sc-about-metric:hover::before {
  opacity: 1;
  transform: translateY(-2px);
}

.sc-about-metric[data-metric-icon="years"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffbe3d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Ccircle cx='8' cy='14' r='0.6' fill='%23ffbe3d'/%3E%3Ccircle cx='12' cy='14' r='0.6' fill='%23ffbe3d'/%3E%3Ccircle cx='16' cy='14' r='0.6' fill='%23ffbe3d'/%3E%3Ccircle cx='8' cy='17.5' r='0.6' fill='%23ffbe3d'/%3E%3Ccircle cx='12' cy='17.5' r='0.6' fill='%23ffbe3d'/%3E%3C/svg%3E");
}

.sc-about-metric[data-metric-icon="parts"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffbe3d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3Cpath d='M7.5 4.21l9 5.19'/%3E%3C/svg%3E");
}

.sc-about-metric[data-metric-icon="models"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffbe3d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%23ffbe3d'/%3E%3Cline x1='10' y1='12' x2='3' y2='12'/%3E%3Cline x1='14' y1='12' x2='21' y2='12'/%3E%3Cline x1='12' y1='14' x2='12' y2='21'/%3E%3C/svg%3E");
}

.sc-about-metric[data-metric-icon="countries"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffbe3d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.sc-about-metric[data-metric-icon="default"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffbe3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}

/* CR2-fix: the gold metric icons now show on small screens too (Stan) — the
   small-screen `display:none` hide rule on .sc-about-metric::before was removed
   so the base `display:block` governs on every breakpoint. */

.sc-about-metric .sc-about-metric-value {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}

.sc-about-metric .sc-about-metric-label {
  margin-bottom: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.62); /* CLEAN-1: WCAG-AAA headroom (was 0.55) */
}

/* =========================================================
   DEALER CONTENT SECTIONS (DEALER-2) — intro · why-partner ·
   distributor benefits · advantage · audience. Promotions-style
   components on the local --shop-* tokens.
   ========================================================= */

.sc-dealer-section-head {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.sc-dealer-h2 {
  margin: 0 0 0.75rem;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--shop-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sc-dark);
  text-wrap: balance;
}
.sc-dealer-lead {
  margin: 0;
  font-size: var(--shop-body);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
}

/* Intro lead — DEALER-9: the brand statement now floats in a white card on the
   band. Border + soft shadow keep it reading as a card on BOTH the gray (≥992)
   and white (<992) band; balanced section padding centers it; a short gold rule
   above the text gives the statement a focal accent. */
.sc-dealer-intro {
  padding: var(--shop-section-gap) 0;
}
.sc-dealer-intro-inner {
  position: relative;          /* DEALER-10: host the shine ::after + adopt the trust-panel hover */
  overflow: hidden;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--shop-body);
  line-height: 1.7;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 10px;  /* DEALER-15: unified to the 10px card radius (was 14px) */
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* DEALER-10: eyebrow kicker + heading (the statement card's title). */
.sc-dealer-intro-eyebrow {
  display: block;
  margin: 0 0 0.5rem;
  font-size: var(--shop-small);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a6500; /* DEALER-A2: darker accessible gold — bright #ffbe3d was ~1.6:1 on the white card (WCAG fail); this is ~5.3:1. Bright gold stays on dark panels / icon fills. */
}
.sc-dealer-intro-heading {
  margin: 0 0 1rem;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--shop-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sc-dark);
}
.sc-dealer-intro-inner p { margin: 0; }
/* DEALER-10: same hover lift + gold glow as the trust-badges panel (gated off touch). */
@media (hover: hover) and (pointer: fine) {
  .sc-dealer-intro-inner:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 190, 61, 0.5);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09), 0 0 20px rgba(255, 190, 61, 0.2);
  }
}

/* DEALER-8: alternating section bands on large screens (≥992px). The intro lead
   and the "Ready to Partner" final CTA get the same soft gray (#f8f8f8) as the
   Distributor Benefits band, to separate them from the adjacent white blocks.
   Desktop-only per Stan — on stacked mobile the banding isn't needed. */
@media (min-width: 992px) {
  .sc-dealer-intro,
  .sc-dealer-final-cta {
    background: #f8f8f8;
  }
}

/* Why Partner — feature grid */
.sc-dealer-why { padding: var(--shop-section-gap) 0; }
.sc-dealer-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;          /* DEALER-A3: it's a <ul> now — drop the default list padding/bullets */
  list-style: none;
}
.sc-dealer-feature {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 10px;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sc-dealer-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 190, 61, 0.5);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09), 0 0 20px rgba(255, 190, 61, 0.2);
}
.sc-dealer-feature-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--sc-yellow);
  background: rgba(255, 190, 61, 0.08);
  border: 1px solid rgba(255, 190, 61, 0.25);
  border-radius: 50%;
}
.sc-dealer-feature-icon svg { width: 26px; height: 26px; }
.sc-dealer-feature-text {
  margin: 0;
  font-size: var(--shop-body);
  font-weight: 600;
  line-height: 1.4;
  color: #1a1a1a;
}

/* Distributor Benefits — perk cards on a soft band */
.sc-dealer-benefits {
  padding: var(--shop-section-gap) 0;
  background: #f8f8f8;
}
.sc-dealer-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 1100px;
  margin: 0 auto;
}
.sc-dealer-benefit-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 10px;
  padding: clamp(1.4rem, 2.5vw, 1.85rem);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sc-dealer-benefit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 190, 61, 0.5);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09), 0 0 20px rgba(255, 190, 61, 0.2);
}
.sc-dealer-benefit-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.sc-dealer-benefit-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;  /* DEALER-A8: was 38px (the smallest icons on the page next to the largest title) — matched to the why-card icons */
  height: 52px;
  color: var(--sc-yellow);
  background: rgba(255, 190, 61, 0.1);
  border-radius: 50%;
}
.sc-dealer-benefit-check svg { width: 26px; height: 26px; } /* DEALER-A8: was 21px — scaled with the 52px circle */
.sc-dealer-benefit-title {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: var(--shop-card-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--sc-dark);
}
.sc-dealer-benefit-desc {
  margin: 0;
  font-size: var(--shop-body);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
}

/* The Advantage — dark accent panel */
.sc-dealer-advantage { padding: var(--shop-section-gap) 0; }
.sc-dealer-advantage-panel {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255, 190, 61, 0.12) 0%, rgba(0, 0, 0, 0) 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 9px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 10px),
    linear-gradient(180deg, #141414, #0c0c0c);
  border: 1px solid rgba(255, 190, 61, 0.18);
  border-radius: 10px;  /* DEALER-15: unified to the 10px card radius (was 14px) */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.sc-dealer-advantage-panel .sc-dealer-h2 { color: #fff; }
.sc-dealer-advantage-body {
  font-size: var(--shop-body);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.sc-dealer-advantage-body p { margin: 0 0 1rem; }
.sc-dealer-advantage-body p:last-child { margin-bottom: 0; }
.sc-dealer-advantage-tagline {
  margin: 1.25rem 0 0 !important;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: var(--shop-card-title);
  font-weight: 700;
  color: var(--sc-yellow) !important;
}

/* DEALER-7: the Advantage panel becomes interactive. position+overflow host the
   gold shine ::after (added to the shine group above); transition powers the
   hover pop. A gold trophy icon sits above the heading and scales on hover. */
.sc-dealer-advantage-panel {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.sc-dealer-advantage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.1rem;
  color: var(--sc-yellow);
  background: rgba(255, 190, 61, 0.1);
  border: 1px solid rgba(255, 190, 61, 0.28);
  border-radius: 50%;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sc-dealer-advantage-icon svg { width: 32px; height: 32px; }
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .sc-dealer-advantage-panel:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 190, 61, 0.45);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 190, 61, 0.18);
  }
  .sc-dealer-advantage-panel:hover .sc-dealer-advantage-icon,
  .sc-dealer-advantage-panel:hover .sc-dealer-advantage-pillar-icon {
    transform: scale(1.08);
    border-color: rgba(255, 190, 61, 0.55);
    box-shadow: 0 0 22px rgba(255, 190, 61, 0.25);
  }
}

/* Who Can Benefit — audience cards */
.sc-dealer-audience { padding: var(--shop-section-gap) 0; }
.sc-dealer-audience-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 10px;
  padding: clamp(1.75rem, 3vw, 2.25rem) 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sc-dealer-audience-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 190, 61, 0.5);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09), 0 0 20px rgba(255, 190, 61, 0.2);
}
.sc-dealer-audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  color: var(--sc-yellow);
  background: rgba(255, 190, 61, 0.08);
  border: 1px solid rgba(255, 190, 61, 0.25);
  border-radius: 50%;
}
.sc-dealer-audience-icon svg { width: 30px; height: 30px; }
.sc-dealer-audience-title {
  margin: 0 0 0.5rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: var(--shop-card-title);
  font-weight: 700;
  color: var(--sc-dark);
}
.sc-dealer-audience-desc {
  margin: 0;
  font-size: var(--shop-body);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.65);
}

/* Responsive: feature/benefit grids collapse */
@media (max-width: 767.98px) {
  .sc-dealer-feature-grid,
  .sc-dealer-benefit-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .sc-dealer-feature-grid,
  .sc-dealer-benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   FINAL CTA (DEALER-3) — closing re-prompt + gold button.
   ========================================================= */
.sc-dealer-final-cta {
  padding: var(--shop-section-gap) 0 calc(var(--shop-section-gap) + 0.5rem);
  text-align: center;
}
.sc-dealer-final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.sc-dealer-final-cta-title {
  margin: 0 0 0.75rem;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--shop-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sc-dark);
  text-wrap: balance;
}
.sc-dealer-final-cta-text {
  margin: 0 0 1.75rem;
  font-size: var(--shop-body);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
}
.sc-dealer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--sc-yellow);
  color: var(--sc-dark);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2.25rem;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--sc-yellow) 32%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.sc-dealer-cta-btn:hover {
  background-color: var(--sc-dark);
  color: #fff;
  border-color: var(--sc-yellow);
  box-shadow: 0 0 25px color-mix(in srgb, var(--sc-yellow) 60%, transparent), 0 10px 40px color-mix(in srgb, var(--sc-yellow) 30%, transparent);
}
.sc-dealer-cta-btn:focus-visible {
  outline: 2px solid var(--sc-dark);
  outline-offset: 3px;
}

/* Hero CTA (DEALER-4) — the gold button in the dark hero */
.sc-dealer-hero-cta-wrap { margin-top: 1.75rem; }
.sc-dealer-hero .sc-dealer-cta-btn {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 6px 18px color-mix(in srgb, var(--sc-yellow) 30%, transparent);
}

/* =========================================================
   DEALER-6 — RUNNING TICKER + SCOPIONE REVIEWS (above the footer)

   Bottom-of-page social-proof run: [final CTA] -> ticker -> reviews -> footer.
   - Ticker rules restored here (were carved-out dead code pruned in DEALER-5;
     now a live feature). Self-contained (local --sc-* vars, rgba literals).
   - Reviews block ported from /about/ (scopione-about.css); the wrapper +
     .review-card cards are rendered by the SHARED sc_shop_render_testimonials()
     (same 3-random testimonial source as /about/ + /shop/). About-specific
     tokens replaced with literals so the block needs no about/shop-text tokens.
   ========================================================= */

/* ---- Running ticker (restored; ported from /shop/ via contact) ---- */
.sc-shop-ticker{
  --sc-speed: 20s;
  --sc-pad-y: 16px;
  --sc-font: 21px;

  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  position: relative;
  display: block;
  overflow: hidden;
  z-index: 2;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  background:
    radial-gradient(120% 180% at 50% 35%, rgba(255,190,61,.10) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(10,10,10,.985), rgba(20,20,20,.985)),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.030) 0px,
      rgba(255,255,255,.030) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 9px
    ),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,.40) 0px,
      rgba(0,0,0,.40) 3px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 10px
    );

  border: 0 !important;
  outline: 0 !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); /* CR2: dropped the 18px drop-shadow + bottom inset line so the ticker sits flush above the footer (kept only the faint top highlight) */

  padding: var(--sc-pad-y) 0;
  box-sizing: border-box;
}

.sc-shop-ticker * { box-sizing: inherit; }

.sc-shop-ticker::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,0) 58%,
      rgba(0,0,0,.52) 100%
    ),
    linear-gradient(90deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,0) 16%,
      rgba(0,0,0,0) 84%,
      rgba(0,0,0,.92) 100%
    );
}

.sc-shop-ticker::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  top: 50%;
  height: 66%;
  transform: translateY(-50%);
  pointer-events:none;
  z-index:0;
  background: radial-gradient(60% 90% at 50% 45%, rgba(255,255,255,.06), rgba(255,255,255,0) 65%);
  opacity: .72;
}

.sc-shop-ticker__wrap{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:center;
  width:100%;
  overflow:hidden;
}

.sc-shop-ticker__track{
  display:flex;
  width:max-content;
  animation: scShopTickerLux var(--sc-speed) linear infinite;
}

@keyframes scShopTickerLux{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (hover:hover) and (pointer:fine){
  .sc-shop-ticker:hover .sc-shop-ticker__track{
    animation-play-state: paused;
  }
}

.sc-shop-ticker:focus-within .sc-shop-ticker__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce){
  .sc-shop-ticker__track { animation: none; }
}

.sc-shop-ticker__chunk{
  display:inline-flex;
  align-items:center;
  gap: 22px;
  padding: 0 26px;
}

.sc-shop-ticker__text{
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 900;
  font-size: var(--sc-font);
  line-height: 1;
  letter-spacing: .70px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  text-shadow:
    0 14px 30px rgba(0,0,0,.55),
    0 1px 0 rgba(0,0,0,.55);
  white-space: nowrap;
}

.sc-shop-ticker__accent{
  color: var(--sc-yellow);
  text-shadow:
    0 14px 30px rgba(0,0,0,.60),
    0 0 22px rgba(255,190,61,.18);
}

.sc-shop-ticker__dot{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 50% 50%, rgba(255,190,61,.75), rgba(255,190,61,.20) 65%, rgba(255,190,61,0) 73%);
  box-shadow:
    0 0 0 2px rgba(255,190,61,.10),
    0 12px 26px rgba(0,0,0,.38);
  flex: 0 0 auto;
  opacity: .96;
}

@media (max-width: 575.98px){
  .sc-shop-ticker{
    --sc-pad-y: 14px;
    --sc-font: 16px;
    --sc-speed: 18s;
    background:
      radial-gradient(120% 180% at 50% 35%, rgba(255,190,61,.10) 0%, rgba(0,0,0,0) 55%),
      linear-gradient(180deg, rgba(10,10,10,.985), rgba(20,20,20,.985));
  }
  .sc-shop-ticker::after {
    display: none;
  }
}

/* ---- Scopione Reviews (Owner Experiences) — rendered by the shared
   sc_shop_render_testimonials(); about-tokens replaced with literals ---- */
.reviews-section {
  background:
    radial-gradient(900px 600px at 50% 0%, color-mix(in srgb, var(--sc-yellow) 7%, transparent), transparent 70%),
    linear-gradient(180deg, #0c0c0c 0%, #1a1a1a 100%);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 0;
  padding: clamp(2.5rem, 4vw, 3rem) 0 var(--shop-section-gap) 0;
}
.reviews-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}
.reviews-eyebrow {
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--shop-small);
  margin: 0 0 0.75rem;
}
.reviews-title {
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  font-size: var(--shop-h2);
  font-weight: 800;
}
.page-template-page-dealer .reviews-title { text-wrap: balance; }
.reviews-sub {
  font-size: var(--shop-body);
  color: rgba(255,255,255,0.82);
  max-width: 760px;
  margin: 0.25rem auto 2rem;
  line-height: 1.7;
}
.reviews-link {
  color: var(--sc-yellow);
  text-decoration: none;
  font-weight: 800;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.reviews-link:hover {
  color: #ffd877;
  text-shadow: 0 0 6px color-mix(in srgb, var(--sc-yellow) 25%, transparent);
}
.reviews-link:focus-visible {
  outline: 2px solid var(--sc-yellow);
  outline-offset: 2px;
  text-decoration: underline;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 1168px;
  margin: 0 auto;
}
.review-card {
  position: relative;
  overflow: hidden;
  background: rgba(26,26,26,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1.25rem;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.review-card .review-card-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: -1.25rem -1.25rem 1rem -1.25rem;
}
.review-card .review-card-gallery-item {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  flex: 1 0 calc(50% - 2px);
  max-width: calc(50% - 2px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1a1a;
}
.review-card .review-card-gallery-item:only-child {
  flex-basis: 100%;
  max-width: 100%;
}
.review-card .review-card-gallery[data-count="3"] .review-card-gallery-item:nth-child(3) {
  flex-basis: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
.review-card .review-card-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.review-card:hover .review-card-gallery-item img {
  transform: scale(1.04);
}
.review-card .review-card-gallery-item::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(0,0,0,.55);
  box-shadow:
    inset  7px  7px 0 -5px #fff,
    inset  9px  5px 0 -5px #fff,
    inset  5px  9px 0 -5px #fff,
    inset -7px -7px 0 -5px #fff,
    inset -9px -5px 0 -5px #fff,
    inset -5px -9px 0 -5px #fff;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 3;
}
@media (hover: hover) and (pointer: fine) {
  .review-card .review-card-gallery-item:hover::after {
    opacity: 1;
    transform: scale(1);
  }
}
@media (hover: none) {
  .review-card .review-card-gallery-item::after {
    opacity: 0.7;
    transform: scale(1);
  }
  .review-card:hover:not(:focus-visible) .review-card-gallery-item img {
    transform: none;
  }
}
.review-card .review-card-gallery-item:focus-visible {
  outline: 2px solid var(--sc-yellow);
  outline-offset: 2px;
}
.review-card:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 0 14px color-mix(in srgb, var(--sc-yellow) 18%, transparent);
}
.review-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(75deg, transparent 45%, rgba(255,255,255,0.4) 50%, transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .review-card:hover::after {
    animation: scReviewShine 2.4s ease-out forwards;
  }
}
@keyframes scReviewShine {
  0%   { opacity: 0; transform: translateX(-100%); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
.review-card:focus-within {
  outline: 2px solid var(--sc-yellow);
  outline-offset: 2px;
}
.review-card .stars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--sc-yellow);
  letter-spacing: 0.06em;
  font-weight: 800;
  margin-bottom: 0.35rem;
}
.review-card .stars::after {
  content: "";
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: url("/wp-content/themes/scopione/img/scopione-logo-150x150.png") center / contain no-repeat;
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.review-card:hover .stars::after { opacity: 0.35; }
.review-card:focus-within .stars::after { opacity: 0.35; }
.review-copy {
  margin: 0.5rem 0 1rem;
  color: #eaeaea;
  line-height: 1.7;
}
.review-author {
  color: var(--sc-yellow);
  font-weight: 800;
}
@media (hover: none) {
  .reviews-section .review-card:hover:not(:focus-visible) {
    transform: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  }
  .reviews-section .review-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-link,
  .review-card,
  .review-card::after {
    transition: none;
    animation: none;
  }
}
@media (forced-colors: active) {
  .review-card { border: 2px solid currentColor; }
  .review-card:focus-within { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* =========================================================
   DEALER-11 — Vehicle image marquee (above the ticker)

   Full-bleed left-to-right infinite scroll of the 9 promotions vehicle tiles
   (rendered by sc_dealer_render_image_marquee()). The track holds the set x2;
   spacing is per-item margin (NOT flex gap) so translateX(-50%)->0 lands exactly
   one copy over = a seamless loop. Pauses on hover/focus; static on reduced-motion.
   ========================================================= */
.sc-dealer-carmarquee {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  overflow: hidden;
  z-index: 2;
  background: linear-gradient(180deg, #0e0e0e, #161616);
  padding: clamp(0.85rem, 1.8vw, 1.5rem) 0;
}
.sc-dealer-carmarquee__track {
  display: flex;
  width: max-content;
  animation: sc-dealer-carmarquee 50s linear infinite;
}
@keyframes sc-dealer-carmarquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.sc-dealer-carmarquee__item {
  flex: 0 0 auto;
  width: clamp(170px, 18vw, 220px);
  aspect-ratio: 1 / 1;
  margin-right: clamp(0.75rem, 1.5vw, 1.25rem);
  border-radius: 10px;  /* DEALER-15: unified to the 10px card radius (was 12px) */
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #1a1a1a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.sc-dealer-carmarquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-dealer-carmarquee::before,
.sc-dealer-carmarquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 1;
  pointer-events: none;
}
.sc-dealer-carmarquee::before {
  left: 0;
  background: linear-gradient(90deg, #121212, rgba(18, 18, 18, 0));
}
.sc-dealer-carmarquee::after {
  right: 0;
  background: linear-gradient(270deg, #121212, rgba(18, 18, 18, 0));
}
@media (hover: hover) and (pointer: fine) {
  .sc-dealer-carmarquee:hover .sc-dealer-carmarquee__track {
    animation-play-state: paused;
  }
}
.sc-dealer-carmarquee:focus-within .sc-dealer-carmarquee__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .sc-dealer-carmarquee__track {
    animation: none;
    transform: none;
  }
}

/* =========================================================
   DEALER-14 — The Advantage: depth + brand pillars

   Carbon-fibre weave added to the panel bg (above). Here: 3 brand pillars
   between the body and the tagline, and a short gold rule that sets the gold
   sign-off apart as the punchline. (DEALER-14-fix3: the S-logo watermark —
   and the content z-index lift it required — were removed per Stan.)
   ========================================================= */
.sc-dealer-advantage-pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 760px;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255, 190, 61, 0.18);
}
.sc-dealer-advantage-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 140px;
  max-width: 200px;
}
.sc-dealer-advantage-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--sc-yellow);
  background: rgba(255, 190, 61, 0.1);
  border: 1px solid rgba(255, 190, 61, 0.25);
  border-radius: 50%;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* DEALER-14-fix: animate the hover pop */
}
.sc-dealer-advantage-pillar-icon svg { width: 24px; height: 24px; }
.sc-dealer-advantage-pillar-label {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--shop-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.sc-dealer-advantage-tagline::before {
  content: "";
  display: block;
  width: 112px;       /* DEALER-14-fix: 2× longer (was 56px) */
  height: 2px;
  margin: 0 auto 1rem;
  background: var(--sc-yellow);
  border-radius: 999px;
  opacity: 0.75;
}