.qrystal-video-carousel {
  position: relative;
  width: 100%;
  color: #fff;
  --qvc-gap: 4px;
  --qvc-width: calc((100% - 4 * var(--qvc-gap)) / 5);
  /* QRS-392: the cards use 90% of the row, centred: 10% less height, same 9:16 shape. */
  --qvc-size: 90%;
}

.qrystal-video-carousel *,
.qrystal-video-carousel *::before,
.qrystal-video-carousel *::after { box-sizing: border-box; }
.qrystal-video-carousel [hidden] { display: none !important; }

.qrystal-video-carousel .qvc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--qvc-width);
  gap: var(--qvc-gap);
  width: var(--qvc-size);
  margin: 0 auto;
  padding: 3px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 3px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.qvc-track::-webkit-scrollbar { display: none; }

.qrystal-video-carousel .qvc-card {
  position: relative;
  margin: 0;
  padding: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 8px;
  background: #191919;
  scroll-snap-align: start;
  isolation: isolate;
}

.qrystal-video-carousel .qvc-poster,
.qrystal-video-carousel .qvc-preview,
.qrystal-video-carousel .qvc-full-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}
.qrystal-video-carousel .qvc-full-video { pointer-events: none; }
.qvc-preview { opacity: 0; pointer-events: none; }
.qvc-card.has-frames .qvc-preview { opacity: 1; }
.qvc-card.has-frames .qvc-poster { visibility: hidden; }

.qrystal-video-carousel button {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.qrystal-video-carousel .qvc-open {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.qvc-profile {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 36px;
  background: linear-gradient(#0008, transparent);
  font-size: 12px;
  line-height: 1.3;
  z-index: 2;
  pointer-events: none;
}
.qvc-profile > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qvc-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #111;
  font-size: 10px;
  letter-spacing: .04em;
}
.qvc-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 40px 14px 16px;
  background: linear-gradient(transparent, #000a);
  font-size: 13px;
  line-height: 1.5;
  z-index: 2;
  pointer-events: none;
}
.qrystal-video-carousel .qvc-caption p { margin: 0; font-size: inherit; color: inherit; }

.qrystal-video-carousel .qvc-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #161616;
  transform: translateY(-50%);
  z-index: 4;
}
.qvc-prev { left: 12px; }
.qvc-next { right: 12px; }
.qvc-lightbox-open .qrystal-video-carousel > .qvc-nav { visibility: hidden; pointer-events: none; }
.qrystal-video-carousel button:focus-visible,
.qrystal-video-carousel a:focus-visible,
.qvc-track:focus-visible { outline: 2px solid #b99b65; outline-offset: -3px; }

.qrystal-video-carousel .qvc-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: #fff;
  font: inherit;
  --qvc-active-width: min(48vw, 48.375vh, 483.75px);
  --qvc-active-width: min(48vw, 48.375svh, 483.75px);
  --qvc-peek-width: min(calc(var(--qvc-active-width) * .6), calc((100vw - var(--qvc-active-width) - 128px) / 4));
  --qvc-neighbours: 2;
  --qvc-stage-gap: 24px;
}
.qrystal-video-carousel .qvc-dialog:not([open]) { display: none; }
.qvc-dialog::backdrop {
  background: #000b;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.qvc-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--qvc-active-width) + var(--qvc-neighbours) * 2 * (var(--qvc-peek-width) + var(--qvc-stage-gap)));
  max-width: calc(100vw - 32px);
  height: 100%;
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
}
.qvc-size-guide { position: absolute; width: var(--qvc-peek-width); height: 0; visibility: hidden; }
.qvc-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--qvc-active-width);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 4px;
  background: #111;
  transform: translate(-50%, -50%);
  transition: none;
  pointer-events: auto;
}
.qvc-stage.is-sliding .qvc-slide { transition: transform 380ms cubic-bezier(.22,.68,0,1); }
.qvc-slide-poster { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.qvc-active {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
  touch-action: pan-y;
  z-index: 2;
}
.qrystal-video-carousel .qvc-peek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  transition: none;
  z-index: 1;
}
.qvc-peek:hover { outline: 1px solid #fff6; outline-offset: -1px; }
.qvc-dialog-profile { padding: 18px 66px 40px 18px; font-size: 16px; }
.qvc-dialog-profile .qvc-avatar { flex-basis: 36px; height: 36px; font-size: 12px; }
.qrystal-video-carousel .qvc-close {
  position: absolute;
  top: calc(50% - var(--qvc-active-width) * 8 / 9 + 14px);
  right: calc(50% - var(--qvc-active-width) / 2 + 12px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0003;
  color: #fff;
  z-index: 3;
}
/* QRS-391: the visitor's sound button, left of the close button (hidden for "Always muted" cards and silent videos). */
.qrystal-video-carousel .qvc-sound {
  position: absolute;
  top: calc(50% - var(--qvc-active-width) * 8 / 9 + 14px);
  right: calc(50% - var(--qvc-active-width) / 2 + 64px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0003;
  color: #fff;
  z-index: 3;
}
.qvc-sound[aria-pressed="false"] .qvc-sound-off,
.qvc-sound[aria-pressed="true"] .qvc-sound-on { display: none; }
.qvc-dialog:has(.qvc-sound:not([hidden])) .qvc-dialog-profile { padding-right: 118px; }
.qvc-dialog-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 40px 18px 12px;
  background: linear-gradient(transparent, #0008);
  pointer-events: none;
}
.qrystal-video-carousel .qvc-dialog-text { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #fff; }
.qvc-dialog-text:empty { display: none; }
.qrystal-video-carousel .qvc-cta {
  display: block;
  padding: 12px 16px;
  border-radius: 4px;
  background: #ffffffe6;
  color: #161616;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  pointer-events: auto;
}
.qvc-dialog-prev { left: 16px; }
.qvc-dialog-next { right: 16px; }
.qrystal-video-carousel .qvc-dialog-control:focus-visible {
  position: fixed;
  bottom: 16px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 16px;
  overflow: visible;
  clip-path: none;
  border-radius: 4px;
  background: #111e;
  color: #fff;
  z-index: 4;
}
.qrystal-video-carousel .qvc-dialog-error {
  position: absolute;
  top: 40%;
  left: 18px;
  right: 18px;
  margin: 0;
  padding: 12px;
  background: #111e;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}
.qrystal-video-carousel .qvc-direct {
  position: absolute;
  top: 58%;
  left: 18px;
  right: 18px;
  padding: 12px;
  color: #fff;
  background: #111e;
  text-align: center;
  text-decoration: underline;
}
.qrystal-video-carousel .qvc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .qrystal-video-carousel { --qvc-width: calc((100% - 2 * var(--qvc-gap)) / 3); }
  .qrystal-video-carousel .qvc-dialog {
    --qvc-peek-width: min(calc(var(--qvc-active-width) * .6), calc((100vw - var(--qvc-active-width) - 64px) / 2));
    --qvc-neighbours: 1;
    --qvc-stage-gap: 16px;
  }
}
@media (max-width: 680px) {
  /* Phones: the row stays full width for the swipe; the card is 10% smaller (85% before QRS-392). */
  .qrystal-video-carousel { --qvc-size: 100%; --qvc-width: 76.5%; }
  .qrystal-video-carousel .qvc-dialog {
    --qvc-active-width: min(calc(100vw - 32px), calc((100vh - 32px) * .5625));
    --qvc-active-width: min(calc(100vw - 32px), calc((100svh - 32px) * .5625));
    --qvc-peek-width: var(--qvc-active-width);
    --qvc-neighbours: 0;
  }
  .qvc-dialog-profile { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .qvc-stage.is-sliding .qvc-slide { transition: none; }
}

/* QRS-392: [qrystal_video_grid]: a normal grid with the cards of the first carousel, in the carousel's width.
   5 per row on desktop, 3 on tablets, 2 on phones. */
.qrystal-video-carousel.qvc--grid .qvc-track {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: visible;
  scroll-snap-type: none;
}
@media (max-width: 1100px) {
  .qrystal-video-carousel.qvc--grid .qvc-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .qrystal-video-carousel.qvc--grid { --qvc-size: 90%; }
  .qrystal-video-carousel.qvc--grid .qvc-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qvc--grid .qvc-caption { display: none; }
}

/* QRS-390: [qrystal_video_zig_zag]: every video visible, in smaller frames, full width from screen edge to screen edge.
   From 901px: one row of up to 7 frames in a gentle arc (--qvc-d from the template). 681-900px: 4 per row.
   Phone: 2 columns, the second one set lower (--qvg-shift). --qvc-vw (set by js) is the page width without the
   scrollbar, so the section breaks out of its Builder row without a sideways scroll. */
.qrystal-video-carousel.qvc--zigzag {
  --qvg-cols: 7;
  --qvg-gap: 14px;
  --qvg-arc: 5px;
  --qvc-size: 100%;
  width: var(--qvc-vw, 100vw);
  max-width: none;
  margin-left: calc(50% - var(--qvc-vw, 100vw) / 2);
  margin-right: calc(50% - var(--qvc-vw, 100vw) / 2);
}
.qrystal-video-carousel.qvc--zigzag .qvc-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--qvg-gap) * 2) var(--qvg-gap);
  padding: 10px 0 calc(var(--qvg-arc) * 9 + 24px);
  overflow: visible;
  scroll-snap-type: none;
}
.qrystal-video-carousel.qvc--zigzag .qvc-card {
  flex: 0 0 calc((100% - (var(--qvg-cols) - 1) * var(--qvg-gap)) / var(--qvg-cols));
  border-radius: 14px;
  background: #1a1a1a;
  box-shadow: 0 20px 36px -22px rgba(20, 16, 12, .55);
  transform: translateY(calc(var(--qvc-d, 0) * var(--qvc-d, 0) * var(--qvg-arc) + var(--qvg-shift, 0%)));
  transition: transform .5s cubic-bezier(.2, .75, .2, 1), box-shadow .5s ease;
}
.qvc--zigzag .qvc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .42));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  pointer-events: none;
  z-index: 2;
}
.qvc--zigzag .qvc-card:focus-within {
  transform: translateY(calc(var(--qvc-d, 0) * var(--qvc-d, 0) * var(--qvg-arc) + var(--qvg-shift, 0%) - 10px));
}
@media (hover: hover) {
  .qvc--zigzag .qvc-card:hover {
    transform: translateY(calc(var(--qvc-d, 0) * var(--qvc-d, 0) * var(--qvg-arc) + var(--qvg-shift, 0%) - 10px));
    box-shadow: 0 30px 46px -24px rgba(20, 16, 12, .6);
  }
}
/* The site-wide * { font-family: inter, "Courier New" } rule falls back to Courier where Inter is not loaded. */
.qvc--zigzag .qvc-profile,
.qvc--zigzag .qvc-profile * { font-family: Raleway, sans-serif; }
.qvc--zigzag .qvc-profile { gap: 6px; padding: 10px 10px 26px; font-size: 11px; font-weight: 500; }
.qvc--zigzag .qvc-avatar { flex-basis: 22px; height: 22px; font-size: 8px; background: rgba(17, 17, 17, .75); }
.qvc--zigzag .qvc-caption { display: none; }

/* The cards rise in one after another (js adds .qvc-armed, then .qvc-in when the section is in view). */
.qvc--zigzag.qvc-armed .qvc-card { opacity: 0; translate: 0 26px; }
.qvc--zigzag.qvc-armed.qvc-in .qvc-card {
  opacity: 1;
  translate: 0 0;
  transition: opacity .7s ease calc(var(--qvc-i, 0) * 70ms), translate .9s cubic-bezier(.2, .75, .2, 1) calc(var(--qvc-i, 0) * 70ms),
    transform .5s cubic-bezier(.2, .75, .2, 1), box-shadow .5s ease;
}

@media (max-width: 1100px) {
  .qrystal-video-carousel.qvc--zigzag { --qvg-gap: 10px; --qvg-arc: 2.5px; }
}
@media (max-width: 900px) {
  .qrystal-video-carousel.qvc--zigzag { --qvg-cols: 4; --qvg-gap: 12px; --qvg-arc: 0px; }
}
@media (max-width: 680px) {
  .qrystal-video-carousel.qvc--zigzag { --qvg-gap: 10px; }
  .qrystal-video-carousel.qvc--zigzag .qvc-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--qvg-gap);
    padding: 4px 0 8px;
  }
  .qrystal-video-carousel.qvc--zigzag .qvc-card:nth-child(even) { --qvg-shift: 42%; }
  /* Only one video: centre it (the zig-zag needs 2 or more). */
  .qrystal-video-carousel.qvc--zigzag .qvc-track:has(> .qvc-card:only-child) {
    grid-template-columns: minmax(0, calc((100% - var(--qvg-gap)) / 2));
    justify-content: center;
  }
  /* An even number of cards: the last one, set lower, needs room below the grid. */
  .qrystal-video-carousel.qvc--zigzag .qvc-track:has(> .qvc-card:nth-child(even):last-child) {
    padding-bottom: calc((100% - var(--qvg-gap)) / 2 * 16 / 9 * .42 + 8px);
  }
  .qvc--zigzag .qvc-profile { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .qrystal-video-carousel.qvc--zigzag .qvc-card { transition: none; }
}