/**
 * Scopione — Contact + Dealer Stylesheet
 *
 * Dedicated styles for the Contact (page-contact.php) and Dealer Inquiry
 * (page-dealer.php) templates. The two are near-clones: they share a hero,
 * a Contact Form 7 form (forms 74 + 96), and an identical 3-up contact-info
 * grid, so they share ONE dedicated stylesheet.
 *
 * Conditionally enqueued via functions.php — scopione_enqueue_contact_css() —
 * on those two templates only. Depends on scopione-child.css. filemtime()
 * cache-busting.
 *
 * NOTE: the generic global CF7 base rule `.wpcf7-submit { padding… }` stays in
 * scopione-child.css — it is not contact-specific (it applies to every CF7
 * form site-wide, incl. Testimonials form 107, which self-styles via
 * scopione-testimonials.css `body.page-id-66 #submit-testimonial …`).
 *
 * @package Scopione_Child
 * @since 1.0.0
 *
 * History:
 *  - batch-CONTACT-1 (2026-05-31): extracted the contact-info grid + CF7 form
 *    styling VERBATIM from scopione-child.css (was lines 767–1010). No rule
 *    changes — pure relocation. scopione-pages.css de-leak + in-content port
 *    follow in batch-CONTACT-2; redesign follows in CONTACT-3+.
 */

/* =========================================================
   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-contact-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-contact-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-contact-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-contact-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-contact-card-icon svg {
  width: 28px;
  height: 28px;
}

.sc-contact-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-contact-card-value {
  margin: 0;
  font-size: var(--shop-body);
  font-weight: 600;
  line-height: 1.45;
  color: #111;
  word-break: break-word;
}

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

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

.sc-contact-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;
}

.scopione-form-wrap .form-section {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09); /* CLEAN-1: unify card border (was 0.08) */
  border-radius: 10px; /* CLEAN-1: harmonize to the 10px card scale (was 12px) */
  padding: 28px 24px;
  margin-bottom: 28px;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

/* CONTACT-8-fix: centered (was display:inline-block → the h5 stranded flush-left
   inside the fieldset <legend>, reading as "weirdly placed"). Now a centered
   fit-content block so the gold underline sits under the text, centered. */
.scopione-form-wrap .form-section h5 {
  color: var(--sc-dark); /* Scopione dark */
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--sc-yellow); /* Scopione yellow */
  text-align: center;
}

.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;
  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-section { padding: 20px 16px; }
  .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);
}

/* =========================================================
   PORTED INFO-PAGE IN-CONTENT RULES  (batch-CONTACT-2, 2026-05-31)

   The contact + dealer editorial bodies (the_content()) previously
   inherited these from scopione-pages.css. CONTACT-2 stops that generic
   sheet loading on both templates (functions.php $sc_dedicated_template_pages
   exclusion), so the SUBSET their bodies actually use is ported here, scoped
   to `.sc-info-body` — the <section> wrapping the_content() on both templates.

   Faithful copies of scopione-pages.css: same values + same !important flags,
   so the render is byte-identical pre/post de-leak.

   DROPPED vs source (not present on these two pages → not ported):
     • table styling (neither body has a <table>)
     • the linked-image `a:has(>img){display:inline-block}` rule (neither body
       has a LINKED content image — and that rule is the Trap #59 baseline-gap
       culprit, so it's deliberately excluded)
     • gallery `display:inherit` (no galleries)
   Desktop `.alignright{float:right}` is unaffected — it lives in the b4st
   parent (b4st.css), which is always loaded.
   ========================================================= */

.sc-info-body {
  --sc-info-img-radius: 8px;
}

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

/* Images: rounded, block, responsive */
.sc-info-body :where(img) {
  border-radius: var(--sc-info-img-radius) !important;
  display: block;
  height: auto;
  max-width: 100%;
}

/* Figure wrapper should not constrain width unexpectedly */
.sc-info-body :where(figure, .wp-block-image) {
  max-width: 100%;
}

/* Captions: always centered + cleared */
.sc-info-body :where(figcaption, .wp-element-caption) {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 12px auto 0 !important;
  clear: both !important;
  font-size: .875rem;
  color: rgba(17,17,17,.72);
}

/* Caption links: true inline text, gold underline */
.sc-info-body :where(figcaption, .wp-element-caption) a {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  color: inherit !important;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(255,190,61,.6) !important;
  text-decoration-thickness: from-font !important;
  text-underline-offset: .18em !important;
}
.sc-info-body :where(figcaption, .wp-element-caption) a:hover,
.sc-info-body :where(figcaption, .wp-element-caption) a:active {
  text-decoration-color: #ffbe3d !important;
  color: #111 !important;
}
.sc-info-body :where(figcaption, .wp-element-caption) a:focus-visible {
  outline: 2px solid #ffbe3d;
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* Mobile: TRUE centering for left/right-aligned media */
@media (max-width: 767.98px) {
  .sc-info-body :where(
    figure.alignleft, figure.alignright,
    .wp-block-image.alignleft, .wp-block-image.alignright,
    .alignleft, .alignright
  ) {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto !important;
    clear: both !important;
  }
  .sc-info-body :where(
    figure.alignleft img, figure.alignright img,
    .wp-block-image.alignleft img, .wp-block-image.alignright img,
    img.alignleft, img.alignright
  ) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sc-info-body :where(
    figure.alignleft, figure.alignright,
    .wp-block-image.alignleft, .wp-block-image.alignright
  ) {
    text-align: center !important;
  }
}

/* =========================================================
   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-contact-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-contact-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.52);
}

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

.sc-contact-hero .scopione-breadcrumbs a,
.sc-contact-hero .scopione-breadcrumbs a:visited {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

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

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

.sc-contact-hero .scopione-breadcrumbs .breadcrumb_last,
.sc-contact-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-contact-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-contact-hero .sc-contact-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-contact-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-contact-hero h1::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 280px;
  height: 1px;
  margin: 1rem auto 0;
  background: var(--sc-gold-rule);
}

.sc-contact-hero .sc-contact-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-contact-hero .scopione-breadcrumbs::after,
  .sc-contact-hero h1::after {
    max-width: 180px;
  }
}

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

/* =========================================================
   CONTACT FAQ ACCORDION (CONTACT-9)

   Native <details>/<summary> — keyboard-accessible, no JS. Design-system cards
   with a gold chevron that flips on open. The 3 Q&As are migrated into
   functions.php (sc_contact_faqs_*); the matching block is removed from the
   page-editor body so it doesn't double up.
   ========================================================= */

.sc-contact-faq {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 2vw, 1.5rem); /* ENH-2: shorter gap to the pillow below */
}

.sc-contact-faq-title {
  margin: 0 0 1.75rem;
  text-align: center;
  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-contact-faq-list {
  max-width: 1040px;
  margin: 0 auto;
}

/* ENH-1: 2×3 grid on large screens (6 Q&As). align-items:start so an opened
   item doesn't stretch its row-neighbour; gap replaces the per-item margin. */
@media (min-width: 992px) {
  .sc-contact-faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.25rem;
    align-items: start;
  }
  .sc-contact-faq-list .sc-contact-faq-item {
    margin-bottom: 0;
  }
}

.sc-contact-faq-item {
  position: relative;
  margin-bottom: 0.85rem;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09); /* CLEAN-1: unify card border (was 0.1) */
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sc-contact-faq-item:hover {
  border-color: rgba(255, 190, 61, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.sc-contact-faq-item[open] {
  border-color: rgba(255, 190, 61, 0.6);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

.sc-contact-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--shop-body);
  line-height: 1.45;
  color: var(--sc-dark);
}

.sc-contact-faq-q::-webkit-details-marker {
  display: none;
}

/* Gold chevron — points down when closed, flips up when open. */
.sc-contact-faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--sc-yellow);
  border-bottom: 2px solid var(--sc-yellow);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.sc-contact-faq-item[open] .sc-contact-faq-q::after {
  transform: rotate(-135deg);
}

.sc-contact-faq-q:focus-visible {
  outline: 2px solid var(--sc-yellow);
  outline-offset: -2px;
  border-radius: 10px;
}

.sc-contact-faq-a {
  padding: 0 1.35rem 1.2rem;
  color: rgba(17, 17, 17, 0.78);
  line-height: 1.7;
}

.sc-contact-faq-a p {
  margin: 0 0 0.75rem;
}

.sc-contact-faq-a p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sc-contact-faq-q::after {
    transition: none;
  }
}

/* =========================================================
   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-contact so /dealer/ (shared sheet) is unaffected.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  @supports (animation-timeline: view()) {
    .page-template-page-contact main#main,
    .page-template-page-contact .sc-contact-faq,
    .page-template-page-contact section.bg-light,
    .page-template-page-contact .sc-contact-channels {
      animation: sc-contact-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

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

/* =========================================================
   CONTACT CLOSING PILLOW (CONTACT-11)

   White card with the support image on the LEFT and the closing paragraph on
   the RIGHT (stacks on mobile). Migrated out of the page-editor body so the
   whole page is functions.php-driven (sc_contact_render_closing).
   ========================================================= */

.sc-contact-closing-section {
  padding: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(2rem, 4vw, 3rem); /* ENH-2: shorter gap above (from the FAQ) */
}

.sc-contact-closing {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(1.25rem, 2.5vw, 1.85rem); /* ENH-3: reduced inner padding */
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09); /* CLEAN-1: unify card border (was 0.08) */
  border-radius: 10px; /* CLEAN-1: harmonize to the 10px card scale (was 14px) */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.sc-contact-closing-media {
  flex: 0 0 42%;
  max-width: 42%;
}

.sc-contact-closing-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.sc-contact-closing-body {
  flex: 1 1 auto;
}

.sc-contact-closing-body > :first-child {
  margin-top: 0;
}

.sc-contact-closing-body > :last-child {
  margin-bottom: 0;
}

.sc-contact-closing-body p {
  margin: 0 0 1rem;
  font-size: var(--shop-body);
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.82);
}

@media (max-width: 767.98px) {
  .sc-contact-closing {
    flex-direction: column;
    align-items: stretch;
  }
  .sc-contact-closing-media {
    flex: 0 0 auto;
    max-width: 100%;
  }
}

/* =========================================================
   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-contact`; /dealer/ is excluded).
   ========================================================= */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  @supports (animation-timeline: scroll(root)) {
    .page-template-page-contact::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-contact-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-contact-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 / FAQ / pillow 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-contact-card::after,
.sc-contact-faq-item::after,
.sc-contact-closing::after,
.sc-contact-trust-panel::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-contact-card:hover::after,
  .sc-contact-faq-item:not([open]):hover::after,
  .sc-contact-closing:hover::after,
  .sc-contact-trust-panel:hover::after {
    animation: sc-contact-shine 2.4s ease-out forwards;
  }
}

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

/* Pillow gets a hover state (it had none) — gentle lift + gold-glow, to match
   the cards. */
.sc-contact-closing {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sc-contact-closing:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 190, 61, 0.5);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08), 0 0 20px rgba(255, 190, 61, 0.18);
  }
}

/* =========================================================
   REDUCED-MOTION (CLEAN-1) — the scroll bar, scroll-fades and ticker 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-contact-card::after,
  .sc-contact-faq-item::after,
  .sc-contact-closing::after,
  .sc-contact-trust-panel::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-contact-card:hover,
  .sc-contact-closing:hover,
  .sc-contact-trust-panel:hover,
  .sc-about-metric:hover,
  .sc-about-metric:hover::before {
    transform: none !important;
  }
}

/* =========================================================
   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-contact,
.page-template-page-dealer {
  --shop-h1: clamp(1.9rem, 4.5vw, 2.75rem);
  --shop-h2: clamp(1.55rem, 3.2vw, 2.1rem);
  --shop-body: clamp(1rem, 1.5vw, 1.1rem);
  --shop-small: clamp(0.8rem, 1.2vw, 0.9rem);
  --shop-section-gap: clamp(3rem, 5vw, 4rem);
  /* CLEAN-1: removed unused --shop-section-gap-sm (defined, never referenced). */
}

/* =========================================================
   FORM-AREA POLISH (ENH-2: items 4, 5, 6, 7)
   Targets the CF7 form 74 markup (legend h5 + acceptance checkbox + submit
   <p> + the response-time <p class="text-muted">), all inside .scopione-form-wrap.
   ========================================================= */

/* Item 4 — "Send Us a Message": a clearer, larger sub-heading with more space below. */
.scopione-form-wrap .form-section h5 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin-bottom: 1.75rem !important; /* beats Bootstrap .mb-4 (1.5rem) */
}

/* 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;
}
.scopione-form-wrap .form-check .wpcf7-acceptance .wpcf7-list-item {
  display: inline-block;
  max-width: 620px;
  margin: 0;
  text-align: center;
}
.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;
}

/* ENH-3-fix: FAQ in-content links match the Privacy Policy link (.form-check a). */
.sc-contact-faq-a a {
  color: #333333;
  text-decoration: underline;
}
.sc-contact-faq-a a:hover {
  text-decoration: none;
  color: var(--sc-yellow);
}

/* =========================================================
   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-contact-trust {
  padding: clamp(0.5rem, 1.5vw, 1rem) 0 clamp(2rem, 4vw, 3.5rem); /* ENH-3-fix: tighter gap to the cards above */
}

.sc-contact-trust-panel {
  position: relative;   /* CR2: clip the shine ::after + adopt the .sc-contact-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-contact-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-contact-card */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* CR2: same hover lift + gold glow as .sc-contact-card (gated so touch taps don't stick). */
@media (hover: hover) and (pointer: fine) {
  .sc-contact-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-contact-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) */
}

/* =========================================================
   RUNNING TICKER (ENH-4) — ported verbatim from /shop/ (homepage.css:709–891).
   Full-bleed carbon-lux marquee, after the "Let's Connect" block. The track is
   duplicated ×2 in the markup so the translateX(-50%) loop is seamless. Pauses
   on hover + on keyboard focus-within.
   ========================================================= */
.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;
  }
}