/* the card is a size container: the product bar adapts to narrow cards and the
   section's centre layout measures the frame height in cqw */
.cc_b3eorip4_ADbxAIJiAi .sg-vst { display: grid; gap: 10px; align-content: start; min-width: 0; container-type: inline-size; }
.cc_b3eorip4_ADbxAIJiAi .sg-vst__frame {
  /* the section picks the card ratio (videoRatio → --vs-ar); vertical reels by default */
  position: relative; aspect-ratio: var(--vs-ar, 9 / 16); overflow: hidden; isolation: isolate;
  border-radius: var(--sg-r-media); background: var(--sg-surface-3);
}
.cc_b3eorip4_ADbxAIJiAi .sg-vst__poster, .cc_b3eorip4_ADbxAIJiAi .sg-vst__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* dark until the first frame arrives (videos without a poster) */
.cc_b3eorip4_ADbxAIJiAi .sg-vst__video { background: #1d2125; transition: transform calc(900ms * var(--sg-speed, 1)) var(--sg-ease-out); }

/* the whole frame is the "open story" button */
.cc_b3eorip4_ADbxAIJiAi .sg-vst__open { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cc_b3eorip4_ADbxAIJiAi .sg-vst__play {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.24); color: #fff; backdrop-filter: blur(8px);
  opacity: 0; transform: scale(0.7); transition: opacity var(--sg-t-mid), transform var(--sg-t-mid) var(--sg-ease-spring);
}
.cc_b3eorip4_ADbxAIJiAi .sg-vst__play svg { fill: currentColor; }
@media (hover: hover) {
  .cc_b3eorip4_ADbxAIJiAi .sg-vst__open:hover .sg-vst__play { opacity: 1; transform: none; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vst__frame:hover .sg-vst__video { transform: scale(1.04); }
}
.cc_b3eorip4_ADbxAIJiAi .sg-vst__open:focus-visible .sg-vst__play { opacity: 1; transform: none; }

/* overlay layers (click-through except their controls); the section's centre
   layout slides them in when a side card is cropped */
.cc_b3eorip4_ADbxAIJiAi .sg-vst__top, .cc_b3eorip4_ADbxAIJiAi .sg-vst__bottom { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cc_b3eorip4_ADbxAIJiAi .sg-vst__bottom { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; }
.cc_b3eorip4_ADbxAIJiAi .sg-vst__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.62) 100%); }

.cc_b3eorip4_ADbxAIJiAi .sg-vst__sound {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; pointer-events: auto;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.38); color: #fff; cursor: pointer;
  transition: background var(--sg-t-fast), transform var(--sg-t-fast) var(--sg-ease-out);
}
.cc_b3eorip4_ADbxAIJiAi .sg-vst__sound:active { transform: scale(0.9); }
.cc_b3eorip4_ADbxAIJiAi .sg-vst.is-sound .sg-vst__sound { background: #fff; color: var(--sg-ink); }
.cc_b3eorip4_ADbxAIJiAi .sg-vst.is-sound .sg-vst__sound svg { animation: cc_b3eorip4_sg-pop calc(380ms * var(--sg-speed, 1)) var(--sg-ease-spring); }

.cc_b3eorip4_ADbxAIJiAi .sg-vst__cap { display: grid; gap: 3px; color: #fff; }
.cc_b3eorip4_ADbxAIJiAi .sg-vst__handle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.cc_b3eorip4_ADbxAIJiAi .sg-vst__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; }
.cc_b3eorip4_ADbxAIJiAi .sg-vst__title { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* over-the-video product bar: hidden unless the section turns it on (SgVideoStories styles) */
.cc_b3eorip4_ADbxAIJiAi .sg-vst .sg-vst__bar { display: none; pointer-events: auto; }

.cc_b3eorip4_ADbxAIJiAi .sg-vst__product .sg-mp--chip { width: 100%; box-shadow: none; border: 1px solid var(--sg-line); background: #fff; }

@media (max-width: 767px) {
  .cc_b3eorip4_ADbxAIJiAi .sg-vst__sound { width: 44px; height: 44px; top: 6px; right: 6px; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vst__play { opacity: 0.9; transform: none; width: 46px; height: 46px; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vst__bottom { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc_b3eorip4_ADbxAIJiAi .sg-vst__video, .cc_b3eorip4_ADbxAIJiAi .sg-vst__play { transition: none; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vst.is-sound .sg-vst__sound svg { animation: none; }
}

/* Shoppable-video product bar — sits over the video (white text on the shade). */
.cc_b3eorip4_ADbxAIJiAi .sg-vpb {
  --sg-text: #fff;
  display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%;
  padding: 8px; border-radius: calc(var(--sg-r-card) * 0.8);
  background: rgba(10, 12, 14, 0.34); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__thumb {
  flex-shrink: 0; display: grid; place-items: center; width: 44px; aspect-ratio: 56 / 68;
  border-radius: 6px; overflow: hidden; background: #fff; color: var(--sg-ink-3);
}
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--sg-t-mid) var(--sg-ease-out); }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__info { display: grid; gap: 3px; min-width: 0; }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__name {
  font-size: 12.5px; font-weight: 600; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.cc_b3eorip4_ADbxAIJiAi .sg-vpb .sg-vpb__price { gap: 2px 6px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb .sg-vpb__price .sg-price__final { font-size: 13px; color: #fff; }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb .sg-vpb__price.sg-price--sale .sg-price__final { color: #fff; }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb .sg-vpb__price .sg-price__old { font-size: 11.5px; color: rgba(255, 255, 255, 0.72); }

.cc_b3eorip4_ADbxAIJiAi .sg-vpb__add {
  flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--sg-accent); color: var(--sg-on-accent); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: background var(--sg-t-fast), color var(--sg-t-fast), transform var(--sg-t-fast) var(--sg-ease-out);
}
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__add .sg-spinner { width: 16px; height: 16px; }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__add:active { transform: scale(0.9); }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__add.is-view { background: #fff; color: var(--sg-ink); }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__add.is-added { background: var(--sg-ok); color: #fff; }
.cc_b3eorip4_ADbxAIJiAi .sg-vpb__add.is-added svg { animation: cc_b3eorip4_sg-pop calc(380ms * var(--sg-speed, 1)) var(--sg-ease-spring); }
@media (hover: hover) {
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__add:hover { background: #fff; color: var(--sg-ink); transform: scale(1.06); }
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__add.is-view:hover { background: var(--sg-accent); color: var(--sg-on-accent); }
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__main:hover .sg-vpb__thumb img { transform: scale(1.06); }
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__main:hover .sg-vpb__name { text-decoration: underline; text-underline-offset: 3px; }
}

/* narrow cards (e.g. 2+ per row on phones): drop the thumbnail, keep name + price + cart */
@container (max-width: 210px) {
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb { gap: 6px; padding: 6px; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__thumb { display: none; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__name { font-size: 11.5px; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb .sg-vpb__price .sg-price__final { font-size: 12px; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__add { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__add, .cc_b3eorip4_ADbxAIJiAi .sg-vpb__thumb img { transition: none; }
  .cc_b3eorip4_ADbxAIJiAi .sg-vpb__add.is-added svg { animation: none; }
}