/* ==========================================================================
   Adlib design tokens (locked, site-wide)
   ========================================================================== */
:root {
  --adl-color-primary: #00274d;
  --adl-color-white: #ffffff;
  --adl-color-warning: #ff8a80;
  --adl-color-black: #000000;
  /* 'Jakarta' — not 'Plus Jakarta Sans' — matches the master theme's own
     @font-face name for this typeface (self-hosted as a variable font,
     weights 300-700). Using the theme's own font-family name instead of
     Google's means this resolves to an already-loaded resource wherever
     this stylesheet runs, with no separate font link required and no
     dependency on Google Fonts loading at all. */
  --adl-font-family: 'Jakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --adl-radius: 0px; /* zero border radii, site-wide */
  --adl-content-width: 1250px;
}

html {
  scroll-behavior: smooth;
}

/* These used to be bare element selectors (*, body, img, a, p) — fine in
   isolation, but this stylesheet loads on the same page as your site's
   real header and footer, which live in the same <body>. Since these are
   all inherited/cascading properties, the unscoped versions were bleeding
   into header/footer too — font-family included, which is what was
   fighting your theme's own font there.
   First attempt scoped this to a .adl-ss-page wrapper div — dropped that,
   your page is built from several separate CMS content blocks so a
   wrapper spanning all of them doesn't reliably survive. Second attempt
   scoped directly to the section classes (no markup change needed) but
   used plain compound selectors like ".adl-ss-range p" — that's a class
   + element combined, which is MORE specific than a single class like
   .adl-ss-range__card-title, so it was beating your component's own
   font-size overrides regardless of source order. Wrapping the section
   list in :where(...) fixes that: :where() always contributes zero
   specificity, so these rules end up exactly as weak as the original
   bare element selectors were (p, img, a) — any single-class component
   rule anywhere still wins, same as before this whole chain of fixes
   started. If a new top-level section is ever added to this page outside
   these seven, add its class to the :where() list too. */
:where(.adl-ss-hero, .adl-ss-range, .adl-ss-banner, .adl-ss-innovation, .adl-ss-detail, .adl-ss-why, .adl-ss-quote) *,
:where(.adl-ss-hero, .adl-ss-range, .adl-ss-banner, .adl-ss-innovation, .adl-ss-detail, .adl-ss-why, .adl-ss-quote) *::before,
:where(.adl-ss-hero, .adl-ss-range, .adl-ss-banner, .adl-ss-innovation, .adl-ss-detail, .adl-ss-why, .adl-ss-quote) *::after {
  box-sizing: border-box;
}
.adl-ss-hero, .adl-ss-range, .adl-ss-banner, .adl-ss-innovation, .adl-ss-detail, .adl-ss-why, .adl-ss-quote {
  box-sizing: border-box;
  font-family: var(--adl-font-family);
  color: var(--adl-color-primary);
}
:where(.adl-ss-hero, .adl-ss-range, .adl-ss-banner, .adl-ss-innovation, .adl-ss-detail, .adl-ss-why, .adl-ss-quote) img {
  max-width: 100%;
  display: block;
}
:where(.adl-ss-hero, .adl-ss-range, .adl-ss-banner, .adl-ss-innovation, .adl-ss-detail, .adl-ss-why, .adl-ss-quote) a {
  text-decoration: none;
}

/* ==========================================================================
   Type scale for this page — explicit px per spec, breakpoint at 768px.
   Deliberately not inheriting the site's master CSS type scale, since this
   page is being used as a live test run for new styles.
   ========================================================================== */
:where(.adl-ss-hero, .adl-ss-range, .adl-ss-banner, .adl-ss-innovation, .adl-ss-detail, .adl-ss-why, .adl-ss-quote) p {
  margin: 0 0 1em;
  font-size: 14px;
}

@media (min-width: 768px) {
  :where(.adl-ss-hero, .adl-ss-range, .adl-ss-banner, .adl-ss-innovation, .adl-ss-detail, .adl-ss-why, .adl-ss-quote) p {
    font-size: 16px;
  }
}

/* ==========================================================================
   Sennheiser Spectera page — Hero
   ========================================================================== */

.adl-ss-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--adl-color-black); /* shows through the edge fade on large displays */
  height: 600px; /* matches mobile mockup export */
}

@media (min-width: 768px) {
  .adl-ss-hero {
    height: 751px; /* matches desktop mockup export */
  }
}

.adl-ss-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
}

/* Cap the hero image at 1500px on very large displays (32" monitors etc.)
   and fade the edges from solid black into the image, rather than
   stretching it full-bleed. Only kicks in above the cap — on any screen
   1500px or narrower the image still runs full-bleed as normal. */
@media (min-width: 1500px) {
  .adl-ss-hero__media {
    left: 50%;
    width: 1500px;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 125px,
      #000 calc(100% - 125px),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 125px,
      #000 calc(100% - 125px),
      transparent 100%);
  }
}

.adl-ss-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

@media (min-width: 768px) {
  .adl-ss-hero__image {
    object-position: center center;
  }
}

.adl-ss-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.adl-ss-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--adl-content-width);
  margin: 0 auto;
  height: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.adl-ss-hero__title {
  margin: 0 0 12px;
  color: var(--adl-color-white);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .adl-ss-hero__title {
    font-size: 36px;
  }
}

.adl-ss-hero__subtitle {
  margin: 0 0 28px;
  color: var(--adl-color-white);
  font-weight: 400;
  line-height: 1.5;
  max-width: 560px;
}

/* Thanks page — reuses the .adl-ss-hero component wholesale (same image,
   overlay, layout) for a standalone confirmation page after a successful
   quotation submission, just with a checkmark badge in place of the
   subtitle CTA button. */
.adl-ss-thanks__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid var(--adl-color-white);
  color: var(--adl-color-white);
  font-size: 24px;
}

@media (min-width: 768px) {
  .adl-ss-thanks__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    font-size: 28px;
  }
}

/* Shared CTA button — used by the hero "View range" link and the
   "Begin quotation" banner button (and, later, wherever else it appears) */
.adl-ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 160px;
  height: 45px;
  background: var(--adl-color-white);
  color: var(--adl-color-primary);
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
  border: 0.5px solid #e2e2e2;
  border-radius: var(--adl-radius);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.adl-ss-btn:hover {
  background: var(--adl-ss-accent-alt);
  border-color: #000000;
  color: var(--adl-color-white);
}

@media (min-width: 768px) {
  .adl-ss-btn {
    width: 240px;
    height: 60px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Sennheiser Spectera page — Range (product carousel)
   ========================================================================== */

:root {
  /* Secondary brand colour, used alongside the primary #00274d */
  --adl-ss-accent: #164470;
  --adl-ss-accent-alt: #6e93b8;
}

.adl-ss-range {
  background: var(--adl-color-white);
  padding: 48px 0;
  /* Offsets the "View range" anchor jump by the fixed header's height, so
     smooth-scrolling to #range doesn't land with the header covering the
     top of the section. Matches the header height at each breakpoint
     (64px mobile / 128px desktop) — update these two values if the
     header height ever changes. */
  scroll-margin-top: 64px;
}

@media (min-width: 768px) {
  .adl-ss-range {
    padding: 64px 0;
    scroll-margin-top: 128px;
  }
}

.adl-ss-range__inner {
  max-width: var(--adl-content-width);
  margin: 0 auto;
  padding: 0 16px;
}

.adl-ss-range__heading {
  margin: 0 0 24px;
  font-weight: 700;
  font-size: 20px;
  color: var(--adl-color-black);
}

@media (min-width: 768px) {
  .adl-ss-range__heading {
    font-size: 28px;
  }
}

.adl-ss-range__heading .adl-ss-accent {
  color: var(--adl-ss-accent);
}

.adl-ss-range__carousel {
  position: relative;
}

.adl-ss-range__track {
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* mobile default: one card + a peek of the next, capped so it never blows up */
  grid-auto-columns: min(78vw, 260px);
}

.adl-ss-range__track::-webkit-scrollbar {
  display: none;
}

/* small tablet / large phone: two up */
@media (min-width: 576px) {
  .adl-ss-range__track {
    grid-auto-columns: min(45vw, 260px);
  }
}

/* tablet: three up */
@media (min-width: 768px) {
  .adl-ss-range__track {
    gap: 20px;
    grid-auto-columns: min(calc((100% - (2 * 20px)) / 3), 280px);
  }
}

/* desktop: four up, matching the design */
@media (min-width: 992px) {
  .adl-ss-range__track {
    grid-auto-columns: min(calc((100% - (3 * 20px)) / 4), 300px);
  }
}

.adl-ss-range__card {
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fafbfb;
  color: inherit;
}

.adl-ss-range__card-media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
}

.adl-ss-range__card-media img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.adl-ss-range__card:hover .adl-ss-range__card-media img {
  transform: scale(1.15);
}

.adl-ss-range__card-title {
  margin: 0;
  padding: 0 16px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--adl-color-black);
}

.adl-ss-range__nav {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 19px;
}

.adl-ss-range__arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--adl-ss-accent);
  color: var(--adl-color-white);
  border: 0;
  border-radius: var(--adl-radius);
  cursor: pointer;
  font-size: 1rem;
}

.adl-ss-range__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}


/* ==========================================================================
   Sennheiser Spectera page — Banner (quotation CTA strip)
   ========================================================================== */

.adl-ss-banner {
  background: var(--adl-color-primary);
  padding: 24px 0;
}

@media (min-width: 768px) {
  .adl-ss-banner {
    padding: 32px 0;
  }
}

.adl-ss-banner__inner {
  max-width: var(--adl-content-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.adl-ss-banner__text {
  margin: 0;
  color: var(--adl-color-white);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .adl-ss-banner__text {
    font-size: 28px;
  }
}

/* ==========================================================================
   Sennheiser Spectera page — "The sound of innovation"
   ========================================================================== */

.adl-ss-innovation {
  background: var(--adl-color-white);
  padding: 48px 0 0;
}

@media (min-width: 768px) {
  .adl-ss-innovation {
    padding: 64px 0 0;
  }
}

.adl-ss-innovation__inner {
  max-width: var(--adl-content-width);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  gap: 40px;
}

@media (min-width: 992px) {
  .adl-ss-innovation__inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }
}

.adl-ss-innovation__media {
  display: none;
}

@media (min-width: 992px) {
  .adl-ss-innovation__media {
    display: block;
    width: 60%;
    max-width: 60%;
    margin: 0 auto;
    /* sticks as the page scrolls, until the taller text/features column
       runs out beneath it — naturally stops there, just before the video */
    position: sticky;
    top: 128px;
  }
}

.adl-ss-innovation__media img {
  max-width: 100%;
  height: auto;
  display: block;
}

.adl-ss-innovation__heading {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 20px;
  color: var(--adl-color-black);
}

@media (min-width: 768px) {
  .adl-ss-innovation__heading {
    font-size: 28px;
  }
}

.adl-ss-innovation__heading .adl-ss-accent {
  color: var(--adl-ss-accent);
}

.adl-ss-innovation__content > p {
  color: var(--adl-color-black);
}

.adl-ss-features {
  position: relative;
  margin-top: 32px;
}

/* Background image layer — sticks within the card as you scroll past it,
   like the product shot beside it, but shows through the translucent
   black panel instead of sitting in its own column */
.adl-ss-features__bg {
  position: absolute;
  inset: 0;
}

/* Only show the background image through the card on mobile/tablet, where
   there's no separate side-column image — avoids showing the same product
   shot twice on desktop */
@media (min-width: 992px) {
  .adl-ss-features__bg {
    display: none;
  }
}

.adl-ss-features__bg-image {
  position: sticky;
  top: 64px;
  width: 40%;
  margin: 30px auto;
}

.adl-ss-features__bg-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* The card's actual design: a solid-black-at-85%-opacity panel, which lets
   the background image show through rather than a flat dark colour */
.adl-ss-features__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.adl-ss-features__content {
  position: relative;
  z-index: 1;
  padding: 32px 24px;
}

@media (min-width: 768px) {
  .adl-ss-features__content {
    padding: 40px;
  }
}

.adl-ss-features__heading {
  margin: 0 0 24px;
  color: var(--adl-color-white);
  font-weight: 700;
  font-size: 18px;
}

@media (min-width: 768px) {
  .adl-ss-features__heading {
    font-size: 24px;
  }
}

.adl-ss-features__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.adl-ss-features__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.adl-ss-features__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.adl-ss-features__icon {
  flex-shrink: 0;
  width: 20px;
  padding-top: 3px;
  color: var(--adl-color-white);
  font-size: 18px;
  text-align: center;
}

.adl-ss-features__title {
  margin: 0 0 4px;
  color: var(--adl-color-white);
  font-weight: 600;
}

.adl-ss-features__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.adl-ss-innovation__video {
  width: 100%;
  margin-top: 48px;
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  .adl-ss-innovation__video {
    padding-bottom: 64px;
  }
}

.adl-ss-innovation__video-inner {
  max-width: var(--adl-content-width);
  margin: 0 auto;
  padding: 0 16px;
}

.adl-ss-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.adl-ss-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Banner 2 — same component as banner 1, accent background */
.adl-ss-banner--accent {
  background: var(--adl-ss-accent);
}

/* Forced line break in banner headlines — only kicks in at wider widths so
   it doesn't fight with natural wrapping on narrow/mobile screens */
.adl-ss-banner__break {
  display: none;
}

@media (min-width: 768px) {
  .adl-ss-banner__break {
    display: inline;
  }
}

/* ==========================================================================
   Sennheiser Spectera page — Highlights (feature card carousel)
   ========================================================================== */

.adl-ss-highlights {
  background: var(--adl-color-white);
  padding: 48px 0;
}

@media (min-width: 768px) {
  .adl-ss-highlights {
    padding: 64px 0;
  }
}

.adl-ss-highlights__inner {
  max-width: var(--adl-content-width);
  margin: 0 auto;
  padding: 0 16px;
}

.adl-ss-highlights__carousel {
  position: relative;
}

.adl-ss-highlights__track {
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* mobile default: one card + a peek of the next, capped so it never blows up */
  grid-auto-columns: min(70vw, 300px);
}

.adl-ss-highlights__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 576px) {
  .adl-ss-highlights__track {
    grid-auto-columns: min(48vw, 340px);
  }
}

@media (min-width: 768px) {
  .adl-ss-highlights__track {
    gap: 20px;
    grid-auto-columns: min(38vw, 400px);
  }
}

@media (min-width: 992px) {
  .adl-ss-highlights__track {
    grid-auto-columns: 480px;
  }
}

.adl-ss-highlights__card {
  position: relative;
  aspect-ratio: 480 / 548;
  scroll-snap-align: start;
  overflow: hidden;
  color: var(--adl-color-white);
  background: #1a1a1a;
}

.adl-ss-highlights__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adl-ss-highlights__card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.adl-ss-highlights__card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 32px 16px 16px;
}

.adl-ss-highlights__card-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--adl-color-white);
}

@media (min-width: 768px) {
  .adl-ss-highlights__card-title {
    font-size: 20px;
  }
}

.adl-ss-highlights__card-desc {
  margin: 0;
  color: var(--adl-color-white);
}

.adl-ss-highlights__nav {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 19px;
}

.adl-ss-highlights__arrow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--adl-ss-accent);
  color: var(--adl-color-white);
  border: 0;
  border-radius: var(--adl-radius);
  cursor: pointer;
  font-size: 1rem;
}

.adl-ss-highlights__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ==========================================================================
   Sennheiser Spectera page — Detail blocks (base station / bodypacks / DAD)
   ========================================================================== */

.adl-ss-detail {
  background: var(--adl-color-white);
  padding: 24px 0 48px;
}

@media (min-width: 768px) {
  .adl-ss-detail {
    padding: 32px 0 64px;
  }
}

.adl-ss-detail__inner {
  max-width: var(--adl-content-width);
  margin: 0 auto;
  padding: 0 16px;
}

.adl-ss-detail__block {
  background: #fafbfb;
  padding: 24px;
  display: grid;
  gap: 32px;
  align-items: center;
}

.adl-ss-detail__block + .adl-ss-detail__block {
  margin-top: 24px;
}

@media (min-width: 768px) {
  .adl-ss-detail__block {
    padding: 40px;
  }
}

@media (min-width: 992px) {
  .adl-ss-detail__block {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 48px;
  }

  .adl-ss-detail__block + .adl-ss-detail__block {
    margin-top: 40px;
  }

  .adl-ss-detail__block--reverse .adl-ss-detail__content {
    order: 2;
  }

  .adl-ss-detail__block--reverse .adl-ss-detail__media {
    order: 1;
  }
}

.adl-ss-detail__heading {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 20px;
  color: var(--adl-color-black);
}

@media (min-width: 768px) {
  .adl-ss-detail__heading {
    font-size: 28px;
  }
}

.adl-ss-detail__heading .adl-ss-accent {
  color: var(--adl-ss-accent);
}

.adl-ss-detail__content p {
  color: var(--adl-color-black);
}

.adl-ss-detail__media {
  text-align: center;
}

.adl-ss-detail__media-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin: 0 auto 12px;
}

@media (min-width: 768px) {
  .adl-ss-detail__media-frame {
    height: 240px;
    margin: 0 auto 16px;
  }
}

.adl-ss-detail__media-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0;
}

.adl-ss-detail__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--adl-color-black);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}

/* ==========================================================================
   Sennheiser Spectera page — Why Adlib
   ========================================================================== */

.adl-ss-why {
  position: relative;
  overflow: hidden;
  background-color: var(--adl-color-black);
  height: 600px;
}

@media (min-width: 768px) {
  .adl-ss-why {
    height: 700px;
  }
}

.adl-ss-why__media {
  position: absolute;
  inset: 0;
  width: 100%;
}

/* Cap the image at 1500px on very large displays and fade the edges from
   solid black into the image, rather than stretching it full-bleed —
   same treatment as the hero. */
@media (min-width: 1500px) {
  .adl-ss-why__media {
    left: 50%;
    width: 1500px;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 125px,
      #000 calc(100% - 125px),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 125px,
      #000 calc(100% - 125px),
      transparent 100%);
  }
}

.adl-ss-why__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adl-ss-why__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.adl-ss-why__content {
  position: relative;
  z-index: 1;
  max-width: var(--adl-content-width);
  margin: 0 auto;
  height: 100%;
  padding: 0 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .adl-ss-why__content {
    padding: 0 16px 32px;
  }
}

.adl-ss-why__eyebrow {
  margin: 0 0 4px;
  color: #e2e2e2;
  font-weight: 700;
  font-size: 14px;
}

@media (min-width: 768px) {
  .adl-ss-why__eyebrow {
    font-size: 18px;
  }
}

.adl-ss-why__heading {
  margin: 0 0 16px;
  color: var(--adl-color-white);
  font-weight: 700;
  font-size: 20px;
}

@media (min-width: 768px) {
  .adl-ss-why__heading {
    font-size: 24px;
  }
}

.adl-ss-why__text {
  margin: 0 0 20px;
  color: var(--adl-color-white);
  max-width: 480px;
}

/* ==========================================================================
   Sennheiser Spectera page — Guided quotation pop-out
   (front-end only for now — wiring to ProspectSoft happens at integration)
   ========================================================================== */

/* Integration: ProspectSoft's real form (injected by form.js at the bottom
   of the page) is left completely empty and invisible — main.js moves its
   real <input>/<select>/<button> elements into the page cards/footer below,
   rebuilt into our own .adl-ss-quote__* markup, so no override for the raw
   ProspectSoft classes/layout is needed any more.

   One safeguard remains: browser form controls don't inherit font-family
   from the page by default, and something upstream of this stylesheet
   (the site's master theme CSS, or a CMS preview-mode editor shell — worth
   checking whether this still reproduces on the *published* page, not just
   in preview) has been winning the cascade against our un-!important'd
   rule here even when scoped by #ssQuote. Using !important on exactly the
   rendered-text elements that showed the wrong font (nav buttons, field
   inputs/selects, radio answer text) rather than a blanket `#ssQuote *`. */
#ssQuote .adl-ss-quote__nav,
#ssQuote .adl-ss-quote__field input,
#ssQuote .adl-ss-quote__field select,
#ssQuote .adl-ss-quote__option span {
  font-family: var(--adl-font-family) !important;
}

/* Same master-theme bleed-through as the font-family rule above, but for
   colour: the master theme has its own input:focus colour (dark, meant for
   a light form) that's winning over ours specifically while a field is
   focused — text reads white while idle, then flips black the moment you
   click in and start typing. Covering both the resting and focus states
   with !important stops the flip. */
#ssQuote .adl-ss-quote__field input,
#ssQuote .adl-ss-quote__field select,
#ssQuote .adl-ss-quote__field input:focus,
#ssQuote .adl-ss-quote__field select:focus {
  color: var(--adl-color-white) !important;
}

/* The submit button is ProspectSoft's real <button class="prospect-form-submit">,
   moved into the footer rather than rebuilt — it keeps that original class
   alongside the .adl-ss-quote__nav ones we add in JS, and the master theme
   CSS has its own (Bootstrap-flavoured) styling for that class/plain
   buttons generally, which was winning over .adl-ss-quote__nav's plain,
   unstyled-by-design look. Force every visual property back to match
   Cancel/Back/Next exactly. */
#ssQuote .adl-ss-quote__nav--submit.prospect-form-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  line-height: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: left !important;
  color: var(--adl-color-black) !important;
  font-family: var(--adl-font-family) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

#ssQuote .adl-ss-quote__nav--submit.prospect-form-submit:hover,
#ssQuote .adl-ss-quote__nav--submit.prospect-form-submit:focus,
#ssQuote .adl-ss-quote__nav--submit.prospect-form-submit:active {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--adl-color-black) !important;
}

/* The !important display above otherwise beats the [hidden] attribute's
   own (non-!important) display:none, which left the real submit button
   clickable/overlapping the Next button even while hidden on pages 1-3. */
#ssQuote .adl-ss-quote__nav--submit.prospect-form-submit[hidden] {
  display: none !important;
}

/* Keeps the real ProspectSoft submit button hidden in place at all times,
   including through form.js's own setAttribute("style", ...) call on
   successful submit (which shows its loading spinner by overwriting the
   whole style attribute — an inline display:none wouldn't survive that,
   a class with !important does, since form.js never removes classes). */
.adl-ss-prospect-real-submit-hidden {
  display: none !important;
}

.adl-ss-quote {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Was 100 — fine when this was built with no header on the page yet,
     but not high enough to sit above a real site header (nav/dropdowns
     commonly run higher than that). Bumped well above any typical header
     so the overlay covers it properly. If it's still showing through,
     the header's own z-index is higher than this — tell me the number
     and I'll match it. */
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.adl-ss-quote.is-open {
  display: flex;
}

.adl-ss-quote.is-visible {
  opacity: 1;
}

.adl-ss-quote[hidden] {
  display: none;
}

.adl-ss-quote__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.85);
}

.adl-ss-quote__panel {
  position: relative;
  z-index: 1;
  width: calc(100% - 32px);
  max-width: 368px;
  height: 700px;
  max-height: 90vh;
  background: var(--adl-color-white);
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .adl-ss-quote__panel {
    max-width: 600px;
    height: 751px;
  }
}

.adl-ss-quote__header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 0;
}

@media (min-width: 768px) {
  .adl-ss-quote__header {
    padding: 24px 24px 0;
  }
}

.adl-ss-quote__eyebrow {
  margin: 0 0 2px;
  color: var(--adl-ss-accent);
  font-weight: 700;
  font-size: 12px;
}

@media (min-width: 768px) {
  .adl-ss-quote__eyebrow {
    font-size: 14px;
  }
}

.adl-ss-quote__title {
  margin: 0;
  color: var(--adl-color-black);
  font-weight: 700;
  font-size: 18px;
}

@media (min-width: 768px) {
  .adl-ss-quote__title {
    font-size: 22px;
  }
}

.adl-ss-quote__progress {
  flex-shrink: 0;
  text-align: right;
}

.adl-ss-quote__progress-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.adl-ss-quote__progress-seg {
  width: 20px;
  height: 3px;
  background: #e2e2e2;
  transition: background-color 0.3s ease;
}

@media (min-width: 768px) {
  .adl-ss-quote__progress-seg {
    width: 28px;
  }
}

.adl-ss-quote__progress-seg.is-active {
  background: var(--adl-color-primary);
}

.adl-ss-quote__step-label {
  margin: 0;
  color: var(--adl-color-black);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease 1s;
}

.adl-ss-quote__step-label.is-visible {
  opacity: 1;
}

/* On the pop-out's very first open there's no indicator animation to wait
   for, so the label should appear right away with the rest of the
   content rather than sitting through the same delay used between steps. */
.adl-ss-quote__step-label.is-instant {
  transition-delay: 0s;
}

@media (min-width: 768px) {
  .adl-ss-quote__step-label {
    font-size: 14px;
  }
}

.adl-ss-quote__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.adl-ss-quote__page {
  /* Centers the active page vertically in the body. Auto margins (rather
     than justify-content: center) collapse to 0 once content is taller
     than the body, so it stays scrollable from the top instead of
     clipping when a page (e.g. the 3-question one) overflows. */
  margin: auto 0;
}

@media (min-width: 768px) {
  .adl-ss-quote__body {
    padding: 24px;
  }
}

.adl-ss-quote__intro {
  margin: 0;
  color: var(--adl-color-white);
  font-size: 14px;
  line-height: 1.4;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e2e2e2;
}

.adl-ss-quote__intro strong {
  font-weight: 700;
}

.adl-ss-quote__card {
  background: rgba(0, 0, 0, 0.85);
  max-width: 450px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.adl-ss-quote__card.is-visible {
  opacity: 1;
}

/* Question text, options and input fields fade in just after the card
   background does, so they land a beat after the box itself appears
   rather than both popping in at once. */
.adl-ss-quote__card > * {
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

.adl-ss-quote__page.is-content-visible .adl-ss-quote__card > * {
  opacity: 1;
}

@media (min-width: 768px) {
  .adl-ss-quote__card {
    padding: 24px 28px;
  }
}

.adl-ss-quote__question {
  margin: 0;
  padding: 0;
}

.adl-ss-quote__question-title {
  padding: 0;
  margin: 0 0 12px;
  color: var(--adl-color-white);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

.adl-ss-quote__hint {
  display: block;
  color: #cfcfcf;
  font-weight: 400;
  font-size: 12px;
  margin-top: 2px;
}

.adl-ss-quote__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adl-ss-quote__option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--adl-color-white);
  font-size: 14px;
  cursor: pointer;
}

.adl-ss-quote__option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50% !important;
  position: relative;
  cursor: pointer;
}

.adl-ss-quote__option input[type="radio"]:checked {
  border-color: var(--adl-color-white);
}

.adl-ss-quote__option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--adl-color-white);
}

.adl-ss-quote__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.adl-ss-quote__field {
  margin-bottom: 16px;
}

.adl-ss-quote__field:last-child {
  margin-bottom: 0;
}

.adl-ss-quote__field-row .adl-ss-quote__field {
  margin-bottom: 0;
}

.adl-ss-quote__field label {
  display: block;
  margin-bottom: 10px;
  color: var(--adl-color-white);
  font-weight: 700;
  font-size: 14px;
}

.adl-ss-quote__field input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0 0 8px;
  color: var(--adl-color-white);
  font-family: inherit;
  font-size: 14px;
}

/* Custom validation feedback — main.js suppresses the browser's native
   validation bubble (unstyled, can't be themed, was reading as "prospect
   form" styling) and renders this instead on the same 'invalid' event. */
.adl-ss-quote__field.has-error input,
.adl-ss-quote__field.has-error select {
  border-bottom-color: var(--adl-color-warning);
}

.adl-ss-quote__field-error {
  margin: 6px 0 0;
  color: var(--adl-color-warning);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}

.adl-ss-quote__field input:focus {
  outline: none;
  border-bottom-color: var(--adl-color-white);
  box-shadow: none;
}

.adl-ss-quote__field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0 0 8px;
  color: var(--adl-color-white);
  font-family: inherit;
  font-size: 14px;
  border-radius: 0;
}

.adl-ss-quote__field select:focus {
  outline: none;
  border-bottom-color: var(--adl-color-white);
  box-shadow: none;
}

.adl-ss-quote__field select option {
  color: #000;
}

.adl-ss-quote__field-row + .adl-ss-quote__field,
.adl-ss-quote__field + .adl-ss-quote__field-row {
  margin-top: 16px;
}

.adl-ss-quote__privacy {
  margin: 24px 0 0;
  color: #cfcfcf;
  font-size: 10px;
  line-height: 1.5;
}

.adl-ss-quote__footer {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}

.adl-ss-quote__footer > * {
  grid-row: 1;
}

@media (min-width: 768px) {
  .adl-ss-quote__footer {
    padding: 20px 24px;
  }
}

.adl-ss-quote__logo {
  height: 28px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .adl-ss-quote__logo {
    height: 34px;
  }
}

.adl-ss-quote__nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--adl-color-black);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.adl-ss-quote__nav[hidden] {
  display: none;
}

.adl-ss-quote__nav--cancel,
.adl-ss-quote__nav--back,
.adl-ss-quote__nav--close-btn {
  grid-column: 1;
  justify-self: start;
}

.adl-ss-quote__logo {
  grid-column: 2;
}

.adl-ss-quote__nav--next,
.adl-ss-quote__nav--submit {
  grid-column: 3;
  justify-self: end;
}

/* Submitted state */

.adl-ss-quote__progress-bar.is-complete {
  gap: 0;
  transition: gap 0.3s ease;
}

.adl-ss-quote__progress-bar.is-complete .adl-ss-quote__progress-seg {
  background: #1a8754;
}

.adl-ss-quote__card--submitted {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  min-height: 260px;
}

/* This card is now a brief "submitting, hang on" state rather than a
   success confirmation (see main.js showSubmitting) — the checkmark is
   replaced with fa-solid fa-spinner fa-spin in the markup, which uses
   Font Awesome's own built-in spin animation (already loaded site-wide
   for the other icons), so nothing extra needed here beyond the colour. */
.adl-ss-quote__submitted-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--adl-color-white);
  font-size: 36px;
  margin: 0 auto;
}

.adl-ss-quote__submitted-heading {
  margin: 0;
  color: var(--adl-color-white);
  font-weight: 700;
  font-size: 18px;
}

@media (min-width: 768px) {
  .adl-ss-quote__submitted-heading {
    font-size: 20px;
  }
}

.adl-ss-quote__submitted-text {
  margin: 0;
  color: #cfcfcf;
  max-width: 320px;
}