/*
 * Product detail pages: sticky left “rail” matching About mission layout.
 * Single portfolio / catalog graphic; hover swaps to a random sibling product (see product-page-rail.js).
 *
 * The hero headline sits in `.vl-product-detail-prose-stack` beside the rail (same `vl-product-detail-rail__subgrid`
 * row as intro + longform) so the rail column shares one tall scroll span-same pattern as nested sections below,
 * with `overflow: visible` on containers so sticky + adjusted dividers behave consistently.
 */
.vl-product-detail-combined,
.vl-product-detail-combined .grid,
.vl-product-detail-combined .vl-product-detail-rail-section,
.vl-product-detail-combined .section-wysiwyg__container {
  overflow: visible;
}

/* Shared hero / rail top band: rail shell top = hero pad + content offset to clear `.hero__title`, plus
   a visible gap so the card isn’t flush under the label. */
.vl-product-detail-combined {
  --vl-product-hero-top-pad: 100px;
  /* Space between bottom of eyebrow row and top of rail card (desktop). */
  --vl-product-rail-gap-after-eyebrow: 100px;
  --vl-product-rail-shell-pad-top: calc(
    var(--vl-product-hero-top-pad) + round(0.625rem, 1px) + round(2.275rem, 1px) +
      var(--vl-product-rail-gap-after-eyebrow)
  );
  /* Horizontal inset for intro + longform copy in the prose column (all product detail pages). */
  --vl-product-prose-pad: clamp(1rem, 2.5vw, 1.75rem);
  /* Narrow viewports: space above/below the handset rail (desktop uses `--vl-product-rail-shell-pad-top`). */
  --vl-rail-mobile-pad-top: 15px;
  --vl-rail-mobile-pad-bottom: 30px;
}

/* Wide marketing rails (landscape card) - match rhythm to handset rails on small screens. */
.vl-product-detail-combined:has([data-vl-product-slug="vmodel"]) {
  --vl-rail-mobile-pad-top: 15px;
  --vl-rail-mobile-pad-bottom: 30px;
}

/* Inline hero inside prose column: desktop pulls it onto the page’s 12-col band so the eyebrow + top
   rule line up with the header logo; `h1[pos="5-12"]` keeps the headline over the intro column. */
.vl-product-detail-combined .vl-product-detail-hero {
  overflow: visible;
  margin: 0;
  padding-top: var(--vl-product-hero-top-pad) !important;
  padding-bottom: 0.625rem !important;
  box-sizing: border-box;
}

/* Category label (e.g. Productivity) + Download - title left, button far right */
.vl-product-detail-hero .vl-product-hero-category-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
  box-sizing: border-box;
}

.vl-product-detail-hero .vl-product-hero-category-row .hero__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: min(12rem, 50%);
}

.vl-product-detail-hero .vl-product-hero-download {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Red tagline under product name - matches /products `.hero__description-sub` (“from Voltis Labs”).
 * Product pages only; /campaigns reuses `.vl-product-detail-*` but keeps full hero scale. */
body:not(.vl-page-campaigns) .vl-product-detail-combined .vl-product-detail-hero .hero__description {
  line-height: 1.1 !important;
  overflow: visible !important;
}

body:not(.vl-page-campaigns) .vl-product-detail-combined
  .vl-product-detail-hero
  .hero__description
  .vl-red-pour-line
  + span[style*="ff2b2b"],
body:not(.vl-page-campaigns) .vl-product-detail-combined
  .vl-product-detail-hero
  .hero__description
  .hero__description-sub {
  display: block;
  font-size: clamp(1.5rem, 4.2vw, 2.75rem) !important;
  font-weight: inherit;
  line-height: 1.12 !important;
  padding-block: 0 !important;
  margin: 0;
}

.vl-product-detail-combined .vl-product-detail-prose-stack {
  overflow: visible;
  box-sizing: border-box;
}

/* Longform box: inset on all sides (survives mobile `display:contents` on the prose stack). */
.vl-product-detail-combined .vl-product-voltis-prose-inner {
  padding-inline: var(--vl-product-prose-pad) !important;
  box-sizing: border-box;
}

/* Intro blocks when there is no inline hero (e.g. hero above `.vl-product-detail-combined`). */
.vl-product-detail-combined
  .vl-product-detail-prose-stack:not(:has(> header.vl-product-detail-hero))
  > .vl-prose-kicker,
.vl-product-detail-combined
  .vl-product-detail-prose-stack:not(:has(> header.vl-product-detail-hero))
  > .p1,
.vl-product-detail-combined
  .vl-product-detail-prose-stack:not(:has(> header.vl-product-detail-hero))
  > .p2,
.vl-product-detail-combined
  .vl-product-detail-prose-stack:not(:has(> header.vl-product-detail-hero))
  > .vl-inner__cta,
.vl-product-detail-combined
  .vl-product-detail-prose-stack:not(:has(> header.vl-product-detail-hero))
  > .vl-inner__note {
  padding-inline: var(--vl-product-prose-pad) !important;
  box-sizing: border-box;
}

/*
 * Inline hero pages: intro stays in the prose column (never the hero’s rail breakout band).
 * Left inset matches `.hero__content` grid padding only - same text start as the hero body copy.
 */
.vl-product-detail-combined
  .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
  > .vl-prose-kicker,
.vl-product-detail-combined
  .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
  > .p1,
.vl-product-detail-combined
  .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
  > .p2,
.vl-product-detail-combined
  .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
  > .vl-inner__cta,
.vl-product-detail-combined
  .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
  > .vl-inner__note {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-inline-start: var(--space-grid-padding, clamp(1rem, 4vw, 1.5rem)) !important;
  padding-inline-end: var(--vl-product-prose-pad) !important;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .vl-product-detail-combined {
    --vl-product-hero-breakout: calc(
      4 * var(--space-grid-width) + 4 * var(--space-grid-gap)
    );
  }

  .vl-product-detail-combined .vl-product-detail-hero {
    margin-left: calc(-1 * var(--vl-product-hero-breakout));
    margin-right: 0;
    width: calc(100% + var(--vl-product-hero-breakout));
    max-width: none;
  }

  .vl-product-detail-combined .vl-product-detail-hero .hero__content {
    /* Same as Graphene `.grid` - required for `.hero__content:before` to read full-width over cols 1-12. */
    padding-inline: var(--space-grid-padding) !important;
  }

  /* Match hero text start (breakout margin + grid pad) without hero’s expanded width - keeps copy in the prose column. */
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .vl-prose-kicker,
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .p1,
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .p2,
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .vl-inner__cta,
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .vl-inner__note {
    margin-left: calc(-1 * var(--vl-product-hero-breakout));
    width: 100% !important;
    max-width: 100% !important;
    padding-inline-start: var(--space-grid-padding) !important;
    padding-inline-end: var(--vl-product-prose-pad) !important;
  }
}

@media (max-width: 899px) {
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .vl-prose-kicker,
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .p1,
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .p2,
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .vl-inner__cta,
  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > .vl-inner__note {
    margin-left: 0 !important;
    padding-inline-start: 0 !important;
  }

  .vl-product-detail-combined .vl-product-detail-hero .hero__content {
    padding-inline: 0 !important;
  }

  /* Avoid desktop 100px hero band on phones; spacing under the title is handled by copy + rail margins. */
  .vl-product-detail-combined .vl-product-detail-hero {
    padding-top: clamp(2.25rem, 6.5vw, 3.75rem) !important;
  }
}

/* `.switch` pages don’t get Graphene’s `hero+div .section:first-child { margin-top: 0 }` - without this,
   `.section:first-child` keeps ~4.375rem top margin and the sticky rail starts far below the hero. */
.vl-product-detail-combined > .vl-product-detail-rail-section:first-child {
  margin-top: 0 !important;
}

/* Theme h2::after uses 100vw rules; hide in this rail stack so dividers don’t clip sticky. */
.vl-product-detail-combined .vl-product-detail-prose-stack h2::after,
.vl-product-detail-combined .vl-product-voltis-longform h2::after {
  content: none !important;
  display: none !important;
}

@media (min-width: 900px) {
  body .vl-product-detail-combined .vl-product-detail-prose-stack {
    max-width: none !important;
    width: auto !important;
    margin-inline: 0 !important;
    justify-self: stretch !important;
  }
}

/* Longform + bottom CTA use `.text.vl-inner` with theme max-width + auto margins, so copy sat
   centered/narrow inside cols 5-12 while the intro stack was full column - uneven left edges. */
.vl-product-detail-combined
  .vl-product-voltis-longform
  .vl-product-voltis-prose
  > .grid
  > .vl-product-voltis-prose-inner {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

/* In the rail scaffold, keep ordinary prose/form blocks flush with the right-column start
   (instead of inheriting global centered max-width rules). */
.vl-product-detail-combined .vl-product-voltis-longform .section-wysiwyg__container > .text,
.vl-product-detail-combined .vl-product-voltis-longform .section-form > .grid > [pos="5-12"] {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

/*
 * Product pages were restructured so longform sections live inside the right rail column.
 * Those nested sections still carry `pos="5-12"`, which applies a second right shift.
 * Force nested prose/form blocks to span their local grid so copy aligns like About.
 */
.vl-product-detail-combined .vl-product-voltis-longform .section-wysiwyg__container > [pos="5-12"],
.vl-product-detail-combined .vl-product-voltis-longform .section-form > .grid > [pos="5-12"] {
  grid-column: 1 / -1 !important;
}

/* Longform blocks nest another 12-col grid + `pos="5-12"` inside the prose column, which re-applies
   the marketing offset and makes boxed sections sit right of intro copy. Flatten wrappers. */
.vl-product-detail-combined .vl-product-voltis-longform .vl-product-voltis-prose > .grid,
.vl-product-detail-combined .vl-product-voltis-longform .vl-product-voltis-prose .section-wysiwyg__container {
  display: contents;
}

body .vl-product-detail-combined .vl-product-voltis-longform .vl-product-voltis-prose .vl-product-voltis-prose-inner.text.vl-inner,
body .vl-product-detail-combined .vl-product-voltis-longform .vl-product-voltis-prose .section-wysiwyg__container > .text.vl-product-voltis-prose-inner {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box;
}

.vl-product-detail-combined .vl-product-voltis-longform .vl-product-voltis-prose.section {
  width: 100%;
  box-sizing: border-box;
  /* Inset comes from `.vl-product-detail-prose-stack` - do not zero it here. */
  padding-inline: 0;
}

/* Nested longform blocks (tables, contact details) share the same column inset. */
.vl-product-detail-combined .vl-product-voltis-longform .section-table,
.vl-product-detail-combined .vl-product-voltis-longform .section-form {
  box-sizing: border-box;
  padding-inline: 0;
  width: 100%;
}

/* Contact (and similar): `.section-table` sits outside `.section-wysiwyg__container`; span the
   prose column so Email/Address dividers align with “Request a quote” copy. */
.vl-product-detail-combined
  .vl-product-voltis-longform
  .section-table
  > .grid
  > .section-table__list {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

.vl-product-detail-combined
  .vl-product-voltis-longform
  .section-table
  .section-table__item,
.vl-product-detail-combined
  .vl-product-voltis-longform
  .section-table
  .section-table__title,
.vl-product-detail-combined
  .vl-product-voltis-longform
  .section-table
  .section-table__text {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
}

.vl-product-detail-rail-section,
.vl-product-detail-rail-section .grid,
.vl-product-detail-rail-section .vl-product-detail-rail__subgrid {
  overflow: visible;
}

.vl-product-detail-rail__shell {
  min-width: 0;
  justify-self: start;
  width: 100%;
  max-width: min(100%, 22rem);
  align-self: stretch;
  /* Top offset for the sticky card: see desktop rule below (About-style shell padding). */
  padding-top: 0;
  box-sizing: border-box;
}

/* Handset rail shell width: matches phone-aspect viewport; artwork may be PNG exports or portfolio SVG (`object-fit: contain`). */
.vl-product-detail-combined:has([data-vl-product-slug="bars"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="spellcheck"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="spinnersonic"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="support"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="voltiscore"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="notepadpro"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="pinnacle-transfer"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="clipstack"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="wearhouse"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="campaigns"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="pebble"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="pony"]) .vl-product-detail-rail__shell,
.vl-product-detail-combined:has([data-vl-product-slug="content-calendar"]) .vl-product-detail-rail__shell,
.vl-downloads-combined:has([data-vl-downloads-rail]) .vl-product-detail-rail__shell {
  max-width: min(20.625rem, 92vw) !important;
}

.vl-product-detail-rail-section {
  --vl-product-rail-sticky-h: clamp(12.75rem, 18vw + 7.5rem, 16rem);
}

.vl-product-detail-rail__sticky {
  position: sticky;
  --vl-site-header-clear: clamp(5rem, 8.5vw + 2.5rem, 7.75rem);
  align-self: start;
}

@media (max-width: 899px) {
  .vl-product-detail-rail__sticky {
    position: relative;
    top: auto !important;
  }

  /*
   * Mobile column: desktop puts the rail beside the hero; stacking used to force prose first and the
   * rail last, so the handset/banner sat under the intro/longform.
   *
   * - Page hero *outside* `.vl-product-detail-combined` (e.g. some product pages) or Contact: flex order
   *   rail → prose (`order` 1 / 2).
   * - Inline `header.vl-product-detail-hero` inside prose: `display: contents` on the prose wrapper
   *   so we can order hero → rail → remainder.
   */
  .vl-product-detail-rail-section .vl-product-detail-rail__subgrid {
    display: flex !important;
    flex-direction: column !important;
  }

  .vl-product-detail-combined .vl-product-detail-rail__shell {
    order: 1;
    /* Subgrid becomes a column flex on mobile; `justify-self` is ignored - use cross-axis centering */
    justify-self: center;
    align-self: center;
    max-width: min(22rem, 100%);
    padding-top: var(--vl-rail-mobile-pad-top) !important;
    padding-bottom: var(--vl-rail-mobile-pad-bottom) !important;
    box-sizing: border-box;
  }

  .vl-downloads-combined .vl-product-detail-rail__shell {
    max-width: min(20.625rem, 92vw) !important;
  }

  .vl-product-detail-rail-section
    .vl-product-detail-rail__subgrid
    > .text.vl-inner.vl-product-detail-prose-stack:not(:has(> header.vl-product-detail-hero)) {
    order: 2;
  }

  .vl-product-detail-combined .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero) {
    display: contents !important;
  }

  .vl-product-detail-combined:has(.vl-product-detail-prose-stack > header.vl-product-detail-hero)
    .vl-product-detail-rail__shell {
    order: 2;
  }

  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > header.vl-product-detail-hero {
    order: 1;
  }

  .vl-product-detail-combined
    .vl-product-detail-prose-stack:has(> header.vl-product-detail-hero)
    > :not(header.vl-product-detail-hero) {
    order: 3;
  }
}

@media (min-width: 900px) {
  /* Shell offset matches hero stack so the card stays below the eyebrow (see `--vl-product-rail-shell-pad-top`).
   * Center handset in the rail column - keep shell width: 100% + max-width (never max-content + 100% children). */
  .vl-product-detail-combined
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell {
    justify-self: center;
    max-width: 100%;
    margin-inline: auto;
    padding-top: var(--vl-product-rail-shell-pad-top) !important;
    padding-bottom: 50px;
  }

  .vl-product-detail-combined:has([data-vl-product-slug="bars"])
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell,
  .vl-product-detail-combined:has([data-vl-product-slug="spellcheck"])
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell,
  .vl-product-detail-combined:has([data-vl-product-slug="spinnersonic"])
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell,
  .vl-product-detail-combined:has([data-vl-product-slug="support"])
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell,
  .vl-product-detail-combined:has([data-vl-product-slug="pebble"])
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell,
  .vl-product-detail-combined:has([data-vl-product-slug="campaigns"])
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell {
    max-width: min(21rem, 48vw) !important;
  }

  .vl-downloads-combined
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell {
    max-width: min(20.625rem, 92vw) !important;
    justify-self: center;
  }

  /* Initial `top` before product-page-rail.js runs; JS uses measured header + gap. */
  .vl-product-detail-combined .vl-product-detail-rail__sticky {
    top: max(5.5rem, 88px);
  }
}

.vl-product-detail-rail__frame.vl-home-hero__frame::before {
  content: none;
  display: none !important;
}

.vl-product-detail-rail__frame:has([data-vl-product-slug="bars"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="spellcheck"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="spinnersonic"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="support"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="notepadpro"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="pinnacle-transfer"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="clipstack"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="wearhouse"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="campaigns"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="pebble"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="pony"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="content-calendar"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="voltiscore"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="vmodel"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="sniper"]),
.vl-product-detail-rail__frame:has([data-vl-downloads-rail]) {
  overflow: visible;
  border-radius: 0;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  filter: none;
  outline: none;
}

/*
 * Marketing banner rails (PONY, VModel): one surface - frame is layout-only (no border/fill/shadow).
 * The viewport is the visible card: native aspect ratio + contain so the asset is never cropped.
 */
.vl-product-detail-rail__frame:has([data-vl-product-slug="pony"]),
.vl-product-detail-rail__frame:has([data-vl-product-slug="vmodel"]) {
  padding: 0;
  margin: 0;
}

.vl-product-detail-rail__frame:has([data-vl-product-slug="bars"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="bars"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="spellcheck"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="spellcheck"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="spinnersonic"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="spinnersonic"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="support"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="support"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="notepadpro"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="notepadpro"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pinnacle-transfer"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pinnacle-transfer"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="clipstack"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="clipstack"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="wearhouse"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="wearhouse"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="campaigns"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="campaigns"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="content-calendar"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="content-calendar"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="voltiscore"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="voltiscore"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pebble"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pebble"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pony"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pony"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="vmodel"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="vmodel"])::after,
.vl-product-detail-rail__frame:has([data-vl-product-slug="sniper"])::before,
.vl-product-detail-rail__frame:has([data-vl-product-slug="sniper"])::after,
.vl-product-detail-rail__frame:has([data-vl-downloads-rail])::before,
.vl-product-detail-rail__frame:has([data-vl-downloads-rail])::after {
  content: none !important;
  display: none !important;
}

.vl-product-detail-rail__frame .vl-product-detail-rail {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  width: 100%;
  cursor: default;
  border-radius: 4px;
}

.vl-product-detail-rail__frame:has([data-vl-product-slug="bars"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="spellcheck"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="spinnersonic"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="support"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="notepadpro"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pinnacle-transfer"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="clipstack"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="wearhouse"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="campaigns"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pebble"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="pony"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="content-calendar"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="vmodel"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-product-slug="sniper"]) .vl-product-detail-rail,
.vl-product-detail-rail__frame:has([data-vl-downloads-rail]) .vl-product-detail-rail {
  border-radius: 0;
  overflow: visible;
}

.vl-product-detail-rail[data-vl-product-slug="sniper"] .vl-product-bars-rail__viewport {
  aspect-ratio: 1200 / 750;
}

.vl-product-detail-rail:focus-visible {
  outline: 2px dashed color-mix(in srgb, var(--color-accent, #ff2b2b) 70%, #fff);
  outline-offset: 4px;
}

.vl-product-detail-rail__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 375;
  overflow: hidden;
  border-radius: 4px;
  background: #0a0a0a;
}

/* Handset rail pages - scroll-synced slides (see product-bars-rail-slider.js). */
.vl-product-detail-rail[data-vl-product-slug="bars"],
.vl-product-detail-rail[data-vl-product-slug="spellcheck"],
.vl-product-detail-rail[data-vl-product-slug="spinnersonic"],
.vl-product-detail-rail[data-vl-product-slug="support"],
.vl-product-detail-rail[data-vl-product-slug="notepadpro"],
.vl-product-detail-rail[data-vl-product-slug="pinnacle-transfer"],
.vl-product-detail-rail[data-vl-product-slug="clipstack"],
.vl-product-detail-rail[data-vl-product-slug="wearhouse"],
.vl-product-detail-rail[data-vl-product-slug="campaigns"],
.vl-product-detail-rail[data-vl-product-slug="pebble"],
.vl-product-detail-rail[data-vl-product-slug="pony"],
.vl-product-detail-rail[data-vl-product-slug="vmodel"],
.vl-product-detail-rail[data-vl-product-slug="afrogarm"],
.vl-product-detail-rail[data-vl-product-slug="sniper"],
.vl-product-detail-rail[data-vl-product-slug="content-calendar"],
.vl-product-detail-rail[data-vl-downloads-rail] {
  cursor: default;
}

.vl-product-detail-rail[data-vl-downloads-rail] .vl-product-bars-rail__tilt-link {
  cursor: default;
}

.vl-product-bars-rail__tilt-link {
  display: block;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  outline: none;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
  background-size: 0 0 !important;
  /* Kill stray inline-gap under the handset (avoids a 1px “hairline” below the PNG). */
  line-height: 0;
  font-size: 0;
}

.vl-product-bars-rail__tilt-link:hover,
.vl-product-bars-rail__tilt-link:active,
.vl-product-bars-rail__tilt-link:visited {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
  background-size: 0 0 !important;
}

.vl-product-bars-rail__tilt-link::before,
.vl-product-bars-rail__tilt-link::after {
  content: none !important;
  display: none !important;
}

.vl-product-bars-rail__tilt-link:focus-visible .vl-product-bars-rail__viewport {
  outline: 2px dashed color-mix(in srgb, var(--color-accent, #ff2b2b) 70%, #fff);
  outline-offset: 4px;
}

/* Handset carousel viewports: no static-rail card chrome (border, #0a0a0a fill). */
.vl-product-detail-rail[data-vl-product-slug="bars"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="spellcheck"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="spinnersonic"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="support"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="notepadpro"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="pinnacle-transfer"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="clipstack"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="wearhouse"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="campaigns"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="pebble"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="pony"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="content-calendar"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="voltiscore"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="voltiscore"] .vl-product-bars-rail__viewport,
.vl-product-detail-rail[data-vl-downloads-rail] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-downloads-rail] .vl-product-bars-rail__viewport {
  aspect-ratio: 436 / 902;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.vl-product-bars-rail__viewport {
  position: relative;
  width: 100%;
  font-size: 1rem;
  line-height: normal;
  /* Handset PNG carousels (Bars, Wearhouse, …). Wide 2560×1583 portfolio SVGs override below. */
  aspect-ratio: 436 / 902;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  perspective: 900px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.vl-product-bars-rail__tilt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.vl-product-bars-rail__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateZ(0);
  z-index: 0;
}

/* NotepadPro: all handset slides share one frame (436×902); cover keeps every slide the same
   visual size when source aspect ratios differ slightly from the first export. */
.vl-product-detail-rail[data-vl-product-slug="notepadpro"] .vl-product-bars-rail__slide {
  object-fit: cover;
}

.vl-product-bars-rail__slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* Heartbeat cue on slide change (opacity-only; friendly to 3D tilt). */
@keyframes vl-product-bars-heartbeat {
  0% {
    opacity: 1;
  }
  28% {
    opacity: 0.86;
  }
  52% {
    opacity: 0.96;
  }
  100% {
    opacity: 1;
  }
}

.vl-product-bars-rail__slide.is-pulse {
  animation: vl-product-bars-heartbeat 480ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .vl-product-bars-rail__tilt {
    transform: none !important;
    will-change: auto;
  }

  .vl-product-bars-rail__viewport {
    perspective: none;
    transform-style: flat;
  }

  .vl-product-bars-rail__slide.is-pulse {
    animation: none;
  }
}

.vl-product-detail-rail[data-vl-product-slug="vmodel"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="afrogarm"] .vl-product-detail-rail__viewport {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  /* Match source art so object-fit:contain fills the box (no fake “padding” band). */
}

.vl-product-detail-rail[data-vl-product-slug="vmodel"] .vl-product-detail-rail__viewport,
.vl-product-detail-rail[data-vl-product-slug="afrogarm"] .vl-product-detail-rail__viewport {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 2560 / 1583;
}

/* Inner wrap: hover axis-slide is animated here so parallax can stay `translateY`-only on the `<img>`. */
.vl-product-detail-rail[data-vl-product-slug="pony"] .vl-product-detail-rail__pony-tilt {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .vl-product-detail-rail[data-vl-product-slug="pony"] .vl-product-detail-rail__pony-tilt {
    will-change: auto;
  }
}

/* Full-area link while the coming-soon peek is active; opens myponyapp.com (PONY banner). */
.vl-product-detail-rail__pony-peek-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  outline: none;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
}

.vl-product-detail-rail[data-vl-rail-hover="1"] .vl-product-detail-rail__pony-peek-link {
  pointer-events: auto;
  cursor: pointer;
}

.vl-product-detail-rail[data-vl-product-slug="pony"][data-vl-rail-hover="1"] {
  cursor: pointer;
}

.vl-product-detail-rail__img--spellcheck-logo {
  object-fit: contain;
  object-position: center;
}

.vl-product-detail-rail[data-vl-product-slug="vmodel"] .vl-product-detail-rail__img {
  object-fit: contain;
  object-position: center;
}

.vl-product-detail-rail[data-vl-product-slug="pony"] .vl-product-detail-rail__img {
  object-fit: contain;
  object-position: top center;
}

.vl-product-detail-rail[data-vl-product-slug="afrogarm"] .vl-product-detail-rail__img {
  object-fit: contain;
  object-position: top center;
}

.vl-product-detail-rail__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.2s ease;
}

/* Scroll parallax on banner rails (PONY, Afrogarm, VModel - see product-page-rail.js). */
.vl-product-detail-rail[data-vl-rail-parallax="1"] .vl-product-detail-rail__img {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .vl-product-detail-rail[data-vl-rail-parallax="1"] .vl-product-detail-rail__img {
    will-change: auto;
  }
}

.vl-product-detail-rail[data-vl-product-slug="pony"] .vl-product-detail-rail__img[src*="ponylogo"],
.vl-product-detail-rail[data-vl-product-slug="pony"] .vl-product-detail-rail__img[src*="pony-rail-clipstack"] {
  filter: none;
}

.vl-product-detail-rail[data-vl-rail-hover="1"] .vl-product-detail-rail__img {
  opacity: 0.96;
}

@media (prefers-reduced-motion: reduce) {
  .vl-product-detail-rail__img {
    transition-duration: 0.01ms;
  }
}

/* Contact (`page-id-5876`): standalone hero above `.vl-product-detail-combined`. The rail shell must
 * not reuse the in-combined `--vl-product-rail-shell-pad-top` (that duplicates eyebrow spacing and
 * pins the sticky card too low). Sticky `top` easing uses `main > div` in `product-page-rail.js`. */
@media (min-width: 900px) {
  body.page-id-5876
    .vl-product-detail-combined
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell {
    padding-top: clamp(0.5rem, 1.5vw, 1.25rem) !important;
    max-width: min(24rem, 100%) !important;
  }

  body.page-id-5876 .vl-product-detail-rail-section {
    --vl-product-rail-sticky-h: clamp(14rem, 20vw + 7.5rem, 18rem);
  }
}

/* Contact: hide the portfolio-style rail banner on small viewports (hero + copy + form only). */
@media (max-width: 899px) {
  body.page-id-5876 .vl-product-detail-combined .vl-product-detail-rail__shell {
    display: none !important;
  }
}

/* Downloads catalog: normal block flow (no .vl-inner pour-line on headings). */
body.page-downloads .vl-downloads-prose {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: var(--vl-product-prose-pad, clamp(1rem, 4vw, 1.5rem)) !important;
  box-sizing: border-box;
}

body.page-downloads .vl-downloads-prose > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Downloads: hero sits above the rail block - same handset width + centering as Bars */
body.page-downloads .vl-downloads-combined .vl-product-detail-rail__shell,
body.page-downloads
  .vl-downloads-combined
  .vl-product-detail-rail__subgrid
  > .vl-product-detail-rail__shell {
  width: min(20.625rem, 92vw, 100%) !important;
  max-width: min(20.625rem, 92vw) !important;
  margin-inline: auto !important;
  justify-self: center !important;
  align-self: stretch;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  body.page-downloads .vl-product-detail-rail__subgrid {
    justify-items: center;
  }

  body.page-downloads
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell {
    justify-self: center;
    margin-inline: auto;
  }
}

body.page-downloads .vl-product-detail-rail__frame:has([data-vl-downloads-rail]) {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 900px) {
  body.page-downloads
    .vl-downloads-combined
    .vl-product-detail-rail__subgrid
    > .vl-product-detail-rail__shell {
    padding-top: clamp(0.5rem, 1.5vw, 1.25rem) !important;
  }

  /* Sticky handset vertical center while scrolling (product-page-rail.js) */
  body.page-downloads .vl-product-detail-rail__sticky {
    top: max(5.5rem, 88px);
  }
}