/** Shopify CDN: Minification failed

Line 27:3 Unexpected "="

**/
/* ==========================================================================
   Sunboost custom — sb-product-video.css
   Clean rebuild: 2026-04-14 (v2)

   Structure:
     .sb-product-video (root)
       .sb-pv__wrap
         .sb-pv__heading
         deferred-media.sb-pv__card
           button.sb-pv__poster.deferred-media__poster
             <img/svg>
             .sb-pv__poster-overlay
             .sb-pv__play > svg
           <template>{video / iframe}</template>
         .sb-pv__caption

   The 16:9 aspect ratio is enforced on the deferred-media element itself
   (which is display: block once loaded; we also set it explicitly).
   All tunables come from custom properties set inline by the section liquid.

   /* brand glow signature — do not simplify */
   ========================================================================== */

/* Custom element host defaults to display:inline in browsers — force block
   so width:100% and aspect-ratio on the .sb-pv__card child take effect. */
sb-product-video {
  display: block;
  width: 100%;
  position: relative;
}

.sb-product-video {
  padding-top: var(--sb-pv-padding-top-mobile, 36px);
  padding-bottom: var(--sb-pv-padding-bottom-mobile, 36px);
  background: var(--sb-pv-bg, #ffffff);
}

@media (min-width: 750px) {
  .sb-product-video {
    padding-top: var(--sb-pv-padding-top, 48px);
    padding-bottom: var(--sb-pv-padding-bottom, 48px);
  }
}

/* Inner container */
.sb-product-video .sb-pv__wrap {
  margin-left: auto;
  margin-right: auto;
}

.sb-product-video:not(.sb-product-video--full) .sb-pv__wrap {
  max-width: var(--sb-pv-page-width, 1200px);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Heading */
.sb-product-video .sb-pv__heading {
  text-align: var(--sb-pv-heading-align, center);
  margin-bottom: 1.5rem;
}

.sb-product-video .sb-pv__heading h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--sb-pv-heading-color, #1a1a1a);
  line-height: 1.2;
}

.sb-product-video .sb-pv__heading p {
  margin: 0;
  font-size: 1rem;
  color: var(--sb-pv-subheading-color, #1a1a1a);
  opacity: 0.8;
}

/* ── Card — Dawn's <deferred-media> as the 16:9 shell with brand glow ──── */
/* brand glow signature — do not simplify */
.sb-product-video .sb-pv__card {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--sb-pv-corner-radius, 12px);
  overflow: hidden;
  background: #000;
  transition: box-shadow 0.4s ease;
  box-shadow:
    0 0 0 1px rgba(var(--sb-pv-glow-rgb-1, 255, 140, 40), var(--sb-pv-glow-a1, 0.18)),
    0 0 24px rgba(var(--sb-pv-glow-rgb-2, 255, 120, 20), var(--sb-pv-glow-a2, 0.16)),
    0 0 64px rgba(var(--sb-pv-glow-rgb-3, 230, 90, 0), var(--sb-pv-glow-a3, 0.10)),
    0 12px 40px rgba(0, 0, 0, 0.28);
}

/* padding-bottom fallback for browsers without aspect-ratio (older Safari).
   When aspect-ratio is supported (modern) the property wins and this has
   no visual effect. */
@supports not (aspect-ratio: 1 / 1) {
  .sb-product-video .sb-pv__card {
    aspect-ratio: auto;
    padding-bottom: 56.25%; /* 9 / 16 */
    height: 0;
  }
}

.sb-product-video .sb-pv__card:hover {
  box-shadow:
    0 0 0 1px rgba(var(--sb-pv-glow-rgb-1, 255, 140, 40), var(--sb-pv-glow-a1-hover, 0.35)),
    0 0 32px rgba(var(--sb-pv-glow-rgb-2, 255, 120, 20), var(--sb-pv-glow-a2-hover, 0.28)),
    0 0 80px rgba(var(--sb-pv-glow-rgb-3, 230, 90, 0), var(--sb-pv-glow-a3-hover, 0.16)),
    0 16px 48px rgba(0, 0, 0, 0.32);
}

/* Glow-disabled: keep only the base drop shadow. */
.sb-product-video.sb-product-video--no-glow .sb-pv__card,
.sb-product-video.sb-product-video--no-glow .sb-pv__card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

/* ── Poster button (Dawn's .deferred-media__poster — we override geometry) */
.sb-product-video .sb-pv__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.5s ease;
  border-radius: inherit;
  overflow: hidden;
}

.sb-product-video .sb-pv__poster img,
.sb-product-video .sb-pv__poster > svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Dawn's .deferred-media__poster img uses width:auto — override here. */
  max-width: none;
}

.sb-product-video .sb-pv__poster-overlay {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.25) 100%
  );
  transition: background 0.3s ease;
  pointer-events: none;
}

.sb-product-video .sb-pv__poster:hover .sb-pv__poster-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Play button pip inside the poster */
.sb-product-video .sb-pv__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 8vw, 80px);
  height: clamp(56px, 8vw, 80px);
  border-radius: 50%;
  background: var(--sb-pv-play-bg, #e9b347);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  z-index: 3;
  pointer-events: none;
}

.sb-product-video .sb-pv__poster:hover .sb-pv__play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  background: var(--sb-pv-play-hover-bg, #d4a040);
}

.sb-product-video .sb-pv__play svg {
  width: clamp(22px, 3vw, 30px);
  height: clamp(22px, 3vw, 30px);
  fill: var(--sb-pv-play-icon, #ffffff);
  margin-left: 0.15em; /* optical centering for the play triangle */
  display: block;
  flex-shrink: 0;
}

/* ── Post-reveal — JS adds .is-hidden on the poster and injects the video
       /iframe into .sb-pv__player. ─────────────────────────────────────── */
.sb-product-video .sb-pv__poster.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.sb-product-video .sb-pv__player {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sb-product-video .sb-pv__player video,
.sb-product-video .sb-pv__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
  background: #000;
  cursor: pointer;
}

/* ── Cycle button — single transparent center toggle (play / pause).
       Hidden until JS removes [hidden] post-reveal. CSS handles hover-only
       visibility while playing on hover-capable devices. ───────────────── */
.sb-product-video .sb-pv__cycle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 84px;
  height: 84px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 1;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
}

.sb-product-video .sb-pv__cycle[hidden] {
  display: none;
}

.sb-product-video .sb-pv__cycle:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.95);
  transform: translate(-50%, -50%) scale(1.05);
}

.sb-product-video .sb-pv__cycle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
  opacity: 1;
}

.sb-product-video .sb-pv__cycle .sb-pv-icon {
  width: 34px;
  height: 34px;
  fill: currentColor;
  display: block;
  pointer-events: none;
}

.sb-product-video .sb-pv__cycle .sb-pv-icon--hidden {
  display: none;
}

@media (max-width: 749px) {
  .sb-product-video .sb-pv__cycle {
    width: 64px;
    height: 64px;
  }
  .sb-product-video .sb-pv__cycle .sb-pv-icon {
    width: 26px;
    height: 26px;
  }
}

/* Hover-only behaviour on hover-capable devices: when the video is playing,
   the cycle button hides and reappears on host hover or keyboard focus.
   When paused, it stays visible so the play affordance is always discoverable.
   Touch devices (no hover) keep the button visible always. */
@media (hover: hover) {
  sb-product-video.is-playing .sb-pv__cycle {
    opacity: 0;
  }
  sb-product-video.is-playing:hover .sb-pv__cycle,
  sb-product-video.is-playing .sb-pv__cycle:focus-visible {
    opacity: 1;
  }
}

/* Empty / placeholder card */
.sb-product-video .sb-pv__card--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

/* Caption */
.sb-product-video .sb-pv__caption {
  margin-top: 1rem;
  text-align: var(--sb-pv-heading-align, center);
  font-size: 0.875rem;
  color: var(--sb-pv-subheading-color, #1a1a1a);
  opacity: 0.7;
}

/* ── Fullscreen button — small transparent pill in bottom-right corner.
   Hidden until JS removes [hidden] post-reveal. Hover-only when playing
   on hover-capable devices (mirrors the cycle button's behaviour). ──── */
.sb-product-video .sb-pv__fs {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 1;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
}

.sb-product-video .sb-pv__fs[hidden] {
  display: none;
}

.sb-product-video .sb-pv__fs:hover {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.85);
  transform: scale(1.05);
}

.sb-product-video .sb-pv__fs:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
  opacity: 1;
}

.sb-product-video .sb-pv__fs .sb-pv-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
  pointer-events: none;
}

@media (hover: hover) {
  sb-product-video.is-playing .sb-pv__fs {
    opacity: 0;
  }
  sb-product-video.is-playing:hover .sb-pv__fs,
  sb-product-video.is-playing .sb-pv__fs:focus-visible {
    opacity: 1;
  }
}

@media (max-width: 749px) {
  .sb-product-video .sb-pv__fs {
    width: 32px;
    height: 32px;
  }
  .sb-product-video .sb-pv__fs .sb-pv-icon {
    width: 14px;
    height: 14px;
  }
}