.cc_b3eorip4_7B4gfqytxJ .sg-vs { overflow: hidden; }
/* edge-to-edge rail: the heading still keeps the page gutter */
.cc_b3eorip4_7B4gfqytxJ .sg-vs .sg-container--bleed > .sg-head { padding-inline: var(--sg-gutter); }
.cc_b3eorip4_7B4gfqytxJ .sg-vs__viewport { position: relative; min-width: 0; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs__rail { padding-bottom: 4px; }
/* children sit inside display:contents wrappers — snap on the card itself */
.cc_b3eorip4_7B4gfqytxJ .sg-vs__rail .sg-vst { scroll-snap-align: start; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs__ctl { margin-top: 24px; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs__empty { padding: 32px; text-align: center; border: 1.5px dashed var(--sg-line-strong); border-radius: var(--sg-r-card); }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--noprod .sg-vst__product { display: none; }

/* product bar over the video (cart button) instead of the chip below it
   (specificity above the bar's own display rule and the card's default "none") */
.cc_b3eorip4_7B4gfqytxJ .sg-vs--overlay .sg-vst .sg-vst__bar { display: flex; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--overlay .sg-vst__product { display: none; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--noprod.sg-vs--overlay .sg-vst .sg-vst__bar { display: none; }

/* staggered rise of the cards when the rail is revealed */
.cc_b3eorip4_7B4gfqytxJ [data-sg-motion="on"] .sg-vs__rail[data-sg-reveal] .sg-vst {
  opacity: 0; transform: translate3d(0, 36px, 0) scale(0.96);
  transition: opacity var(--sg-t-slow) var(--sg-ease-out), transform calc(var(--sg-t-slow) * 1.2) var(--sg-ease-out);
  transition-delay: calc(var(--sg-i, 0) * 90ms * var(--sg-speed, 1));
}
.cc_b3eorip4_7B4gfqytxJ [data-sg-motion="on"] .sg-vs__rail[data-sg-in] .sg-vst { opacity: 1; transform: none; }

/* ---------- centre layout (shoppable-video showcase) ----------
   Every slot keeps the full 9:16 box (no layout shift); side cards are cropped
   top and bottom with clip-path (--vs-cut, from "sideHeight") and their
   overlay layers slide in by the same amount, the active card opens to the
   full height with an accent ring. The rail pads half a viewport minus half a
   card on both sides (container units) so every card can reach the middle. */
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vs__viewport { container-type: inline-size; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vs__rail {
  --vs-card: calc((100cqw - (var(--n) - 1) * var(--sg-gap)) / var(--n));
  --vs-t: calc(600ms * var(--sg-speed, 1));
  grid-auto-columns: var(--vs-card);
  padding-inline: calc((100cqw - var(--vs-card)) / 2);
  margin-right: 0;
  scroll-snap-type: x mandatory;
  align-items: start;
}
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vs__rail .sg-vst { scroll-snap-align: center; scroll-snap-stop: normal; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__frame {
  clip-path: inset(var(--vs-cut) 0 round var(--sg-r-media));
  transition: clip-path var(--vs-t) var(--sg-ease-out);
}
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__top { transform: translate3d(0, var(--vs-cut), 0); transition: transform var(--vs-t) var(--sg-ease-out); }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__bottom { transform: translate3d(0, calc(var(--vs-cut) * -1), 0); transition: transform var(--vs-t) var(--sg-ease-out); }
/* chip below the video follows the crop (frame height = --vs-hr × the card width, e.g. 16/9 for 9:16) */
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__product { transform: translate3d(0, calc(var(--vs-cut-n) * var(--vs-hr, 1.7778) * -1cqw), 0); transition: transform var(--vs-t) var(--sg-ease-out); }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--vs-ring, var(--sg-accent));
  opacity: 0; transition: opacity var(--vs-t) var(--sg-ease-out);
}
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst[data-vs-active] .sg-vst__frame { clip-path: inset(0 0 round var(--sg-r-media)); }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst[data-vs-active] .sg-vst__top, .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst[data-vs-active] .sg-vst__bottom, .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst[data-vs-active] .sg-vst__product { transform: none; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst[data-vs-active] .sg-vst__frame::after { opacity: 1; }
/* side cards: the play hint invites a click (it centres the card) */
.cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst:not([data-vs-active]) .sg-vst__open { cursor: pointer; }

/* arrows + dots under the showcase (centred group); the play/pause button sits to its
   right (side columns keep room for it, so many dots wrap instead of running under it) */
.cc_b3eorip4_7B4gfqytxJ .sg-vs__nav {
  display: grid; grid-template-columns: minmax(46px, 1fr) auto minmax(46px, 1fr); align-items: center;
  column-gap: 12px; margin-top: 20px;
}
.cc_b3eorip4_7B4gfqytxJ .sg-vs__navc { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs__run { grid-column: 3; justify-self: start; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs__run:only-child { grid-column: 2; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs__dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; }
.cc_b3eorip4_7B4gfqytxJ .sg-vs__dot {
  position: relative; display: grid; place-items: center; width: 22px; height: 28px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.cc_b3eorip4_7B4gfqytxJ .sg-vs__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--sg-line-strong);
  transition: width var(--sg-t-mid) var(--sg-ease-out), background var(--sg-t-fast);
}
.cc_b3eorip4_7B4gfqytxJ .sg-vs__dot.is-active::before { width: 20px; background: var(--vs-ring, var(--sg-accent)); }
@media (hover: hover) {
  .cc_b3eorip4_7B4gfqytxJ .sg-vs__dot:hover::before { background: var(--sg-ink-3); }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs__dot.is-active:hover::before { background: var(--vs-ring, var(--sg-accent)); }
}

@media (max-width: 1023px) {
  .cc_b3eorip4_7B4gfqytxJ .sg-vs__rail { margin-right: calc(var(--sg-gutter) * -1); padding-right: var(--sg-gutter); }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vs__rail { margin-right: 0; padding-right: calc((100cqw - var(--vs-card)) / 2); }
}
@media (max-width: 767px) {
  .cc_b3eorip4_7B4gfqytxJ .sg-vs__nav { margin-top: 14px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst[data-vs-playing] .sg-vst__play { opacity: 0; }
  /* landscape cards are short on phones (~135–185px): a slimmer product bar (smaller thumbnail,
     one-line name) keeps most of the video visible; the cart button stays a 40px target */
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vst__bottom { padding: 8px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vpb { gap: 8px; padding: 5px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vpb__main { gap: 8px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vpb__thumb { width: 30px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vpb__info { gap: 1px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vpb__name { font-size: 12px; -webkit-line-clamp: 1; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vpb .sg-vpb__price .sg-price__final { font-size: 12.5px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vpb .sg-vpb__price .sg-price__old { font-size: 11px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vpb__add { width: 40px; height: 40px; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--wide .sg-vst__play { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc_b3eorip4_7B4gfqytxJ [data-sg-motion="on"] .sg-vs__rail[data-sg-reveal] .sg-vst { opacity: 1; transform: none; transition: none; }
  .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__frame, .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__top, .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__bottom, .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__product, .cc_b3eorip4_7B4gfqytxJ .sg-vs--center .sg-vst__frame::after, .cc_b3eorip4_7B4gfqytxJ .sg-vs__dot::before { transition: none; }
}

.cc_b3eorip4_7B4gfqytxJ .sg-sv {
  position: fixed; inset: 0; z-index: calc(var(--sg-z-drawer, 400) + 20);
  display: grid; place-items: center; color: #fff;
  opacity: 0; transition: opacity var(--sg-t-mid) var(--sg-ease-out);
}
.cc_b3eorip4_7B4gfqytxJ .sg-sv.is-open { opacity: 1; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv:focus { outline: none; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__backdrop { position: absolute; inset: 0; background: rgba(6, 7, 9, 0.9); backdrop-filter: blur(10px); }

.cc_b3eorip4_7B4gfqytxJ .sg-sv__frame {
  position: relative; width: min(440px, calc((100vh - 48px) * 9 / 16)); aspect-ratio: 9 / 16;
  border-radius: var(--sg-r-media); overflow: hidden; background: #000;
  transform: translate3d(0, var(--sv-drag, 0px), 0) scale(var(--sv-drag-s, 0.94));
  transition: transform calc(420ms * var(--sg-speed, 1)) var(--sg-ease-out);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.cc_b3eorip4_7B4gfqytxJ .sg-sv.is-open .sg-sv__frame { transform: translate3d(0, var(--sv-drag, 0px), 0) scale(var(--sv-drag-s, 1)); }

.cc_b3eorip4_7B4gfqytxJ .sg-sv__stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__media { width: 100%; height: 100%; object-fit: cover; animation: cc_b3eorip4_sg-fade-in calc(360ms * var(--sg-speed, 1)) ease both; pointer-events: none; }

/* progress bars */
.cc_b3eorip4_7B4gfqytxJ .sg-sv__bars { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.32); overflow: hidden; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__fill { position: absolute; inset: 0; background: #fff; transform-origin: left center; transform: scaleX(0); }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__bar.is-done .sg-sv__fill { transform: scaleX(1); }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__fill.is-active { transform: scaleX(var(--sv-p, 0)); }

.cc_b3eorip4_7B4gfqytxJ .sg-sv__top {
  position: absolute; z-index: 3; top: 20px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 6px 24px 14px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent);
}
.cc_b3eorip4_7B4gfqytxJ .sg-sv__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.85); }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__who-text { display: grid; min-width: 0; line-height: 1.25; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__handle { font-size: 13px; font-weight: 700; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__title { font-size: 12.5px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__tools { display: flex; flex-shrink: 0; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__tool {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; transition: background var(--sg-t-fast), transform var(--sg-t-fast);
}
.cc_b3eorip4_7B4gfqytxJ .sg-sv__tool:active { transform: scale(0.9); }
@media (hover: hover) { .cc_b3eorip4_7B4gfqytxJ .sg-sv__tool:hover { background: rgba(255, 255, 255, 0.16); } }

/* side arrows live outside the frame on desktop */
.cc_b3eorip4_7B4gfqytxJ .sg-sv__nav {
  position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--sg-ink); cursor: pointer;
  transition: opacity var(--sg-t-fast), transform var(--sg-t-fast) var(--sg-ease-out);
}
.cc_b3eorip4_7B4gfqytxJ .sg-sv__nav:disabled { opacity: 0; pointer-events: none; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__nav--prev { left: -68px; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__nav--next { right: -68px; }
@media (hover: hover) { .cc_b3eorip4_7B4gfqytxJ .sg-sv__nav:hover { transform: scale(1.08); } }

.cc_b3eorip4_7B4gfqytxJ .sg-sv__product { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 14px; animation: cc_b3eorip4_sg-fade-up calc(480ms * var(--sg-speed, 1)) var(--sg-ease-out) 200ms both; }
.cc_b3eorip4_7B4gfqytxJ .sg-sv__product .sg-mp--chip { width: 100%; }

@media (max-width: 767px) {
  .cc_b3eorip4_7B4gfqytxJ .sg-sv__frame { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .cc_b3eorip4_7B4gfqytxJ .sg-sv__backdrop { background: #000; }
  .cc_b3eorip4_7B4gfqytxJ .sg-sv__nav { display: none; }
  .cc_b3eorip4_7B4gfqytxJ .sg-sv__product { bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .cc_b3eorip4_7B4gfqytxJ .sg-sv, .cc_b3eorip4_7B4gfqytxJ .sg-sv__frame { transition: none; }
  .cc_b3eorip4_7B4gfqytxJ .sg-sv__media, .cc_b3eorip4_7B4gfqytxJ .sg-sv__product { animation: none; }
}