.cc_n1ohzs9r_v6TdVDTiBr .hp {
  width: 100%;
  font-family: var(--font-body);
  box-sizing: border-box;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-inner {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 27vw, 471px);
  box-sizing: border-box;
  --hp-main-image-w: clamp(140px, 22vw, 528px);
  --hp-duration: 900ms;
  --hp-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-bg, .cc_n1ohzs9r_v6TdVDTiBr .hp-bg-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ── Legibility fades over the background photo ── */
.cc_n1ohzs9r_v6TdVDTiBr .hp-fade {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-fade--left {
  top: 0;
  left: 0;
  width: 56%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-fade--right {
  top: 0;
  right: 0;
  width: 22%;
  height: 100%;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-fade--top, .cc_n1ohzs9r_v6TdVDTiBr .hp-fade--bottom {
  display: none;
  left: 0;
  width: 100%;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-fade--top {
  top: 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-fade--bottom {
  bottom: 0;
  height: 25%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

/* ── Intro glass panel (title, description, CTA, nav) ──
   A flex item (not absolutely positioned) so it can never overlap the
   slider — the row's `gap` keeps them apart at every viewport width. */
/* Overlaps the belt (absolute, not a flex sibling) so the outgoing/incoming
   slide can visibly travel behind it, edge to edge with the whole section. */
.cc_n1ohzs9r_v6TdVDTiBr .hp-intro {
  position: absolute;
  left: clamp(16px, 4vw, 72px);
  top: clamp(16px, 2.4vw, 31px);
  z-index: 2;
  width: clamp(260px, 34vw, 516px);
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.4vw, 32px);
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(20, 20, 20, 0.32);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 40px rgba(255, 255, 255, 0.03);
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-intro-text {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 16px);
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--st-fs, clamp(22px, 2.3vw, 40px));
  font-weight: var(--st-fw, 600);
  line-height: var(--st-lh, 1.2);
  white-space: pre-line;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-desc {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.9;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-intro-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(40px, 3.5vw, 52px);
  padding: 0 clamp(20px, 2.5vw, 32px);
  border: none;
  border-radius: 40px;
  box-shadow: 0 10px 8px -4px rgba(0, 0, 0, 0.4);
  font-family: var(--font-body);
  font-size: clamp(13px, 0.9vw, 14px);
  font-weight: 700;
  line-height: 20px;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-cta:hover {
  opacity: 0.9;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(38px, 3vw, 48px);
  height: clamp(38px, 3vw, 48px);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ffffff1a;
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s;
  flex-shrink: 0;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(-45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-nav-btn:hover:not(:disabled) {
  background: #ffffff0d;
  box-shadow: 0 8px 18px -3px rgba(0, 0, 0, 0.65);
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-nav-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-nav-btn:active:not(:disabled) {
  transform: scale(0.96);
  transition-duration: 0.12s;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-nav-btn:disabled {
  opacity: 0.2;
  cursor: default;
}

/* ── Product tray slider ──
   Spans the full section width (not just the space beside the intro), so
   the belt can run all the way behind the intro panel. */
.cc_n1ohzs9r_v6TdVDTiBr .hp-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.cc_n1ohzs9r_v6TdVDTiBr .hp-track {
  display: flex;
  height: 100%;
  transition: transform var(--hp-duration) var(--hp-ease);
  will-change: transform;
}

/* IkasComponentRenderer wraps children in a `display: contents` div,
   which is transparent to flex layout — the real slide roots become the
   flex items one level deeper, so size those instead of the wrapper. */
.cc_n1ohzs9r_v6TdVDTiBr .hp-track > * > * {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  padding: clamp(8px, 2vw, 24px) clamp(8px, 3vw, 48px);
  box-sizing: border-box;
}

/* No 500px cap — but sized by HEIGHT (not `width: 100%`) so the box stays
   tight around the actual photo instead of stretching edge-to-edge and
   leaving the (`object-fit: contain`) image floating center-ish inside a
   too-wide box. With a tight box, the auto left margin has real free space
   to push it flush right next to the scanner housing image, and the right
   margin reserves exactly that image's width as a gap. Overrides
   HandpickedSlide's own `.hs-frame { width: 100%; max-width: 500px;
   margin: 0 auto }`. */
.cc_n1ohzs9r_v6TdVDTiBr .hp-track .hs-frame {
  width: auto;
  height: calc(100% - 48px);
  max-width: none;
  margin: unset;
  margin-left: auto;
  margin-right: var(--hp-main-image-w);
}

/* ── Standalone right-edge image (separate from the background photo) ── */
.cc_n1ohzs9r_v6TdVDTiBr .hp-main-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--hp-main-image-w);
  object-fit: cover;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 1024px) {
  .cc_n1ohzs9r_v6TdVDTiBr .hp-main-image {
    display: none;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-track > * > * {
    padding-right: clamp(8px, 3vw, 48px);
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-track .hs-frame {
    width: 100%;
    height: auto;
    margin-right: unset;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 16px;
    padding: 16px;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-bg, .cc_n1ohzs9r_v6TdVDTiBr .hp-bg-fallback {
    min-height: 480px;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-fade--left, .cc_n1ohzs9r_v6TdVDTiBr .hp-fade--right {
    display: none;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-fade--top, .cc_n1ohzs9r_v6TdVDTiBr .hp-fade--bottom {
    display: block;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-intro {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
    min-height: 0;
    gap: 24px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: none;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-intro-text {
    gap: 8px;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-title {
    font-size: var(--st-fs-m, 24px);
    line-height: var(--st-lh-m, 32px);
    font-weight: var(--st-fw-m, var(--st-fw, 600));
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-desc {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    opacity: 0.9;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-intro-actions {
    margin-top: 0;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-cta {
    height: 40px;
    padding: 0 24px;
    font-size: 14px;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-nav-btn {
    width: 40px;
    height: 40px;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-slider {
    position: relative;
    inset: auto;
  }

  .cc_n1ohzs9r_v6TdVDTiBr .hp-track > * > * {
    padding: 0;
  }
}