/**
 * @file
 * Neon divider core + placement utilities (SDC-5).
 *
 * Loaded globally so embedded / utility use does not depend on the SDC
 * rendering. Canvas still ships the same markup via hcp_nxt:neon-divider.
 *
 * Placement modifiers (before, after, up, down) stretch the pipe to the
 * host container on the corresponding axis. Pair with .has-neon-* on a
 * parent when another component owns the layout (e.g. callout SDC-9).
 *
 * Pseudo-element edge utilities (.neon-top, .neon-bottom, .neon-left,
 * .neon-right) paint the same pipe on ::before / ::after with no extra
 * markup. See the block at the bottom of this file.
 */

/* -------------------------------------------------------------------------- */
/* Core element                                                               */
/* -------------------------------------------------------------------------- */

.neon-divider {
  position: relative;
  display: block;
  flex: none;
  box-sizing: border-box;
  max-width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.neon-divider__end,
.neon-divider__tube {
  position: absolute;
  pointer-events: none;
}

.neon-divider__end {
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  max-width: none;
  object-fit: fill;
  z-index: 2;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
}

.neon-divider__tube {
  z-index: 1;
  background-color: transparent;
  background-image: url("../../images/pipes/neon-tube-mid.png");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}

/* -------------------------------------------------------------------------- */
/* Orientation — vertical                                                     */
/* -------------------------------------------------------------------------- */

.neon-divider--vertical {
  width: var(--neon-divider-thickness, 16.035px);
  height: var(--neon-divider-height-vertical, 199px);
  max-width: 100%;
  align-self: stretch;
}

.neon-divider--vertical .neon-divider__end--start {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform: none;
}

.neon-divider--vertical .neon-divider__end--end {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform: scaleY(-1);
  transform-origin: center center;
}

.neon-divider--vertical .neon-divider__tube {
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 22px,
    #000 calc(100% - 22px),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 22px,
    #000 calc(100% - 22px),
    transparent 100%
  );
}

/* -------------------------------------------------------------------------- */
/* Orientation — horizontal + wide                                            */
/* -------------------------------------------------------------------------- */

.neon-divider--horizontal,
.neon-divider--wide {
  width: 100%;
  height: var(--neon-divider-thickness, 16.035px);
}

.neon-divider--horizontal .neon-divider__end--start,
.neon-divider--wide .neon-divider__end--start {
  top: 50%;
  left: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(-50%) scaleY(-1) rotate(-90deg);
  transform-origin: center center;
}

.neon-divider--horizontal .neon-divider__end--end,
.neon-divider--wide .neon-divider__end--end {
  top: 50%;
  right: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
}

.neon-divider--horizontal .neon-divider__tube,
.neon-divider--wide .neon-divider__tube {
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  background-image: url("../../images/pipes/neon-tube-mid-h.png");
  background-repeat: repeat-x;
  background-position: center center;
  background-size: auto 100%;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 22px,
    #000 calc(100% - 22px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 22px,
    #000 calc(100% - 22px),
    transparent 100%
  );
}

/* -------------------------------------------------------------------------- */
/* Placement — stretch to the host container                                  */
/* -------------------------------------------------------------------------- */

/* Top / bottom rules span the container width. */
.neon-divider--up,
.neon-divider--down,
.has-neon-up > .neon-divider,
.has-neon-down > .neon-divider {
  width: 100%;
  max-width: 100%;
}

/* Side rules span the container height (199px minimum matches Figma default). */
.neon-divider--before,
.neon-divider--after,
.has-neon-before > .neon-divider,
.has-neon-after > .neon-divider {
  height: 100%;
  min-height: var(--neon-divider-height-vertical, 199px);
  align-self: stretch;
}

/* -------------------------------------------------------------------------- */
/* Host utilities — layout hook for embedded dividers                         */
/* -------------------------------------------------------------------------- */

.has-neon-up,
.has-neon-down {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: stretch;
}

.has-neon-before,
.has-neon-after {
  display: flex;
  flex-direction: row;
  position: relative;
  align-items: stretch;
}

.has-neon-up > .neon-divider {
  order: -1;
  flex: none;
}

.has-neon-down > .neon-divider {
  order: 1;
  flex: none;
}

.has-neon-before > .neon-divider {
  order: -1;
  flex: none;
}

.has-neon-after > .neon-divider {
  order: 1;
  flex: none;
}

/* Content slot between paired rules (callout pattern). */
.has-neon-up.has-neon-down > :not(.neon-divider) {
  flex: 1 1 auto;
  min-width: 0;
}

.has-neon-before.has-neon-after > :not(.neon-divider) {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* Pseudo-element edge utilities                                              */
/*                                                                            */
/* Add one class to any element — no SDC markup required.                     */
/*   .neon-top / .neon-bottom — horizontal, spans element width               */
/*   .neon-left / .neon-right — vertical, spans element height                */
/*   (wide orientation = same horizontal sizing as top/bottom)                */
/*                                                                            */
/* Aliases: .neon-up, .neon-down, .neon-before, .neon-after                   */
/*                                                                            */
/* Padding reserves a band so the pipe never overlaps content. Top + bottom   */
/* (or left + right) may be combined — ::before and ::after.                  */
/* Do not combine top/left or bottom/right — those share a host pseudo.            */
/* Top + bottom (horizontal) or left + right (vertical) use the paired rules at   */
/* the bottom of this block. Single-edge utilities use host ::before/::after.   */
/* -------------------------------------------------------------------------- */

.neon-top,
.neon-bottom,
.neon-left,
.neon-right,
.neon-up,
.neon-down,
.neon-before,
.neon-after,
.neon-top-desktop,
.neon-top-mobile,
.neon-bottom-desktop,
.neon-bottom-mobile,
.neon-left-desktop,
.neon-left-mobile,
.neon-right-desktop,
.neon-right-mobile {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible;
}

/* Reserve layout space — divider paints inside the padding band, not over content. */
.neon-top,
.neon-up {
  padding-top: calc(
    var(--neon-divider-band-horizontal, 36.494px) + var(--neon-divider-gap, 1rem)
  );
}

.neon-bottom,
.neon-down {
  padding-bottom: calc(
    var(--neon-divider-band-horizontal, 36.494px) + var(--neon-divider-gap, 1rem)
  );
}

/* Beat .container { padding: 0 var(--gutter-fluid) } — same specificity pass, higher selector. */
.container.neon-top,
.container.neon-up {
  padding-top: calc(
    var(--neon-divider-band-horizontal, 36.494px) + var(--neon-divider-gap, 1rem)
  );
}

.container.neon-bottom,
.container.neon-down {
  padding-bottom: calc(
    var(--neon-divider-band-horizontal, 36.494px) + var(--neon-divider-gap, 1rem)
  );
}

.neon-left,
.neon-before {
  padding-left: calc(
    var(--neon-divider-band-vertical, 16.035px) + var(--neon-divider-gap, 1rem)
  );
}

.neon-right,
.neon-after {
  padding-right: calc(
    var(--neon-divider-band-vertical, 16.035px) + var(--neon-divider-gap, 1rem)
  );
}

/* ---- Single-edge horizontal / wide — SDC axis at thickness/2 ------------------- */
.neon-top:not(.neon-bottom):not(.neon-down),
.neon-up:not(.neon-bottom):not(.neon-down),
.neon-bottom:not(.neon-top):not(.neon-up),
.neon-down:not(.neon-top):not(.neon-up) {
  background-image: var(
    --neon-divider-tube-h-src,
    url("../../images/pipes/neon-tube-mid-h.png")
  );
  background-repeat: repeat-x;
  background-size: auto var(--neon-divider-thickness, 16.035px);
  background-origin: padding-box;
  background-clip: padding-box;
}

.neon-top:not(.neon-bottom):not(.neon-down),
.neon-up:not(.neon-bottom):not(.neon-down) {
  background-position:
    var(--neon-divider-tube-inset, 10px) 0;
}

.neon-bottom:not(.neon-top):not(.neon-up),
.neon-down:not(.neon-top):not(.neon-up) {
  background-position:
    var(--neon-divider-tube-inset, 10px) 100%;
}

.neon-top:not(.neon-bottom):not(.neon-down)::before,
.neon-up:not(.neon-bottom):not(.neon-down)::before,
.neon-bottom:not(.neon-top):not(.neon-up)::before,
.neon-down:not(.neon-top):not(.neon-up)::before {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  position: absolute;
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  transform-origin: center center;
}

.neon-top:not(.neon-bottom):not(.neon-down)::before,
.neon-up:not(.neon-bottom):not(.neon-down)::before {
  top: calc(var(--neon-divider-thickness, 16.035px) / 2);
  left: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(-50%) scaleY(-1) rotate(-90deg);
}

.neon-bottom:not(.neon-top):not(.neon-up)::before,
.neon-down:not(.neon-top):not(.neon-up)::before {
  bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
  top: auto;
  left: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(50%) scaleY(-1) rotate(-90deg);
}

.neon-top:not(.neon-bottom):not(.neon-down)::after,
.neon-up:not(.neon-bottom):not(.neon-down)::after,
.neon-bottom:not(.neon-top):not(.neon-up)::after,
.neon-down:not(.neon-top):not(.neon-up)::after {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  position: absolute;
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  transform-origin: center center;
}

.neon-top:not(.neon-bottom):not(.neon-down)::after,
.neon-up:not(.neon-bottom):not(.neon-down)::after {
  top: calc(var(--neon-divider-thickness, 16.035px) / 2);
  right: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  left: auto;
  transform: translateY(-50%) rotate(90deg);
}

.neon-bottom:not(.neon-top):not(.neon-up)::after,
.neon-down:not(.neon-top):not(.neon-up)::after {
  bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
  top: auto;
  right: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  left: auto;
  transform: translateY(50%) rotate(90deg);
}

/* ---- Single-edge vertical — tube inset 10px between caps -------------------- */
.neon-left:not(.neon-right):not(.neon-after),
.neon-before:not(.neon-right):not(.neon-after),
.neon-right:not(.neon-left):not(.neon-before),
.neon-after:not(.neon-left):not(.neon-before) {
  background-image: var(
    --neon-divider-tube-v-src,
    url("../../images/pipes/neon-tube-mid.png")
  );
  background-repeat: repeat-y;
  background-size: var(--neon-divider-band-vertical, 16.035px)
    calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
  background-origin: padding-box;
  background-clip: padding-box;
}

.neon-left:not(.neon-right):not(.neon-after),
.neon-before:not(.neon-right):not(.neon-after) {
  background-position: left var(--neon-divider-tube-inset, 10px);
}

.neon-right:not(.neon-left):not(.neon-before),
.neon-after:not(.neon-left):not(.neon-before) {
  background-position: right var(--neon-divider-tube-inset, 10px);
}

.neon-left:not(.neon-right):not(.neon-after)::before,
.neon-before:not(.neon-right):not(.neon-after)::before,
.neon-right:not(.neon-left):not(.neon-before)::before,
.neon-after:not(.neon-left):not(.neon-before)::before {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  position: absolute;
  top: -3px;
  display: block;
  width: var(--neon-divider-band-vertical, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
}

.neon-left:not(.neon-right):not(.neon-after)::before,
.neon-before:not(.neon-right):not(.neon-after)::before {
  left: 0;
}

.neon-right:not(.neon-left):not(.neon-before)::before,
.neon-after:not(.neon-left):not(.neon-before)::before {
  right: 0;
  left: auto;
}

.neon-left:not(.neon-right):not(.neon-after)::after,
.neon-before:not(.neon-right):not(.neon-after)::after,
.neon-right:not(.neon-left):not(.neon-before)::after,
.neon-after:not(.neon-left):not(.neon-before)::after {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* Inverted fade vs top cap — hides the tube join after scaleY(-1). */
  -webkit-mask-image: linear-gradient(
    0deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    0deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  position: absolute;
  bottom: -3px;
  top: auto;
  display: block;
  width: var(--neon-divider-band-vertical, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  /* Same SVG as top cap, flipped for the bottom join (SDC .neon-divider__end--end). */
  transform: scaleY(-1);
  transform-origin: center center;
}

.neon-left:not(.neon-right):not(.neon-after)::after,
.neon-before:not(.neon-right):not(.neon-after)::after {
  left: 0;
}

.neon-right:not(.neon-left):not(.neon-before)::after,
.neon-after:not(.neon-left):not(.neon-before)::after {
  right: 0;
  left: auto;
}

/* Textured containers — keep paper on ::before; top cap via background layer.   */
.container--variant-textured.neon-left:not(.neon-right):not(.neon-after),
.container--variant-textured.neon-before:not(.neon-right):not(.neon-after),
.container--variant-textured.neon-right:not(.neon-left):not(.neon-before),
.container--variant-textured.neon-after:not(.neon-left):not(.neon-before) {
  background-image:
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"),
    var(
      --neon-divider-tube-v-src,
      url("../../images/pipes/neon-tube-mid.png")
    );
  background-repeat: no-repeat, repeat-y;
  background-size:
    var(--neon-divider-band-vertical, 16.035px)
      var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) auto;
}

.container--variant-textured.neon-left:not(.neon-right):not(.neon-after),
.container--variant-textured.neon-before:not(.neon-right):not(.neon-after) {
  background-position:
    left top,
    left var(--neon-divider-tube-inset, 10px);
}

.container--variant-textured.neon-right:not(.neon-left):not(.neon-before),
.container--variant-textured.neon-after:not(.neon-left):not(.neon-before) {
  background-position:
    right top,
    right var(--neon-divider-tube-inset, 10px);
}

.container--variant-textured.neon-left::before,
.container--variant-textured.neon-before::before,
.container--variant-textured.neon-right::before,
.container--variant-textured.neon-after::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  background-image: url("../../images/backgrounds/paper-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  pointer-events: none;
}

.container--variant-textured.neon-left:not(.neon-right)::before,
.container--variant-textured.neon-before:not(.neon-right)::before,
.container--variant-textured.neon-right:not(.neon-left)::before,
.container--variant-textured.neon-after:not(.neon-left)::before {
  transform: none;
}

/* Textured + horizontal neon: ::before is reserved for paper texture.
 * Use the neon-divider SDC for textured containers needing horizontal caps. */
.container--variant-textured.neon-top:not(.neon-bottom)::before,
.container--variant-textured.neon-up:not(.neon-bottom)::before,
.container--variant-textured.neon-bottom:not(.neon-top)::before,
.container--variant-textured.neon-down:not(.neon-top)::before {
  content: "";
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  transform: none;
  background-image: url("../../images/backgrounds/paper-texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  pointer-events: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ---- Paired horizontal (top + bottom) — same tube/cap math as single top/bottom --- */
.neon-top.neon-bottom:not(.neon-left):not(.neon-right):not(.neon-before):not(.neon-after),
.neon-top.neon-down:not(.neon-left):not(.neon-right):not(.neon-before):not(.neon-after),
.neon-up.neon-bottom:not(.neon-left):not(.neon-right):not(.neon-before):not(.neon-after),
.neon-up.neon-down:not(.neon-left):not(.neon-right):not(.neon-before):not(.neon-after) {
  background-image:
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
  background-repeat: repeat-x, repeat-x;
  background-size: auto var(--neon-divider-thickness, 16.035px), auto var(--neon-divider-thickness, 16.035px);
  background-origin: padding-box;
  background-clip: padding-box;
  background-position:
    var(--neon-divider-tube-inset, 10px) 0,
    var(--neon-divider-tube-inset, 10px) 100%;
}

/* Bottom row caps on host pseudos (same transforms as single-bottom). */
.neon-top.neon-bottom:not(.neon-left):not(.neon-right) > :first-child,
.neon-top.neon-down:not(.neon-left):not(.neon-right) > :first-child,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right) > :first-child,
.neon-up.neon-down:not(.neon-left):not(.neon-right) > :first-child {
  position: static;
}

.neon-top.neon-bottom:not(.neon-left):not(.neon-right)::before,
.neon-top.neon-down:not(.neon-left):not(.neon-right)::before,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right)::before,
.neon-up.neon-down:not(.neon-left):not(.neon-right)::before,
.neon-top.neon-bottom:not(.neon-left):not(.neon-right)::after,
.neon-top.neon-down:not(.neon-left):not(.neon-right)::after,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right)::after,
.neon-up.neon-down:not(.neon-left):not(.neon-right)::after {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  position: absolute;
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  transform-origin: center center;
}

.neon-top.neon-bottom:not(.neon-left):not(.neon-right)::before,
.neon-top.neon-down:not(.neon-left):not(.neon-right)::before,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right)::before,
.neon-up.neon-down:not(.neon-left):not(.neon-right)::before {
  bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
  top: auto;
  left: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(50%) scaleY(-1) rotate(-90deg);
}

.neon-top.neon-bottom:not(.neon-left):not(.neon-right)::after,
.neon-top.neon-down:not(.neon-left):not(.neon-right)::after,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right)::after,
.neon-up.neon-down:not(.neon-left):not(.neon-right)::after {
  bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
  top: auto;
  right: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  left: auto;
  transform: translateY(50%) rotate(90deg);
}

/* Top row caps on first child pseudos — same host-relative math as single-top. */
.neon-top.neon-bottom:not(.neon-left):not(.neon-right) > :first-child::before,
.neon-top.neon-down:not(.neon-left):not(.neon-right) > :first-child::before,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right) > :first-child::before,
.neon-up.neon-down:not(.neon-left):not(.neon-right) > :first-child::before,
.neon-top.neon-bottom:not(.neon-left):not(.neon-right) > :first-child::after,
.neon-top.neon-down:not(.neon-left):not(.neon-right) > :first-child::after,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right) > :first-child::after,
.neon-up.neon-down:not(.neon-left):not(.neon-right) > :first-child::after {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  position: absolute;
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  transform-origin: center center;
}

.neon-top.neon-bottom:not(.neon-left):not(.neon-right) > :first-child::before,
.neon-top.neon-down:not(.neon-left):not(.neon-right) > :first-child::before,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right) > :first-child::before,
.neon-up.neon-down:not(.neon-left):not(.neon-right) > :first-child::before {
  top: calc(var(--neon-divider-thickness, 16.035px) / 2);
  bottom: auto;
  left: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(-50%) scaleY(-1) rotate(-90deg);
}

.neon-top.neon-bottom:not(.neon-left):not(.neon-right) > :first-child::after,
.neon-top.neon-down:not(.neon-left):not(.neon-right) > :first-child::after,
.neon-up.neon-bottom:not(.neon-left):not(.neon-right) > :first-child::after,
.neon-up.neon-down:not(.neon-left):not(.neon-right) > :first-child::after {
  top: calc(var(--neon-divider-thickness, 16.035px) / 2);
  bottom: auto;
  right: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  left: auto;
  transform: translateY(-50%) rotate(90deg);
}

/* ---- Paired vertical (left + right) — same assets/transforms as single left --- */
.neon-left.neon-right:not(.neon-top):not(.neon-bottom):not(.neon-up):not(.neon-down),
.neon-left.neon-after:not(.neon-top):not(.neon-bottom):not(.neon-up):not(.neon-down),
.neon-before.neon-right:not(.neon-top):not(.neon-bottom):not(.neon-up):not(.neon-down),
.neon-before.neon-after:not(.neon-top):not(.neon-bottom):not(.neon-up):not(.neon-down) {
  background-image:
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png")),
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
  background-repeat: repeat-y, repeat-y;
  background-size:
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px)),
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
  background-origin: padding-box;
  background-clip: padding-box;
  background-position:
    left var(--neon-divider-tube-inset, 10px),
    right var(--neon-divider-tube-inset, 10px);
}

.neon-left.neon-right:not(.neon-top):not(.neon-bottom)::before,
.neon-left.neon-after:not(.neon-top):not(.neon-bottom)::before,
.neon-before.neon-right:not(.neon-top):not(.neon-bottom)::before,
.neon-before.neon-after:not(.neon-top):not(.neon-bottom)::before,
.neon-left.neon-right:not(.neon-top):not(.neon-bottom)::after,
.neon-left.neon-after:not(.neon-top):not(.neon-bottom)::after,
.neon-before.neon-right:not(.neon-top):not(.neon-bottom)::after,
.neon-before.neon-after:not(.neon-top):not(.neon-bottom)::after {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  display: block;
  width: var(--neon-divider-band-vertical, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
}

.neon-left.neon-right:not(.neon-top):not(.neon-bottom)::before,
.neon-left.neon-after:not(.neon-top):not(.neon-bottom)::before,
.neon-before.neon-right:not(.neon-top):not(.neon-bottom)::before,
.neon-before.neon-after:not(.neon-top):not(.neon-bottom)::before {
  top: -3px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

.neon-left.neon-right:not(.neon-top):not(.neon-bottom)::before,
.neon-left.neon-after:not(.neon-top):not(.neon-bottom)::before,
.neon-before.neon-right:not(.neon-top):not(.neon-bottom)::before,
.neon-before.neon-after:not(.neon-top):not(.neon-bottom)::before {
  background-image:
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
  background-size:
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px);
  background-position: left top, right top;
  left: 0;
  right: 0;
  width: auto;
}

.neon-left.neon-right:not(.neon-top):not(.neon-bottom)::after,
.neon-left.neon-after:not(.neon-top):not(.neon-bottom)::after,
.neon-before.neon-right:not(.neon-top):not(.neon-bottom)::after,
.neon-before.neon-after:not(.neon-top):not(.neon-bottom)::after {
  bottom: -3px;
  top: auto;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
  transform: scaleY(-1);
  transform-origin: center center;
}

.neon-left.neon-right:not(.neon-top):not(.neon-bottom)::after,
.neon-left.neon-after:not(.neon-top):not(.neon-bottom)::after,
.neon-before.neon-right:not(.neon-top):not(.neon-bottom)::after,
.neon-before.neon-after:not(.neon-top):not(.neon-bottom)::after {
  background-image:
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
  background-size:
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px);
  background-position: left bottom, right bottom;
  left: 0;
  right: 0;
  width: auto;
}

/* ---- Cross-axis (3–4 sides) — vertical caps on bg; horizontal caps on pseudos --- */
.neon-top.neon-bottom.neon-left.neon-right,
.neon-up.neon-down.neon-before.neon-after,
.neon-top.neon-down.neon-left.neon-right,
.neon-up.neon-bottom.neon-before.neon-after {
  background-image:
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png")),
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  background-size:
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    auto var(--neon-divider-thickness, 16.035px),
    auto var(--neon-divider-thickness, 16.035px),
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px)),
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
  background-origin: padding-box;
  background-clip: padding-box;
  background-position:
    left top,
    right top,
    left bottom,
    right bottom,
    var(--neon-divider-tube-inset, 10px) 0,
    var(--neon-divider-tube-inset, 10px) 100%,
    left var(--neon-divider-tube-inset, 10px),
    right var(--neon-divider-tube-inset, 10px);
}

.neon-top.neon-bottom.neon-left:not(.neon-right),
.neon-top.neon-down.neon-left:not(.neon-right),
.neon-up.neon-bottom.neon-left:not(.neon-right),
.neon-up.neon-down.neon-left:not(.neon-right) {
  background-image:
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-y;
  background-size:
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    auto var(--neon-divider-thickness, 16.035px),
    auto var(--neon-divider-thickness, 16.035px),
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
  background-origin: padding-box;
  background-clip: padding-box;
  background-position:
    left top,
    left bottom,
    var(--neon-divider-tube-inset, 10px) 0,
    var(--neon-divider-tube-inset, 10px) 100%,
    left var(--neon-divider-tube-inset, 10px);
}

.neon-top.neon-bottom.neon-right:not(.neon-left),
.neon-top.neon-down.neon-right:not(.neon-left),
.neon-up.neon-bottom.neon-right:not(.neon-left),
.neon-up.neon-down.neon-right:not(.neon-left) {
  background-image:
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-y;
  background-size:
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    auto var(--neon-divider-thickness, 16.035px),
    auto var(--neon-divider-thickness, 16.035px),
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
  background-origin: padding-box;
  background-clip: padding-box;
  background-position:
    right top,
    right bottom,
    var(--neon-divider-tube-inset, 10px) 0,
    var(--neon-divider-tube-inset, 10px) 100%,
    right var(--neon-divider-tube-inset, 10px);
}

.neon-top.neon-left.neon-right:not(.neon-bottom),
.neon-up.neon-before.neon-after:not(.neon-down) {
  background-image:
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png")),
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
  background-repeat: repeat-y, repeat-y, repeat-x;
  background-size:
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px)),
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px)),
    auto var(--neon-divider-thickness, 16.035px);
  background-origin: padding-box;
  background-clip: padding-box;
  background-position:
    left var(--neon-divider-tube-inset, 10px),
    right var(--neon-divider-tube-inset, 10px),
    var(--neon-divider-tube-inset, 10px) 0;
}

.neon-bottom.neon-left.neon-right:not(.neon-top),
.neon-down.neon-before.neon-after:not(.neon-up) {
  background-image:
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png")),
    var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png")),
    var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
  background-repeat: repeat-y, repeat-y, repeat-x;
  background-size:
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px)),
    var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px)),
    auto var(--neon-divider-thickness, 16.035px);
  background-origin: padding-box;
  background-clip: padding-box;
  background-position:
    left var(--neon-divider-tube-inset, 10px),
    right var(--neon-divider-tube-inset, 10px),
    var(--neon-divider-tube-inset, 10px) 100%;
}

/* Horizontal caps when top + bottom combine (host + first child pseudos). */
.neon-top.neon-bottom.neon-left > :first-child,
.neon-top.neon-bottom.neon-right > :first-child,
.neon-top.neon-bottom.neon-left.neon-right > :first-child,
.neon-top.neon-down.neon-left > :first-child,
.neon-top.neon-down.neon-right > :first-child,
.neon-top.neon-down.neon-left.neon-right > :first-child,
.neon-up.neon-bottom.neon-before > :first-child,
.neon-up.neon-bottom.neon-after > :first-child,
.neon-up.neon-bottom.neon-before.neon-after > :first-child,
.neon-up.neon-down.neon-before > :first-child,
.neon-up.neon-down.neon-after > :first-child,
.neon-up.neon-down.neon-before.neon-after > :first-child {
  position: static;
}

.neon-top.neon-bottom.neon-left::before,
.neon-top.neon-bottom.neon-right::before,
.neon-top.neon-bottom.neon-left.neon-right::before,
.neon-top.neon-down.neon-left::before,
.neon-top.neon-down.neon-right::before,
.neon-top.neon-down.neon-left.neon-right::before,
.neon-up.neon-bottom.neon-before::before,
.neon-up.neon-bottom.neon-after::before,
.neon-up.neon-bottom.neon-before.neon-after::before,
.neon-up.neon-down.neon-before::before,
.neon-up.neon-down.neon-after::before,
.neon-up.neon-down.neon-before.neon-after::before,
.neon-top.neon-bottom.neon-left::after,
.neon-top.neon-bottom.neon-right::after,
.neon-top.neon-bottom.neon-left.neon-right::after,
.neon-top.neon-down.neon-left::after,
.neon-top.neon-down.neon-right::after,
.neon-top.neon-down.neon-left.neon-right::after,
.neon-up.neon-bottom.neon-before::after,
.neon-up.neon-bottom.neon-after::after,
.neon-up.neon-bottom.neon-before.neon-after::after,
.neon-up.neon-down.neon-before::after,
.neon-up.neon-down.neon-after::after,
.neon-up.neon-down.neon-before.neon-after::after {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  position: absolute;
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  transform-origin: center center;
}

.neon-top.neon-bottom.neon-left::before,
.neon-top.neon-bottom.neon-right::before,
.neon-top.neon-bottom.neon-left.neon-right::before,
.neon-top.neon-down.neon-left::before,
.neon-top.neon-down.neon-right::before,
.neon-top.neon-down.neon-left.neon-right::before,
.neon-up.neon-bottom.neon-before::before,
.neon-up.neon-bottom.neon-after::before,
.neon-up.neon-bottom.neon-before.neon-after::before,
.neon-up.neon-down.neon-before::before,
.neon-up.neon-down.neon-after::before,
.neon-up.neon-down.neon-before.neon-after::before {
  bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
  top: auto;
  left: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(50%) scaleY(-1) rotate(-90deg);
}

.neon-top.neon-bottom.neon-left::after,
.neon-top.neon-bottom.neon-right::after,
.neon-top.neon-bottom.neon-left.neon-right::after,
.neon-top.neon-down.neon-left::after,
.neon-top.neon-down.neon-right::after,
.neon-top.neon-down.neon-left.neon-right::after,
.neon-up.neon-bottom.neon-before::after,
.neon-up.neon-bottom.neon-after::after,
.neon-up.neon-bottom.neon-before.neon-after::after,
.neon-up.neon-down.neon-before::after,
.neon-up.neon-down.neon-after::after,
.neon-up.neon-down.neon-before.neon-after::after {
  bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
  top: auto;
  right: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  left: auto;
  transform: translateY(50%) rotate(90deg);
}

.neon-top.neon-bottom.neon-left > :first-child::before,
.neon-top.neon-bottom.neon-right > :first-child::before,
.neon-top.neon-bottom.neon-left.neon-right > :first-child::before,
.neon-top.neon-down.neon-left > :first-child::before,
.neon-top.neon-down.neon-right > :first-child::before,
.neon-top.neon-down.neon-left.neon-right > :first-child::before,
.neon-up.neon-bottom.neon-before > :first-child::before,
.neon-up.neon-bottom.neon-after > :first-child::before,
.neon-up.neon-bottom.neon-before.neon-after > :first-child::before,
.neon-up.neon-down.neon-before > :first-child::before,
.neon-up.neon-down.neon-after > :first-child::before,
.neon-up.neon-down.neon-before.neon-after > :first-child::before,
.neon-top.neon-bottom.neon-left > :first-child::after,
.neon-top.neon-bottom.neon-right > :first-child::after,
.neon-top.neon-bottom.neon-left.neon-right > :first-child::after,
.neon-top.neon-down.neon-left > :first-child::after,
.neon-top.neon-down.neon-right > :first-child::after,
.neon-top.neon-down.neon-left.neon-right > :first-child::after,
.neon-up.neon-bottom.neon-before > :first-child::after,
.neon-up.neon-bottom.neon-after > :first-child::after,
.neon-up.neon-bottom.neon-before.neon-after > :first-child::after,
.neon-up.neon-down.neon-before > :first-child::after,
.neon-up.neon-down.neon-after > :first-child::after,
.neon-up.neon-down.neon-before.neon-after > :first-child::after {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  position: absolute;
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  transform-origin: center center;
}

.neon-top.neon-bottom.neon-left > :first-child::before,
.neon-top.neon-bottom.neon-right > :first-child::before,
.neon-top.neon-bottom.neon-left.neon-right > :first-child::before,
.neon-top.neon-down.neon-left > :first-child::before,
.neon-top.neon-down.neon-right > :first-child::before,
.neon-top.neon-down.neon-left.neon-right > :first-child::before,
.neon-up.neon-bottom.neon-before > :first-child::before,
.neon-up.neon-bottom.neon-after > :first-child::before,
.neon-up.neon-bottom.neon-before.neon-after > :first-child::before,
.neon-up.neon-down.neon-before > :first-child::before,
.neon-up.neon-down.neon-after > :first-child::before,
.neon-up.neon-down.neon-before.neon-after > :first-child::before {
  top: calc(var(--neon-divider-thickness, 16.035px) / 2);
  bottom: auto;
  left: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(-50%) scaleY(-1) rotate(-90deg);
}

.neon-top.neon-bottom.neon-left > :first-child::after,
.neon-top.neon-bottom.neon-right > :first-child::after,
.neon-top.neon-bottom.neon-left.neon-right > :first-child::after,
.neon-top.neon-down.neon-left > :first-child::after,
.neon-top.neon-down.neon-right > :first-child::after,
.neon-top.neon-down.neon-left.neon-right > :first-child::after,
.neon-up.neon-bottom.neon-before > :first-child::after,
.neon-up.neon-bottom.neon-after > :first-child::after,
.neon-up.neon-bottom.neon-before.neon-after > :first-child::after,
.neon-up.neon-down.neon-before > :first-child::after,
.neon-up.neon-down.neon-after > :first-child::after,
.neon-up.neon-down.neon-before.neon-after > :first-child::after {
  top: calc(var(--neon-divider-thickness, 16.035px) / 2);
  bottom: auto;
  right: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  left: auto;
  transform: translateY(-50%) rotate(90deg);
}

/* Vertical side caps on pseudos when top/bottom are not both present. */
.neon-top.neon-left.neon-right:not(.neon-bottom)::before,
.neon-up.neon-before.neon-after:not(.neon-down)::before,
.neon-bottom.neon-left.neon-right:not(.neon-top)::before {
  content: "";
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  display: block;
  pointer-events: none;
  z-index: 2;
  left: 0;
  right: 0;
  width: auto;
  height: var(--neon-divider-end-height, 36.494px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  background-image:
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
  background-size:
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px);
  background-position: left top, right top;
}

.neon-top.neon-left.neon-right:not(.neon-bottom)::after,
.neon-up.neon-before.neon-after:not(.neon-down)::after,
.neon-bottom.neon-left.neon-right:not(.neon-top)::after {
  content: "";
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  top: auto;
  display: block;
  pointer-events: none;
  z-index: 2;
  left: 0;
  right: 0;
  width: auto;
  height: var(--neon-divider-end-height, 36.494px);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
  transform: scaleY(-1);
  transform-origin: center center;
  background-image:
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
    var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
  background-size:
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
    var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px);
  background-position: left bottom, right bottom;
}

/* Single horizontal row caps when only top or bottom meets a side. */
.neon-top.neon-left:not(.neon-right):not(.neon-bottom) > :first-child,
.neon-top.neon-right:not(.neon-left):not(.neon-bottom) > :first-child,
.neon-bottom.neon-left:not(.neon-right):not(.neon-top) > :first-child,
.neon-bottom.neon-right:not(.neon-left):not(.neon-top) > :first-child {
  position: static;
}

.neon-top.neon-left:not(.neon-right):not(.neon-bottom) > :first-child::before,
.neon-bottom.neon-left:not(.neon-right):not(.neon-top) > :first-child::before {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  position: absolute;
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  transform-origin: center center;
  left: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  transform: translateY(-50%) scaleY(-1) rotate(-90deg);
}

.neon-top.neon-left:not(.neon-right):not(.neon-bottom) > :first-child::before {
  top: calc(var(--neon-divider-thickness, 16.035px) / 2);
  bottom: auto;
}

.neon-bottom.neon-left:not(.neon-right):not(.neon-top) > :first-child::before {
  bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
  top: auto;
  transform: translateY(50%) scaleY(-1) rotate(-90deg);
}

.neon-top.neon-right:not(.neon-left):not(.neon-bottom) > :first-child::after,
.neon-bottom.neon-right:not(.neon-left):not(.neon-top) > :first-child::after {
  content: "";
  background-image: var(
    --neon-divider-end-src,
    url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  position: absolute;
  display: block;
  width: var(--neon-divider-end-width, 16.035px);
  height: var(--neon-divider-end-height, 36.494px);
  pointer-events: none;
  z-index: 2;
  transform-origin: center center;
  right: calc(
    var(--neon-divider-end-height, 36.494px) / 2 -
    var(--neon-divider-end-width, 16.035px) / 2 -
    3px
  );
  left: auto;
  transform: translateY(-50%) rotate(90deg);
}

.neon-top.neon-right:not(.neon-left):not(.neon-bottom) > :first-child::after {
  top: calc(var(--neon-divider-thickness, 16.035px) / 2);
  bottom: auto;
}

.neon-bottom.neon-right:not(.neon-left):not(.neon-top) > :first-child::after {
  bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
  top: auto;
  transform: translateY(50%) rotate(90deg);
}
/* -desktop (min-width 769px) / -mobile (max-width 768px). Mobile band padding. */

@media (min-width: 769px) {

  .neon-top-desktop:not(.neon-top):not(.neon-up):not(.neon-bottom):not(.neon-down):not(.neon-bottom-desktop) {
    background-image: var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
    background-repeat: repeat-x;
    background-size: auto var(--neon-divider-thickness, 16.035px);
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: var(--neon-divider-tube-inset, 10px) 0;
  }

  .neon-bottom-desktop:not(.neon-bottom):not(.neon-down):not(.neon-top):not(.neon-up):not(.neon-top-desktop) {
    background-image: var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
    background-repeat: repeat-x;
    background-size: auto var(--neon-divider-thickness, 16.035px);
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: var(--neon-divider-tube-inset, 10px) 100%;
  }

  .neon-left-desktop:not(.neon-left):not(.neon-before):not(.neon-right):not(.neon-after):not(.neon-right-desktop):not(.neon-after-desktop) {
    background-image: var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
    background-repeat: repeat-y;
    background-size: var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: left var(--neon-divider-tube-inset, 10px);
  }

  .neon-right-desktop:not(.neon-right):not(.neon-after):not(.neon-left):not(.neon-before):not(.neon-left-desktop):not(.neon-before-desktop) {
    background-image: var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
    background-repeat: repeat-y;
    background-size: var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: right var(--neon-divider-tube-inset, 10px);
  }

  .neon-left-desktop:not(.neon-right):not(.neon-after):not(.neon-right-desktop):not(.neon-after-desktop)::before,
  .neon-right-desktop:not(.neon-left):not(.neon-before):not(.neon-left-desktop):not(.neon-before-desktop)::before {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    top: -3px;
    display: block;
    width: var(--neon-divider-band-vertical, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
  }

  .neon-left-desktop:not(.neon-right):not(.neon-after):not(.neon-right-desktop):not(.neon-after-desktop)::before { left: 0; }
  .neon-right-desktop:not(.neon-left):not(.neon-before):not(.neon-left-desktop):not(.neon-before-desktop)::before { right: 0; left: auto; }

  .neon-left-desktop:not(.neon-right):not(.neon-after):not(.neon-right-desktop):not(.neon-after-desktop)::after,
  .neon-right-desktop:not(.neon-left):not(.neon-before):not(.neon-left-desktop):not(.neon-before-desktop)::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    bottom: -3px;
    top: auto;
    display: block;
    width: var(--neon-divider-band-vertical, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
    transform: scaleY(-1);
    transform-origin: center center;
  }

  .neon-left-desktop:not(.neon-right):not(.neon-after):not(.neon-right-desktop):not(.neon-after-desktop)::after { left: 0; }
  .neon-right-desktop:not(.neon-left):not(.neon-before):not(.neon-left-desktop):not(.neon-before-desktop)::after { right: 0; left: auto; }

  .neon-top-desktop:not(.neon-bottom):not(.neon-down):not(.neon-bottom-desktop)::before,
  .neon-top-desktop:not(.neon-bottom):not(.neon-down):not(.neon-bottom-desktop)::after,
  .neon-bottom-desktop:not(.neon-top):not(.neon-up):not(.neon-top-desktop)::before,
  .neon-bottom-desktop:not(.neon-top):not(.neon-up):not(.neon-top-desktop)::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    display: block;
    width: var(--neon-divider-end-width, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
    transform-origin: center center;
  }

  .neon-top-desktop:not(.neon-bottom):not(.neon-down):not(.neon-bottom-desktop)::before {
    top: calc(var(--neon-divider-thickness, 16.035px) / 2);
    left: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    transform: translateY(-50%) scaleY(-1) rotate(-90deg);
  }

  .neon-top-desktop:not(.neon-bottom):not(.neon-down):not(.neon-bottom-desktop)::after {
    top: calc(var(--neon-divider-thickness, 16.035px) / 2);
    right: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    left: auto;
    transform: translateY(-50%) rotate(90deg);
  }

  .neon-bottom-desktop:not(.neon-top):not(.neon-up):not(.neon-top-desktop)::before {
    bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
    top: auto;
    left: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    transform: translateY(50%) scaleY(-1) rotate(-90deg);
  }

  .neon-bottom-desktop:not(.neon-top):not(.neon-up):not(.neon-top-desktop)::after {
    bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
    top: auto;
    right: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    left: auto;
    transform: translateY(50%) rotate(90deg);
  }

  .neon-left-desktop.neon-right-desktop:not(.neon-top):not(.neon-bottom):not(.neon-top-desktop):not(.neon-bottom-desktop) {
    background-image:
      var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png")),
      var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
    background-repeat: repeat-y, repeat-y;
    background-size:
      var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px)),
      var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
    background-origin: padding-box;
    background-clip: padding-box;
    background-position:
      left var(--neon-divider-tube-inset, 10px),
      right var(--neon-divider-tube-inset, 10px);
  }

  .neon-left-desktop.neon-right-desktop:not(.neon-top):not(.neon-bottom)::before,
  .neon-left-desktop.neon-right-desktop:not(.neon-top):not(.neon-bottom)::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
    display: block;
    width: var(--neon-divider-band-vertical, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
  }

  .neon-left-desktop.neon-right-desktop:not(.neon-top):not(.neon-bottom)::before {
    top: -3px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    background-image:
      var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
      var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-size:
      var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
      var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px);
    background-position: left top, right top;
    left: 0;
    right: 0;
    width: auto;
  }

  .neon-left-desktop.neon-right-desktop:not(.neon-top):not(.neon-bottom)::after {
    bottom: -3px;
    top: auto;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
    transform: scaleY(-1);
    transform-origin: center center;
    background-image:
      var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
      var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-size:
      var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
      var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px);
    background-position: left bottom, right bottom;
    left: 0;
    right: 0;
    width: auto;
  }

  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop) {
    background-image:
      var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
      var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
    background-repeat: repeat-x, repeat-x;
    background-size: auto var(--neon-divider-thickness, 16.035px), auto var(--neon-divider-thickness, 16.035px);
    background-origin: padding-box;
    background-clip: padding-box;
    background-position:
      var(--neon-divider-tube-inset, 10px) 0,
      var(--neon-divider-tube-inset, 10px) 100%;
  }

  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop) > :first-child {
    position: static;
  }

  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop)::before,
  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop)::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    display: block;
    width: var(--neon-divider-end-width, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
    transform-origin: center center;
  }

  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop)::before {
    bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
    top: auto;
    left: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    transform: translateY(50%) scaleY(-1) rotate(-90deg);
  }

  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop)::after {
    bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
    top: auto;
    right: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    left: auto;
    transform: translateY(50%) rotate(90deg);
  }

  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop) > :first-child::before,
  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop) > :first-child::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    display: block;
    width: var(--neon-divider-end-width, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
    transform-origin: center center;
  }

  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop) > :first-child::before {
    top: calc(var(--neon-divider-thickness, 16.035px) / 2);
    bottom: auto;
    left: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    transform: translateY(-50%) scaleY(-1) rotate(-90deg);
  }

  .neon-top-desktop.neon-bottom-desktop:not(.neon-left):not(.neon-right):not(.neon-left-desktop):not(.neon-right-desktop) > :first-child::after {
    top: calc(var(--neon-divider-thickness, 16.035px) / 2);
    bottom: auto;
    right: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    left: auto;
    transform: translateY(-50%) rotate(90deg);
  }

}

@media (max-width: 768px) {

  .neon-left-mobile:not(.neon-left):not(.neon-before),
  .container.neon-left-mobile:not(.neon-left):not(.neon-before) {
    padding-left: calc(
      var(--neon-divider-band-vertical, 16.035px) + var(--neon-divider-gap, 1rem)
    );
  }

  .neon-right-mobile:not(.neon-right):not(.neon-after),
  .container.neon-right-mobile:not(.neon-right):not(.neon-after) {
    padding-right: calc(
      var(--neon-divider-band-vertical, 16.035px) + var(--neon-divider-gap, 1rem)
    );
  }

  .neon-top-mobile:not(.neon-top):not(.neon-up):not(.neon-bottom):not(.neon-down):not(.neon-bottom-mobile),
  .container.neon-top-mobile:not(.neon-top):not(.neon-up):not(.neon-bottom):not(.neon-down) {
    padding-top: calc(
      var(--neon-divider-band-horizontal, 36.494px) + var(--neon-divider-gap, 1rem)
    );
  }

  .neon-bottom-mobile:not(.neon-bottom):not(.neon-down):not(.neon-top):not(.neon-up),
  .container.neon-bottom-mobile:not(.neon-bottom):not(.neon-down):not(.neon-top):not(.neon-up) {
    padding-bottom: calc(
      var(--neon-divider-band-horizontal, 36.494px) + var(--neon-divider-gap, 1rem)
    );
  }

  .neon-top-mobile:not(.neon-top):not(.neon-up):not(.neon-bottom):not(.neon-down):not(.neon-bottom-mobile) {
    background-image: var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
    background-repeat: repeat-x;
    background-size: auto var(--neon-divider-thickness, 16.035px);
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: var(--neon-divider-tube-inset, 10px) 0;
  }

  .neon-bottom-mobile:not(.neon-bottom):not(.neon-down):not(.neon-top):not(.neon-up):not(.neon-top-mobile) {
    background-image: var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
    background-repeat: repeat-x;
    background-size: auto var(--neon-divider-thickness, 16.035px);
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: var(--neon-divider-tube-inset, 10px) 100%;
  }

  .neon-left-mobile:not(.neon-left):not(.neon-before):not(.neon-right):not(.neon-after):not(.neon-right-mobile):not(.neon-after-mobile) {
    background-image: var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
    background-repeat: repeat-y;
    background-size: var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: left var(--neon-divider-tube-inset, 10px);
  }

  .neon-right-mobile:not(.neon-right):not(.neon-after):not(.neon-left):not(.neon-before):not(.neon-left-mobile):not(.neon-before-mobile) {
    background-image: var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
    background-repeat: repeat-y;
    background-size: var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: right var(--neon-divider-tube-inset, 10px);
  }

  .neon-left-mobile:not(.neon-right):not(.neon-after):not(.neon-right-mobile):not(.neon-after-mobile)::before,
  .neon-right-mobile:not(.neon-left):not(.neon-before):not(.neon-left-mobile):not(.neon-before-mobile)::before {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    top: -3px;
    display: block;
    width: var(--neon-divider-band-vertical, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
  }

  .neon-left-mobile:not(.neon-right):not(.neon-after):not(.neon-right-mobile):not(.neon-after-mobile)::before { left: 0; }
  .neon-right-mobile:not(.neon-left):not(.neon-before):not(.neon-left-mobile):not(.neon-before-mobile)::before { right: 0; left: auto; }

  .neon-left-mobile:not(.neon-right):not(.neon-after):not(.neon-right-mobile):not(.neon-after-mobile)::after,
  .neon-right-mobile:not(.neon-left):not(.neon-before):not(.neon-left-mobile):not(.neon-before-mobile)::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    bottom: -3px;
    top: auto;
    display: block;
    width: var(--neon-divider-band-vertical, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
    transform: scaleY(-1);
    transform-origin: center center;
  }

  .neon-left-mobile:not(.neon-right):not(.neon-after):not(.neon-right-mobile):not(.neon-after-mobile)::after { left: 0; }
  .neon-right-mobile:not(.neon-left):not(.neon-before):not(.neon-left-mobile):not(.neon-before-mobile)::after { right: 0; left: auto; }

  .neon-top-mobile:not(.neon-bottom):not(.neon-down):not(.neon-bottom-mobile)::before,
  .neon-top-mobile:not(.neon-bottom):not(.neon-down):not(.neon-bottom-mobile)::after,
  .neon-bottom-mobile:not(.neon-top):not(.neon-up):not(.neon-top-mobile)::before,
  .neon-bottom-mobile:not(.neon-top):not(.neon-up):not(.neon-top-mobile)::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    display: block;
    width: var(--neon-divider-end-width, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
    transform-origin: center center;
  }

  .neon-top-mobile:not(.neon-bottom):not(.neon-down):not(.neon-bottom-mobile)::before {
    top: calc(var(--neon-divider-thickness, 16.035px) / 2);
    left: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    transform: translateY(-50%) scaleY(-1) rotate(-90deg);
  }

  .neon-top-mobile:not(.neon-bottom):not(.neon-down):not(.neon-bottom-mobile)::after {
    top: calc(var(--neon-divider-thickness, 16.035px) / 2);
    right: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    left: auto;
    transform: translateY(-50%) rotate(90deg);
  }

  .neon-bottom-mobile:not(.neon-top):not(.neon-up):not(.neon-top-mobile)::before {
    bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
    top: auto;
    left: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    transform: translateY(50%) scaleY(-1) rotate(-90deg);
  }

  .neon-bottom-mobile:not(.neon-top):not(.neon-up):not(.neon-top-mobile)::after {
    bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
    top: auto;
    right: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    left: auto;
    transform: translateY(50%) rotate(90deg);
  }

  .neon-left-mobile.neon-right-mobile:not(.neon-top):not(.neon-bottom):not(.neon-top-mobile):not(.neon-bottom-mobile) {
    background-image:
      var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png")),
      var(--neon-divider-tube-v-src, url("../../images/pipes/neon-tube-mid.png"));
    background-repeat: repeat-y, repeat-y;
    background-size:
      var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px)),
      var(--neon-divider-band-vertical, 16.035px) calc(100% - 2 * var(--neon-divider-tube-inset, 10px));
    background-origin: padding-box;
    background-clip: padding-box;
    background-position:
      left var(--neon-divider-tube-inset, 10px),
      right var(--neon-divider-tube-inset, 10px);
  }

  .neon-left-mobile.neon-right-mobile:not(.neon-top):not(.neon-bottom)::before,
  .neon-left-mobile.neon-right-mobile:not(.neon-top):not(.neon-bottom)::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    position: absolute;
    display: block;
    width: var(--neon-divider-band-vertical, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
  }

  .neon-left-mobile.neon-right-mobile:not(.neon-top):not(.neon-bottom)::before {
    top: -3px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    background-image:
      var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
      var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-size:
      var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
      var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px);
    background-position: left top, right top;
    left: 0;
    right: 0;
    width: auto;
  }

  .neon-left-mobile.neon-right-mobile:not(.neon-top):not(.neon-bottom)::after {
    bottom: -3px;
    top: auto;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 0%, #000 78%, transparent 100%);
    transform: scaleY(-1);
    transform-origin: center center;
    background-image:
      var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg")),
      var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-size:
      var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px),
      var(--neon-divider-band-vertical, 16.035px) var(--neon-divider-end-height, 36.494px);
    background-position: left bottom, right bottom;
    left: 0;
    right: 0;
    width: auto;
  }

  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile) {
    background-image:
      var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png")),
      var(--neon-divider-tube-h-src, url("../../images/pipes/neon-tube-mid-h.png"));
    background-repeat: repeat-x, repeat-x;
    background-size: auto var(--neon-divider-thickness, 16.035px), auto var(--neon-divider-thickness, 16.035px);
    background-origin: padding-box;
    background-clip: padding-box;
    background-position:
      var(--neon-divider-tube-inset, 10px) 0,
      var(--neon-divider-tube-inset, 10px) 100%;
  }

  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile) > :first-child {
    position: static;
  }

  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile)::before,
  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile)::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    display: block;
    width: var(--neon-divider-end-width, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
    transform-origin: center center;
  }

  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile)::before {
    bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
    top: auto;
    left: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    transform: translateY(50%) scaleY(-1) rotate(-90deg);
  }

  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile)::after {
    bottom: calc(var(--neon-divider-thickness, 16.035px) / 2);
    top: auto;
    right: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    left: auto;
    transform: translateY(50%) rotate(90deg);
  }

  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile) > :first-child::before,
  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile) > :first-child::after {
    content: "";
    background-image: var(--neon-divider-end-src, url("/themes/custom/hcp_nxt/images/pipes/vertical-neon-pipe.svg"));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
    position: absolute;
    display: block;
    width: var(--neon-divider-end-width, 16.035px);
    height: var(--neon-divider-end-height, 36.494px);
    pointer-events: none;
    z-index: 2;
    transform-origin: center center;
  }

  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile) > :first-child::before {
    top: calc(var(--neon-divider-thickness, 16.035px) / 2);
    bottom: auto;
    left: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    transform: translateY(-50%) scaleY(-1) rotate(-90deg);
  }

  .neon-top-mobile.neon-bottom-mobile:not(.neon-left):not(.neon-right):not(.neon-left-mobile):not(.neon-right-mobile) > :first-child::after {
    top: calc(var(--neon-divider-thickness, 16.035px) / 2);
    bottom: auto;
    right: calc(var(--neon-divider-end-height, 36.494px) / 2 - var(--neon-divider-end-width, 16.035px) / 2 - 3px);
    left: auto;
    transform: translateY(-50%) rotate(90deg);
  }

}