/* ============================= */
/* === WRAPPER: DEFAULT THEME === */
/* ============================= */
.revopv-wrapper-default .revopv-video-background {
  aspect-ratio: 1 / 1;
  background: #000;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.revopv-wrapper-default .revopv-video-foreground {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ============================= */
/* === WRAPPER: STOREFRONT === */
/* ============================= */
.revopv-wrapper-storefront .revopv-video-background {
  height: 231.18px;
  background: #000;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 1.618em;
}

.revopv-wrapper-storefront .revopv-video-foreground {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ============================= */
/* === VIDEO/IFRAME GLOBAL === */
/* ============================= */
.revopv-video-foreground iframe,
.revopv-video-foreground video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  max-width: none !important;
}

.revopv-video-foreground iframe,
.revopv-video-foreground video {
  pointer-events: auto;
}

/* ============================= */
/* === VIDEO/IFRAME - STOREFRONT === */
/* ============================= */
.revopv-video-foreground-storefront iframe,
.revopv-video-foreground-storefront video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  max-width: none !important;
}

.revopv-video-foreground-storefront iframe,
.revopv-video-foreground-storefront video {
  pointer-events: auto;
}

/* ============================= */
/* === FIT OPTIONS (Global) === */
/* ============================= */

/* === FIT: FILL === */
.revopv-fit-fill .revopv-video-foreground iframe,
.revopv-fit-fill .revopv-video-foreground video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.revopv-fit-fill-storefront .revopv-video-foreground-storefront iframe,
.revopv-fit-fill-storefront .revopv-video-foreground-storefront video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* === FIT: CONTAIN === */
.revopv-fit-contain .revopv-video-foreground iframe,
.revopv-fit-contain .revopv-video-foreground video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.revopv-fit-contain-storefront .revopv-video-foreground-storefront iframe,
.revopv-fit-contain-storefront .revopv-video-foreground-storefront video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* === FIT: COVER === */
.revopv-fit-cover .revopv-video-foreground iframe,
.revopv-fit-cover .revopv-video-foreground video {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200vh;
  height: 100%;
  object-fit: cover;
}

.revopv-fit-cover-storefront .revopv-video-foreground-storefront iframe,
.revopv-fit-cover-storefront .revopv-video-foreground-storefront video {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200vh;
  height: 100%;
  object-fit: cover;
}

/* ============================= */
/* === VIDEO BACKGROUND DETAIL PAGE STOREFRONT === */
/* ============================= */
.revopv-video-background-detail-page-storefront {
  height: 328.8px;
  background: #000;
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 1.618em;
}

.revopv-position-storefront {
  bottom: auto !important;
  top: 8px !important;
}

.revopv-animation-wrapper-storefront {
  position: absolute;
  right: 8px;
  max-width: 48px;
  bottom: 8px;
  z-index: 100;
  transition: bottom 0.3s ease;
}

.revopv-animation-wrapper {
  position: absolute;
  right: 8px;
  max-width: 48px;
  bottom: 8px;
}

.card-flash-sale > .revopv-animation-wrapper {
  position: absolute;
  right: 8px;
  max-width: 48px;
  top: -20px;
}

.card-flash-sale {
  position: relative !important;
}

/* ============================= */
/* ======= Twenty Twenty ======= */
/* ============================= */
.wc-block-product {
  position: relative;
}

.revopv-position-twentytwenty {
  bottom: 170px !important;
}

/* Controller */

.revopv-video-controller {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  opacity: 1;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.revopv-video-controller:not(.visible) {
  opacity: 0;
  pointer-events: none;
}

.revopv-controls-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: end;
}

.revopv-control-menu-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.revopv-video-controller .revopv-controls {
  cursor: default;
}

.revopv-video-controller .revopv-controls button {
  cursor: pointer;
}

.revopv-controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px 16px 16px;
}

.revopv-controller-btn {
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
  box-sizing: border-box;
  padding: 0 !important;
  border: none !important;
  min-width: unset;
  line-height: 1;
  transition: all 0.3s ease;
  transform: scale(1);
}

.revopv-controller-btn:hover {
  background: transparent;
}

.revopv-controller-btn:focus {
  outline: none;
  border: none;
}

.revopv-controller-btn:active {
  transform: scale(0.9);
}

.revopv-control-menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.revopv-time {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

.revopv-controller-btn.revopv-controller-play::before {
  content: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTguNTQsOSw4Ljg4LDMuNDZhMy40MiwzLjQyLDAsMCwwLTUuMTMsM1YxNy41OEEzLjQyLDMuNDIsMCwwLDAsNy4xNywyMWEzLjQzLDMuNDMsMCwwLDAsMS43MS0uNDZMMTguNTQsMTVhMy40MiwzLjQyLDAsMCwwLDAtNS45MlptLTEsNC4xOUw3Ljg4LDE4LjgxYTEuNDQsMS40NCwwLDAsMS0xLjQyLDAsMS40MiwxLjQyLDAsMCwxLS43MS0xLjIzVjYuNDJhMS40MiwxLjQyLDAsMCwxLC43MS0xLjIzQTEuNTEsMS41MSwwLDAsMSw3LjE3LDVhMS41NCwxLjU0LDAsMCwxLC43MS4xOWw5LjY2LDUuNThhMS40MiwxLjQyLDAsMCwxLDAsMi40NloiLz48L3N2Zz4=);
  width: 24px;
  height: 24px;
}

.revopv-controller-btn.revopv-controller-pause::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMC42NSAxOS4xMVY0Ljg5QzEwLjY1IDMuNTQgMTAuMDggMyA4LjY0IDNINS4wMUMzLjU3IDMgMyAzLjU0IDMgNC44OVYxOS4xMUMzIDIwLjQ2IDMuNTcgMjEgNS4wMSAyMUg4LjY0QzEwLjA4IDIxIDEwLjY1IDIwLjQ2IDEwLjY1IDE5LjExWiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0yMSAxOS4xMVY0Ljg5QzIxIDMuNTQgMjAuNDMgMyAxOC45OSAzSDE1LjM2QzEzLjkzIDMgMTMuMzUgMy41NCAxMy4zNSA0Ljg5VjE5LjExQzEzLjM1IDIwLjQ2IDEzLjkyIDIxIDE1LjM2IDIxSDE4Ljk5QzIwLjQzIDIxIDIxIDIwLjQ2IDIxIDE5LjExWiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==);
  width: 24px;
  height: 24px;
}

.revopv-controller-btn.revopv-controller-sound::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZmZmZmZmIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNSA0LjgzaDIuNzlMOC4xNSAxbC44NS4zNXYxM2wtLjg1LjMzLTMuODYtMy44NUgxLjVsLS41LS41di01bC41LS41ek00Ljg1IDEwTDggMTMuMTRWMi41Nkw0Ljg1IDUuNjhsLS4zNS4xNUgydjRoMi41bC4zNS4xN3pNMTUgNy44M2E2Ljk3IDYuOTcgMCAwIDEtMS41NzggNC40MjhsLS43MTItLjcxQTUuOTc1IDUuOTc1IDAgMCAwIDE0IDcuODNjMC0xLjQtLjQ4LTIuNjg5LTEuMjg0LTMuNzFsLjcxMi0uNzFBNi45NzEgNi45NzEgMCAwIDEgMTUgNy44M3ptLTIgMGE0Ljk3OCA0Ljk3OCAwIDAgMS0xLjAwMiAzLjAwNGwtLjcxNi0uNzE2QTMuOTgyIDMuOTgyIDAgMCAwIDEyIDcuODNhMy45OCAzLjk4IDAgMCAwLS43MTMtMi4yOGwuNzE2LS43MTZjLjYyNi44MzUuOTk3IDEuODcyLjk5NyAyLjk5NnptLTIgMGMwIC41NzQtLjE2IDEuMTEtLjQ0IDEuNTY2bC0uNzM5LS43MzhhMS45OTMgMS45OTMgMCAwIDAgLjAwNS0xLjY0N2wuNzM5LS43MzljLjI3Ni40NTQuNDM1Ljk4OC40MzUgMS41NTh6Ii8+PC9zdmc+);
  width: 24px;
  height: 24px;
}

.revopv-controller-btn.revopv-controller-muted::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZmZmZmZmIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNSA1aDIuNzlsMy44Ni0zLjgzLjg1LjM1djEzbC0uODUuMzNMNC4yOSAxMUgxLjVsLS41LS41di01bC41LS41em0zLjM1IDUuMTdMOCAxMy4zMVYyLjczTDQuODUgNS44NSA0LjUgNkgydjRoMi41bC4zNS4xN3ptOS4zODEtNC4xMDhsLjcwNy43MDdMMTMuMjA3IDguNWwxLjczMSAxLjczMi0uNzA3LjcwN0wxMi41IDkuMjA3bC0xLjczMiAxLjczMi0uNzA3LS43MDdMMTEuNzkzIDguNSAxMC4wNiA2Ljc3bC43MDctLjcwNyAxLjczMyAxLjczIDEuNzMxLTEuNzMxeiIvPjwvc3ZnPg==);
  width: 24px;
  height: 24px;
}

.revopv-controller-btn.revopv-controller-fullscreen::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0LjUgOS41TDIxIDNNMjEgM0gxNU0yMSAzVjlNMyAyMUw5LjUgMTQuNU0zIDIxVjE1TTMgMjFIOSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=);
  width: 24px;
  height: 24px;
}

.revopv-controller-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #444;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  margin: 0 10px;
  position: relative;
}

/* Track (progress background) */
.revopv-controller-bar::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(
    to right,
    #e50914 var(--progress, 0%),
    #c5c5c5 var(--progress, 0%)
  );
  border-radius: 3px;
}
.revopv-controller-bar::-moz-range-track {
  height: 6px;
  background: #c5c5c5;
  border-radius: 3px;
}

.revopv-controller-bar:focus {
  outline: none;
  border: none;
}

/* Thumb (slider handle) */
.revopv-controller-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #e50914;
  margin-top: -4px;
  cursor: pointer;
  transition: background 0.2s;
}
.revopv-controller-bar::-webkit-slider-thumb:hover {
  background: #e50914;
}
.revopv-controller-bar::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #e50914;
  cursor: pointer;
  transition: background 0.2s;
}
.revopv-controller-bar::-moz-range-thumb:hover {
  background: #e50914;
}