/* ==========================================================================
   Reel Widget — shoppable video rail + Instagram-style fullscreen player
   Zero dependencies. Theme by overriding the custom properties below.
   ========================================================================== */

/* The fullscreen player is appended to <body>, outside the mount node, so it
   has to carry the same theme defaults — it can't inherit them from .rw. */
.rw,
.rw-player {
  /* --- Theme knobs: override these per brand --- */
  --rw-accent: #ef1400;          /* buttons, active states */
  --rw-off: #0a7c42;             /* discount text */
  --rw-bg: #ffffff;              /* card background */
  --rw-fg: #151515;              /* card text */
  --rw-muted: #6b6b6b;           /* compare-at, secondary text */
  --rw-radius: 14px;
  --rw-card-w: 210px;            /* rail card width (desktop) */
  --rw-gap: 12px;
  --rw-font: inherit;

  font-family: var(--rw-font);
  position: relative;
}

.rw *, .rw *::before, .rw *::after,
.rw-player *, .rw-player *::before, .rw-player *::after { box-sizing: border-box; }

/* ---------- Rail ---------- */

.rw__rail {
  display: flex;
  gap: var(--rw-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px;
  margin: -4px;         /* let focus rings breathe without clipping */
}
.rw__rail::-webkit-scrollbar { display: none; }

.rw__card {
  flex: 0 0 auto;
  width: var(--rw-card-w);
  scroll-snap-align: start;
  background: var(--rw-bg);
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: var(--rw-radius);
  overflow: hidden;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--rw-fg);
  font: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rw__card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.13); }
.rw__card:focus-visible { outline: 3px solid var(--rw-accent); outline-offset: 2px; }

.rw__media {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #111;
  overflow: hidden;
}
.rw__media video,
.rw__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Poster sits under the video until the video can paint */
.rw__media img { position: absolute; inset: 0; }
.rw__media video { position: relative; z-index: 1; opacity: 0; transition: opacity 0.25s ease; }
.rw__media video.is-ready { opacity: 1; }

/* Gradient so overlay UI stays legible on bright frames */
.rw__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent);
  z-index: 2;
  pointer-events: none;
}

.rw__views {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  background: rgb(0 0 0 / 0.45);
  backdrop-filter: blur(6px);
  padding: 3px 8px;
  border-radius: 999px;
}

.rw__cardActions {
  position: absolute;
  right: 6px;
  bottom: 8px;
  z-index: 3;
  display: flex;
  gap: 4px;
}

/* ---------- Icon buttons (shared by card + player) ---------- */

.rw__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
/* White icons sit on unpredictable video frames — a dark halo keeps them
   readable against a bright shirt or wall where the scrim doesn't reach. */
.rw__icon { filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.75)); }
.rw__icon:hover { background: rgb(255 255 255 / 0.18); }
.rw__icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rw__icon:active { transform: scale(0.88); }
.rw__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.rw__icon.is-liked { color: var(--rw-accent); }
.rw__icon.is-liked svg { fill: currentColor; stroke: currentColor; }

/* ---------- Card product strip ---------- */

.rw__product {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
}
.rw__product > div,
.rw-reel__buy > div { min-width: 0; }
.rw__thumb {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgb(0 0 0 / 0.1);
  background: #eee;
}
.rw__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rw__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rw__now { font-size: 13px; font-weight: 700; }
.rw__was { font-size: 11px; color: var(--rw-muted); text-decoration: line-through; }
.rw__off { font-size: 11px; font-weight: 700; color: var(--rw-off); margin-top: 2px; }

/* ---------- Rail arrows (desktop only) ---------- */

.rw__nav {
  position: absolute;
  top: calc((var(--rw-card-w) * 16 / 9) / 2);
  transform: translateY(-50%);
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 0.1);
  background: #fff;
  color: #151515;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgb(0 0 0 / 0.16);
}
.rw__nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.rw__nav--prev { left: -14px; }
.rw__nav--next { right: -14px; }
.rw__nav[hidden] { display: none !important; }
.rw__nav:focus-visible { outline: 2px solid var(--rw-accent); outline-offset: 2px; }

@media (hover: hover) and (min-width: 750px) {
  .rw__nav { display: inline-flex; }
}

/* ==========================================================================
   Fullscreen player
   ========================================================================== */

.rw-player {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.rw-player.is-open { opacity: 1; }
.rw-player[hidden] { display: none; }

.rw-player__scroller {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rw-player__scroller::-webkit-scrollbar { display: none; }

.rw-reel {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rw-reel video,
.rw-reel img.rw-reel__poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.rw-reel img.rw-reel__poster { position: absolute; inset: 0; }
.rw-reel video { position: relative; z-index: 1; }

/* Legibility scrims */
.rw-reel::before,
.rw-reel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.rw-reel::before { top: 0; height: 130px; background: linear-gradient(to bottom, rgb(0 0 0 / 0.55), transparent); }
.rw-reel::after { bottom: 0; height: 320px; background: linear-gradient(to top, rgb(0 0 0 / 0.82), transparent); }

/* Tap target for play/pause + mute */
.rw-reel__tap {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.rw-reel__pauseIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 4;
  width: 68px;
  height: 68px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.rw-reel.is-paused .rw-reel__pauseIcon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rw-reel__pauseIcon svg { width: 30px; height: 30px; fill: #fff; }

/* Top bar */
.rw-player__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top));
}
.rw-player__progress {
  flex: 1;
  display: flex;
  gap: 4px;
}
.rw-player__tick {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.3);
  overflow: hidden;
}
.rw-player__tick i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 999px;
}
.rw-player__tick.is-done i { width: 100%; }

/* Reel side actions */
.rw-reel__actions {
  position: absolute;
  right: 8px;
  bottom: 190px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.rw-reel__actions .rw__icon { width: 42px; height: 42px; }
.rw-reel__actions .rw__icon svg { width: 25px; height: 25px; }
.rw-reel__actionWrap { display: grid; justify-items: center; gap: 2px; }
.rw-reel__actionLabel { color: #fff; font-size: 10px; font-weight: 600; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }

/* Bottom product panel */
.rw-reel__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 14px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
}
.rw-reel__caption {
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  max-width: 74%;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rw-reel__buy {
  display: grid;
  /* minmax(0,1fr) not 1fr: a bare 1fr refuses to shrink below the text's
     min-content, which shoves the CTA off-screen on narrow phones. */
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.18);
  backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 8px;
}
.rw-reel__buy .rw__thumb { width: 44px; height: 44px; border-color: rgb(255 255 255 / 0.25); }
.rw-reel__buy .rw__title { color: #fff; font-size: 13px; -webkit-line-clamp: 1; }
.rw-reel__buy .rw__now { color: #fff; font-size: 14px; }
.rw-reel__buy .rw__was { color: rgb(255 255 255 / 0.6); }
.rw-reel__buy .rw__off { color: #4ade80; }

.rw-reel__cta {
  border: 0;
  background: var(--rw-accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 11px 16px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.rw-reel__cta:hover { filter: brightness(1.08); }
.rw-reel__cta:active { transform: scale(0.96); }
.rw-reel__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rw-reel__cta[disabled] { opacity: 0.65; cursor: default; }

/* Toast */
.rw-player__toast {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 8px);
  z-index: 8;
  background: #fff;
  color: #151515;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.rw-player__toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* Desktop: keep the reel phone-shaped instead of stretching wide */
@media (min-width: 750px) {
  .rw-reel video,
  .rw-reel img.rw-reel__poster {
    width: auto;
    height: 100dvh;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
  }
  .rw-reel__panel,
  .rw-reel__actions,
  .rw-player__top {
    max-width: calc(100dvh * 9 / 16);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
  }
  .rw-reel__actions {
    left: auto;
    right: calc(50% - (100dvh * 9 / 16) / 2 - 56px);
    transform: none;
    width: auto;
  }
}

@media (max-width: 480px) {
  .rw { --rw-card-w: 168px; }
}

/* Respect reduced motion: no autoplay, no transforms */
@media (prefers-reduced-motion: reduce) {
  .rw__card,
  .rw__icon,
  .rw-reel__cta { transition: none; }
  .rw__card:hover { transform: none; }
  .rw__rail { scroll-behavior: auto; }
}