/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./public/src/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************/
/**
 * The public stylesheet.
 *
 * The same widget and player rules the admin preview loads — that is the
 * whole point — plus the loading placeholder only a real page needs. The
 * design's tokens and storefront components come first; embed and player
 * fit them to a real widget and its stored settings.
 */
/* ProductReels 1.1.0 design tokens. Generated from tokens.json: edit tokens.json, not this file. */
.pr-app, .prs, .pr-portal {
  --pr-canvas: #f4f5f9;
  --pr-surface: #ffffff;
  --pr-surface-sunken: #eceef4;
  --pr-surface-hover: #f7f8fc;
  --pr-line: #e2e5ee;
  --pr-line-strong: #878da5;
  --pr-ink: #141629;
  --pr-ink-muted: #565c76;
  --pr-ink-disabled: #a3a8bc;
  --pr-scrim: #1416297a;
  --pr-on-ink: #ffffff;
  --pr-brand: #3044f2;
  --pr-brand-strong: #1f2bb8;
  --pr-brand-soft: #e9ecff;
  --pr-on-brand: #ffffff;
  --pr-link: var(--pr-brand);
  --pr-spark: #d8135c;
  --pr-spark-soft: #fff0f5;
  --pr-spark-bright: #ff5c93;
  --pr-studio: #161a33;
  --pr-studio-raised: #22274a;
  --pr-studio-line: #3a4166;
  --pr-studio-line-strong: #6b7398;
  --pr-on-studio: #eef0ff;
  --pr-on-studio-muted: #a5abd0;
  --pr-focus-studio: #7d8cff;
  --pr-ok: #0b7650;
  --pr-ok-soft: #e3f6ed;
  --pr-warn: #9a5400;
  --pr-warn-soft: #fff3dc;
  --pr-danger: #c42a1b;
  --pr-danger-soft: #fde8e5;
  --pr-on-danger: #ffffff;
  --pr-reel-scrim: #0a0c1acc;
  --pr-reel-badge: #0a0c1a99;
  --pr-on-reel: #ffffff;
  --pr-reel-glass: #fffffff2;
  --pr-shadow-sm: 0 1px 2px #1416291a, 0 0 0 1px #1416290d;
  --pr-shadow-md: 0 8px 20px -6px #14162933, 0 2px 6px #1416291a;
  --pr-shadow-lg: 0 28px 56px -16px #1416294d, 0 6px 16px #1416291f;
  --pr-shadow-reel: 0 12px 28px -10px #0a0c1a66, 0 2px 6px #0a0c1a26;
  --pr-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #3044f2;
  --pr-focus-ring-studio: 0 0 0 2px #161a33, 0 0 0 4px #7d8cff;
  --pr-space-1: 4px;
  --pr-space-2: 8px;
  --pr-space-3: 12px;
  --pr-space-4: 16px;
  --pr-space-5: 20px;
  --pr-space-6: 24px;
  --pr-space-8: 32px;
  --pr-space-10: 40px;
  --pr-space-16: 64px;
  --pr-radius-xs: 6px;
  --pr-radius-sm: 8px;
  --pr-radius-md: 12px;
  --pr-radius-lg: 20px;
  --pr-radius-reel: 16px;
  --pr-radius-pill: 999px;
  --pr-control-sm: 32px;
  --pr-control: 40px;
  --pr-control-lg: 48px;
  --pr-appbar-height: 64px;
  --pr-rail-width: 84px;
  --pr-panel-width: 368px;
  --pr-content-max: 1280px;
  --pr-font-sans: "ProductReels Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pr-font-display: "ProductReels Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pr-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.pr-t-display-xl {
  font-family: var(--pr-font-display);
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.pr-t-display {
  font-family: var(--pr-font-display);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.pr-t-metric {
  font-family: var(--pr-font-display);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.pr-t-display-sm {
  font-family: var(--pr-font-display);
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pr-t-title {
  font-family: var(--pr-font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pr-t-heading {
  font-family: var(--pr-font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.pr-t-body {
  font-family: var(--pr-font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.pr-t-body-strong {
  font-family: var(--pr-font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.pr-t-label {
  font-family: var(--pr-font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.pr-t-small {
  font-family: var(--pr-font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.pr-t-caption {
  font-family: var(--pr-font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.pr-t-code {
  font-family: var(--pr-font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
}

/* ProductReels 1.1.0 storefront components (prs-*). Needs pr-tokens.css first. Inherits the theme font. */
:where(.prs) :where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(.prs) :where(h1, h2, h3, h4, p) {
  margin: 0;
}

.prs .pr-icon {
  flex: none;
  display: block;
}

.prs .pr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Storefront (prs-*) — inherits the shopper's theme font ===== */
.prs {
  font-family: inherit;
  color: var(--pr-ink);
}

.prs :is(.pr-t-title, .pr-t-heading, .pr-t-body, .pr-t-body-strong, .pr-t-label, .pr-t-small, .pr-t-caption) {
  font-family: inherit;
}

.prs-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: var(--prs-tile-w, 180px);
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
}

.prs-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 9/16;
  border-radius: var(--pr-radius-reel);
  overflow: hidden;
  background: var(--pr-studio);
  box-shadow: var(--pr-shadow-reel);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prs-tile__media > svg, .prs-tile__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.prs-tile--zoom-in:hover .prs-tile__media > svg {
  transform: scale(1.07);
}

.prs-tile--zoom-out .prs-tile__media > svg {
  transform: scale(1.07);
}

.prs-tile--zoom-out:hover .prs-tile__media > svg {
  transform: none;
}

.prs-tile--lift:hover .prs-tile__media {
  transform: translateY(-6px);
}

.prs-tile:focus-visible {
  outline: none;
}

.prs-tile:focus-visible .prs-tile__media {
  box-shadow: var(--pr-focus-ring);
}

.prs-tile__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to top, var(--pr-reel-scrim), transparent);
}

.prs-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-reel-badge);
  color: var(--pr-on-reel);
  backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}

.prs-tile__views {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
}

.prs-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-reel-badge);
  color: var(--pr-on-reel);
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}

.prs-play .pr-icon {
  margin-inline-start: 2px;
}

.prs-tile__title {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  color: var(--pr-on-reel);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prs-tile__below {
  display: block;
  margin-top: 10px;
  color: var(--pr-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prs-tile__card {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  container-type: inline-size;
}

@container (max-width: 160px) {
  .prs-tile__card .prs-price s {
    display: none;
  }
}
.prs-price {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

.prs-tile--circle {
  width: var(--prs-tile-w, 104px);
}

.prs-tile--circle .prs-tile__media {
  aspect-ratio: 1;
  border-radius: var(--pr-radius-pill);
  box-shadow: 0 0 0 3px var(--pr-surface), 0 0 0 5px var(--prs-ring, var(--pr-ink));
  margin: 5px;
}

.prs-tile--circle .prs-tile__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  text-align: center;
}

.prs-tile--circle .prs-tile__label > .pr-t-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prs-tile--circle .prs-tile__label .prs-views {
  background: var(--pr-surface-sunken);
  color: var(--pr-ink);
  backdrop-filter: none;
}

.prs-tile--circle .prs-play {
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
}

.prs-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--pr-radius-md);
  background: var(--pr-reel-glass);
  color: var(--pr-ink);
  backdrop-filter: blur(10px);
  box-shadow: var(--pr-shadow-md);
  text-align: start;
}

.prs-card__thumb {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--pr-radius-xs);
  overflow: hidden;
  background: var(--pr-surface-sunken);
}

.prs-card__thumb > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.prs-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.prs-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prs-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.prs-price s {
  color: var(--pr-ink-muted);
}

.prs-price__sale {
  color: var(--pr-spark);
}

.prs-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--pr-ink);
}

.prs-stars .prs-stars__n {
  color: var(--pr-ink-muted);
  margin-inline-start: 4px;
}

.prs-card__add {
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-ink);
  color: var(--pr-on-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.prs-card__add:focus-visible, .prs-btn:focus-visible {
  outline: none;
  box-shadow: var(--pr-focus-ring);
}

.prs-card--classic {
  flex-direction: column;
  align-items: stretch;
  width: 208px;
  padding: 10px;
  gap: 10px;
}

.prs-card--classic .prs-card__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--pr-radius-sm);
}

.prs-card--classic .prs-card__text {
  gap: 4px;
}

.prs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pr-space-2);
  height: 40px;
  padding: 0 var(--pr-space-4);
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-ink);
  color: var(--pr-on-ink);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.prs-btn--light {
  background: var(--pr-surface);
  color: var(--pr-ink);
}

.prs-btn--block {
  width: 100%;
}

.prs-btn--sm {
  height: 34px;
  padding: 0 var(--pr-space-3);
}

.prs-widget {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-4);
}

.prs-widget__title {
  color: var(--pr-ink);
}

.prs-widget--center {
  align-items: center;
}

.prs-widget--center .prs-widget__title {
  text-align: center;
}

.prs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--prs-tile-w, 150px), 1fr));
  gap: var(--prs-gap, 16px);
  width: 100%;
}

.prs-grid .prs-tile {
  width: 100%;
}

.prs-carousel {
  position: relative;
  width: 100%;
}

.prs-carousel__track {
  display: flex;
  align-items: flex-start;
  gap: var(--prs-gap, 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 2px 18px;
}

.prs-carousel__track::-webkit-scrollbar {
  display: none;
}

.prs-carousel__track > * {
  scroll-snap-align: start;
}

.prs-carousel--center .prs-carousel__track {
  justify-content: center;
}

.prs-arrow {
  position: absolute;
  top: calc(50% - 26px);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-surface);
  color: var(--pr-ink);
  box-shadow: var(--pr-shadow-md);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.prs-arrow:focus-visible {
  outline: none;
  box-shadow: var(--pr-focus-ring);
}

.prs-arrow--prev {
  inset-inline-start: -20px;
}

.prs-arrow--next {
  inset-inline-end: -20px;
}

.prs-carousel--inside .prs-arrow--prev {
  inset-inline-start: 8px;
}

.prs-carousel--inside .prs-arrow--next {
  inset-inline-end: 8px;
}

.prs-marquee {
  width: 100%;
  overflow: hidden;
  padding: 6px 0 18px;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.prs-marquee__track {
  display: flex;
  gap: var(--prs-gap, 16px);
  width: max-content;
  animation: prs-marquee var(--prs-speed, 40s) linear infinite;
}

.prs-marquee--reverse .prs-marquee__track {
  animation-direction: reverse;
}

.prs-marquee:hover .prs-marquee__track {
  animation-play-state: paused;
}

@keyframes prs-marquee {
  to {
    transform: translateX(calc(-50% - var(--prs-gap, 16px) / 2));
  }
}
.prs-deck {
  position: relative;
  height: calc(var(--prs-tile-w, 170px) * 16 / 9 + 24px);
  width: calc(var(--prs-tile-w, 170px) * 2.6);
}

.prs-deck .prs-tile {
  position: absolute;
  top: 0;
  left: 50%;
  transition: transform 0.35s ease;
}

.prs-popup {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 3;
}

.prs-popup--left {
  inset-inline-end: auto;
  inset-inline-start: 16px;
}

.prs-popup .prs-tile {
  --prs-tile-w: 124px;
}

.prs-close {
  position: absolute;
  top: -10px;
  inset-inline-end: -10px;
  z-index: 2;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-ink);
  color: var(--pr-on-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--pr-surface);
}

/* Player */
.prs-player {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: var(--pr-radius-lg);
  background: var(--pr-studio);
  color: var(--pr-on-reel);
}

.prs-player > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.prs-player__top {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pr-space-2);
  padding: 14px;
  background: linear-gradient(to bottom, var(--pr-reel-badge), transparent);
}

.prs-player__tools {
  display: flex;
  gap: var(--pr-space-2);
}

.prs-player__bottom {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 112px 14px 14px;
  background: linear-gradient(to top, var(--pr-reel-scrim) 0%, var(--pr-reel-scrim) 55%, transparent 100%);
}

.prs-player__title {
  color: var(--pr-on-reel);
}

.prs-player__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-2);
}

.prs-iconbtn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-reel-badge);
  color: var(--pr-on-reel);
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.prs-iconbtn:focus-visible {
  outline: none;
  box-shadow: var(--pr-focus-ring-studio);
}

.prs-seek {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
}

.prs-seek__track {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: var(--pr-radius-pill);
}

.prs-seek__track::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pr-on-reel);
  opacity: 0.32;
}

.prs-seek__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--pr-on-reel);
}

.prs-seek__knob {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-on-reel);
}

.prs-player__time {
  display: flex;
  justify-content: space-between;
  color: var(--pr-on-reel);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.prs-theater {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pr-space-6);
  padding: var(--pr-space-8);
  background: var(--pr-studio);
  overflow: hidden;
  height: 100%;
}

.prs-theater__main {
  width: 340px;
  flex: none;
  position: relative;
  z-index: 1;
}

.prs-theater__peek {
  width: 210px;
  flex: none;
  filter: brightness(0.42) saturate(0.85);
  border-radius: var(--pr-radius-lg);
  overflow: hidden;
  aspect-ratio: 9/16;
  position: relative;
}

.prs-theater__peek > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.prs-navbtn {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid var(--pr-studio-line-strong);
  border-radius: var(--pr-radius-pill);
  background: var(--pr-studio-raised);
  color: var(--pr-on-studio);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.prs-navbtn:focus-visible {
  outline: none;
  box-shadow: var(--pr-focus-ring-studio);
}

.prs-theater__close {
  position: absolute;
  top: var(--pr-space-5);
  inset-inline-end: var(--pr-space-5);
}

.prs-theater__count {
  position: absolute;
  top: var(--pr-space-5);
  inset-inline-start: var(--pr-space-6);
  color: var(--pr-on-studio-muted);
  font-variant-numeric: tabular-nums;
}

.prs-sheet {
  background: var(--pr-surface);
  color: var(--pr-ink);
  border-radius: var(--pr-radius-lg) var(--pr-radius-lg) 0 0;
  padding: var(--pr-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .prs-marquee__track {
    animation: none;
  }
  .prs-tile__media, .prs-tile__media > svg, .pr-switch, .pr-switch::after, .pr-reelcard__play, .prs-deck .prs-tile {
    transition: none;
  }
}
/**
 * The widget stylesheet: tiles, product cards on tiles, and the five layouts.
 *
 * The design's storefront layer (_prs-storefront.scss) draws the components;
 * this file fits them to a real widget. It maps every stored style setting
 * onto the property the design reads (styleVars() hands them over inline on
 * the widget's root), so a merchant's value always wins over the design's
 * default; it keeps the 1.0.0 behaviours the design does not draw (per-device
 * sizes, alignment, the entrance, the deck's choreography, the popup's
 * corners); and it holds the components against a theme's own button, image
 * and heading rules, which is why most rules carry the root's class.
 *
 * Loaded by both the admin preview and the public bundle — the same rules
 * paint both, which is what stops the editor's preview drifting from what a
 * visitor sees.
 */
.productreels-embed {
  --prs-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* The responsive values arrive as per-device buckets on the inline style;
     the desktop bucket is the default and the rules at the foot of this file
     swap in the others. Nothing here may be set inline, or no media query or
     device class could ever override it. */
  --wr-size: var(--wr-size-desk, 180px);
  --wr-gap: var(--wr-gap-desk, 16px);
  --wr-radius: var(--wr-radius-desk, 16px);
  --prs-tile-w: var(--wr-size);
  --prs-gap: var(--wr-gap);
  --pr-radius-reel: var(--wr-radius);
  /* The merchant's shadow size, drawn as the design's reel shadow: at the
     default 16px it is exactly --pr-shadow-reel, and zero removes it. */
  --prs-sh: var(--prs-shadow, 16px);
  --prs-tile-shadow:
  	0 calc(var(--prs-sh) * 0.125) calc(var(--prs-sh) * 0.375) rgb(10 12 26 / 0.15),
  	0 calc(var(--prs-sh) * 0.75) calc(var(--prs-sh) * 1.75) calc(var(--prs-sh) * -0.625) rgb(10 12 26 / 0.4);
  --prs-tile-shadow-up:
  	0 calc(var(--prs-sh) * 0.25) calc(var(--prs-sh) * 0.5) rgb(10 12 26 / 0.15),
  	0 calc(var(--prs-sh) * 1.25) calc(var(--prs-sh) * 2.25) calc(var(--prs-sh) * -0.625) rgb(10 12 26 / 0.45);
  /* The widget always spans its container. Themes drop shortcodes into flex
     rows and grids whose items shrink-wrap, and a shrink-wrapped widget has
     no width for its rows to fill. */
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-block: var(--wr-pad-block, 0);
  /* The page's own text colour and font: a widget sits in a light theme and
     in a dark section alike. */
  color: inherit;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

:where(.productreels-embed) img,
:where(.productreels-embed) video {
  display: block;
  max-width: 100%;
}

/* Focus that did not come from the keyboard shows no ring. Block themes
   outline every `:focus` (`:where(.wp-site-blocks :focus)`), which drew a box
   around a tile the moment the player closed and handed focus back to it. */
:where(.productreels-embed) :focus:not(:focus-visible) {
  outline: 0;
}

/* Scoped under the root: the space around the title is the owner's setting,
   and a theme's `.entry-content h2` must not out-rank it. */
.productreels-embed .prs-widget__title {
  margin: var(--prs-title-mt, 0) 0 var(--prs-title-mb, 16px);
  padding: 0;
  font-size: var(--prs-title-size, 17px);
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--prs-title-color, inherit);
}

/* ---------------------------------------------------------------- Entrance */
/* The tiles rise into place the first time the widget is seen, each a beat
   after the last. The renderer marks the widget `--reveal` on a public page
   and `is-revealed` once it is in view; the editor preview and the popup
   never get the first class. A deck rises as one. */
.productreels-embed--reveal:not(.is-revealed) :is(.prs-tile, .prs-deck) {
  opacity: 0;
}

.productreels-embed--reveal.is-revealed :is(.prs-tile, .prs-deck) {
  animation: prs-reveal 760ms var(--prs-out) backwards;
  animation-delay: min(var(--prs-index, 0) * 60ms, 480ms);
}

.productreels-embed--reveal .prs-deck .prs-tile {
  opacity: 1;
  animation: none;
}

@keyframes prs-reveal {
  from {
    opacity: 0;
    translate: 0 20px;
  }
}
/* -------------------------------------------------------------------- Tile */
/* The tile is one button: whatever a theme gives buttons is put back. */
.productreels-embed .prs-tile,
.productreels-embed .prs-tile:is(:hover, :focus, :active) {
  display: flex;
  flex-direction: column;
  width: var(--prs-tile-w);
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-reel);
  background: var(--prs-card-bg, transparent);
  box-shadow: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The owner's border and shadow frame the footage; a title below sits
   outside them, on the card colour. */
.productreels-embed .prs-tile__media {
  border: var(--prs-border-w, 0) solid var(--prs-ring, transparent);
  border-radius: var(--pr-radius-reel);
  box-shadow: var(--prs-tile-shadow);
  isolation: isolate;
}

.productreels-embed .prs-tile--lift:hover .prs-tile__media {
  box-shadow: var(--prs-tile-shadow-up);
}

.productreels-embed .prs-tile:focus-visible {
  outline: 0;
}

.productreels-embed .prs-tile:focus-visible .prs-tile__media {
  box-shadow: var(--pr-focus-ring), var(--prs-tile-shadow);
}

.prs-tile__frame {
  position: absolute;
  inset: var(--prs-ring-gap, 0);
  overflow: hidden;
  border-radius: inherit;
}

/* The footage scales inside the clipped box, never the box itself, so a
   hover can never reflow the row around it. */
.productreels-embed .prs-tile__frame > * {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  /* The button is the target; a click on the media must not focus it. */
  pointer-events: none;
  transition: transform 0.5s ease, opacity 0.2s ease;
}

/* The cover steps aside while a preview plays under it. */
.productreels-embed .prs-tile__frame > .is-hidden {
  opacity: 0;
}

/* A YouTube or Vimeo preview that fails keeps the cover; the player's
   fallback link belongs in the player, not inside the tile's button. */
.productreels-embed .prs-tile__embed .wr-player__fallback {
  display: none;
}

.productreels-embed .prs-tile--zoom-in:hover .prs-tile__frame > *,
.productreels-embed .prs-tile--zoom-out .prs-tile__frame > * {
  transform: scale(1.07);
}

.productreels-embed .prs-tile--zoom-out:hover .prs-tile__frame > * {
  transform: none;
}

.productreels-embed .prs-tile__title {
  color: var(--prs-caption, var(--pr-on-reel));
}

.productreels-embed .prs-tile__below,
.productreels-embed .prs-tile__label > .pr-t-label {
  color: var(--prs-below, var(--pr-ink));
}

.productreels-embed .prs-tile .prs-views {
  background: var(--prs-views-bg, var(--pr-reel-badge));
  color: var(--prs-views-fg, var(--pr-on-reel));
}

/* The play mark: the owner's size and colour on the design's frosted disc. */
.productreels-embed .prs-play {
  --prs-p: var(--prs-play-size, 44px);
  width: var(--prs-p);
  height: var(--prs-p);
  margin: calc(var(--prs-p) / -2) 0 0 calc(var(--prs-p) / -2);
  color: var(--prs-play-fg, var(--pr-on-reel));
  pointer-events: none;
  transition: transform 0.3s ease;
}

.productreels-embed .prs-play .pr-icon {
  width: 40%;
  height: 40%;
}

.productreels-embed .prs-tile:hover .prs-play {
  transform: scale(1.08);
}

/* Circle: a story ring. The border is the ring, with 3px of air between it
   and the footage — air, not the page colour, so a dark section shows
   through it as well as a white one. */
.productreels-embed .prs-tile--circle .prs-tile__media {
  --prs-ring-gap: clamp(0px, var(--prs-border-w, 0px) * 99, 3px);
  margin: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: var(--prs-tile-shadow);
}

.productreels-embed .prs-tile--circle .prs-tile__frame {
  background: var(--pr-studio);
}

.productreels-embed .prs-tile--circle .prs-play {
  --prs-p: min(var(--prs-play-size, 44px), 36%);
}

.productreels-embed .prs-tile--circle .prs-tile__label > .pr-t-label {
  max-width: 100%;
}

/* ------------------------------------------------- Product card on a tile */
.prs-card__thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* WooCommerce's price markup: regular price muted, sale price in spark,
   whatever the theme does to <del>, <ins> and the amount inside them. */
.prs .prs-price :is(.amount, bdi) {
  font: inherit;
  color: inherit;
}

.prs .prs-price :is(del, ins) {
  margin: 0;
  padding: 0;
  background: none;
  font: inherit;
  opacity: 1;
}

.prs .prs-price del {
  color: var(--pr-ink-muted);
  text-decoration: line-through;
}

.prs .prs-price ins {
  color: var(--pr-spark);
  text-decoration: none;
}

.prs .prs-price .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A narrow tile keeps only the price the shopper would pay. */
@container (max-width: 160px) {
  .prs-tile__card .prs-price del {
    display: none;
  }
}
/* A popup-sized tile has no room for stars beside the name. */
@container (max-width: 140px) {
  .prs-tile__card .prs-stars {
    display: none;
  }
}
.prs-line {
  display: block;
  width: 80%;
  height: 9px;
  margin-block: 3px;
  border-radius: 4px;
  background: var(--pr-surface-sunken);
  animation: prs-pulse 1.2s ease-in-out infinite alternate;
}

.prs-line--short {
  width: 45%;
}

@keyframes prs-pulse {
  to {
    opacity: 0.45;
  }
}
/* -------------------------------------------------------------------- Grid */
/* Wrapping rows at the owner's reel width rather than stretching grid
   tracks: the width means what it says, and alignment holds for every row,
   the last partial one included. */
.productreels-embed .prs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--prs-gap);
}

.productreels-embed--align-left .prs-grid {
  justify-content: flex-start;
}

.productreels-embed--align-right .prs-grid {
  justify-content: flex-end;
}

.productreels-embed .prs-grid .prs-tile {
  width: var(--prs-tile-w);
}

/* ------------------------------------------------------- Carousel, marquee */
.productreels-embed .prs-carousel {
  /* The middle of the footage, where the arrows sit. */
  --prs-media-h: calc(var(--prs-tile-w) * 16 / 9);
}

.productreels-embed .prs-carousel--circle {
  --prs-media-h: var(--prs-tile-w);
}

/* Room around the tiles for a lifted shadow and a focus ring, which the
   scroller would otherwise clip; the margins take it back out of the flow. */
.productreels-embed .prs-carousel__track,
.productreels-embed .prs-marquee {
  margin-block: -8px -20px;
  padding-block: 8px 20px;
}

.productreels-embed .prs-carousel__track {
  padding-inline: 4px;
  scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
}

.productreels-embed .prs-carousel__track:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: -2px;
}

/* Alignment on a rail is done with auto margins, not justify-content: once
   the rail overflows they collapse to nothing and every reel stays
   reachable. */
.productreels-embed--align-center .prs-carousel__track > .prs-tile:first-child,
.productreels-embed--align-right .prs-carousel__track > .prs-tile:first-child {
  margin-inline-start: auto;
}

.productreels-embed--align-center .prs-carousel__track > .prs-tile:last-child,
.productreels-embed--align-left .prs-carousel__track > .prs-tile:last-child {
  margin-inline-end: auto;
}

/* The arrows in the owner's colours; disabled at an end, and gone from over
   the reels when they sit inside. */
.productreels-embed .prs-arrow,
.productreels-embed .prs-arrow:is(:hover, :focus, :active) {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--prs-arrow-radius, 999px);
  background: var(--prs-arrow-bg, var(--pr-surface));
  color: var(--prs-arrow-fg, var(--pr-ink));
  box-shadow: var(--pr-shadow-md);
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.productreels-embed .prs-arrow:hover:not(:disabled) {
  background: var(--prs-arrow-bg-hover, var(--pr-surface-hover));
  color: var(--prs-arrow-fg-hover, var(--pr-ink));
  transform: scale(1.06);
}

.productreels-embed .prs-arrow:focus-visible {
  outline: 0;
  box-shadow: var(--pr-focus-ring);
}

.productreels-embed .prs-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.productreels-embed .prs-carousel .prs-arrow {
  top: calc(var(--prs-media-h) / 2 - 20px);
}

.productreels-embed .prs-carousel--inside .prs-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

/* Outside the rail when there is room beside it, inside when the rail runs
   to the edge of the screen (the template measures that). */
.productreels-embed .prs-carousel.is-tight .prs-arrow--prev {
  inset-inline-start: 8px;
}

.productreels-embed .prs-carousel.is-tight .prs-arrow--next {
  inset-inline-end: 8px;
}

/* A finger scrolls the rail directly; the arrows only cover the reels. */
@media (hover: none) and (pointer: coarse) {
  .productreels-embed .prs-carousel .prs-arrow {
    display: none;
  }
}
/* Directional icons (src/shared/IconSvg.jsx) mirror in right-to-left:
   carousel and stack arrows, the player's previous/next, "Select options". */
[dir=rtl] .pr-icon--flip {
  transform: scaleX(-1);
}

/* The template moves the marquee frame by frame, so the design's keyframe
   (which assumes exactly two copies) stays off. */
.productreels-embed .prs-marquee__track {
  animation: none;
  will-change: transform;
}

.productreels-embed .prs-marquee.is-static {
  mask-image: none;
}

.productreels-embed .prs-marquee.is-static .prs-marquee__track {
  width: auto;
  overflow-x: auto;
  transform: none !important;
}

/* ----------------------------------------------------------------- Stacked */
.productreels-embed .prs-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  touch-action: pan-y;
}

.productreels-embed--align-left .prs-stack {
  align-items: flex-start;
}

.productreels-embed--align-right .prs-stack {
  align-items: flex-end;
}

/* As wide as the front reel plus the fan on each side; the front reel is in
   the flow and gives the deck its height. On a screen narrower than that
   (a phone), each step out shrinks from the widget's offset to whatever
   fits, measured against the deck itself, so the page never scrolls
   sideways. */
.productreels-embed .prs-deck {
  container-type: inline-size;
  width: calc(var(--prs-tile-w) + 2 * var(--prs-fan, 0px));
  max-width: 100%;
  height: auto;
  padding-block: 8px 12px;
}

.prs-deck__card {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 50%;
  width: var(--prs-tile-w);
  margin-inline-start: calc(var(--prs-tile-w) / -2);
  transform-origin: 50% 90%;
  --prs-step: min(var(--prs-offset, 0px), max(0px, (100cqi - var(--prs-tile-w)) / (2 * var(--prs-fan-steps, 1))));
  translate: calc(var(--prs-card-out, 0) * var(--prs-step)) 0;
  rotate: var(--prs-card-r, 0deg);
  scale: var(--prs-card-s, 1);
  transition: translate 0.5s var(--prs-out), rotate 0.5s var(--prs-out), scale 0.5s var(--prs-out);
  transition-delay: calc(var(--prs-layer, 0) * 40ms);
}

.prs-deck__card.is-front {
  position: relative;
  inset: auto;
  margin-inline: auto;
  translate: var(--prs-drag-x, 0px) 0;
  rotate: var(--prs-drag-r, 0deg);
  scale: 1;
}

/* The design pins every tile in a deck; here the card holding it moves. */
.productreels-embed .prs-deck .prs-tile {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
}

.prs-deck[data-dragging] .prs-deck__card.is-front {
  transition-duration: 0ms;
}

/* Next: the front card is thrown off the way it was swiped while a new one
   surfaces at the back. Previous: it comes back from where it was thrown,
   and the last card sinks away. */
.prs-deck__card.is-throw {
  animation: prs-throw 460ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.prs-deck__card.is-surface {
  animation: prs-surface 560ms var(--prs-out) 90ms backwards;
}

.prs-deck__card.is-return {
  animation: prs-return 600ms var(--prs-out) both;
}

.prs-deck__card.is-sink {
  animation: prs-sink 380ms ease both;
}

@keyframes prs-throw {
  from {
    translate: var(--prs-from-x, 0px) 0;
    rotate: var(--prs-from-r, 0deg);
  }
  to {
    translate: calc(-0.9 * var(--prs-tile-w)) -14px;
    rotate: -9deg;
    opacity: 0;
  }
}
@keyframes prs-return {
  from {
    translate: calc(-0.9 * var(--prs-tile-w)) -14px;
    rotate: -9deg;
    opacity: 0;
  }
}
@keyframes prs-surface {
  from {
    scale: calc(var(--prs-card-s, 1) * 0.94);
    opacity: 0;
  }
}
@keyframes prs-sink {
  to {
    scale: calc(var(--prs-card-s, 1) * 0.94);
    opacity: 0;
  }
}
.prs-stack.is-static .prs-deck__card {
  transition: none;
}

.prs-stack__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.productreels-embed .prs-arrow--sm {
  position: static;
  width: 32px;
  height: 32px;
}

.prs-stack__count {
  min-width: 3.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* ------------------------------------------------------------------- Popup */
/* Pinned to its corner of the page, arriving from that corner's edges. The
   offsets are custom properties so one keyframe serves all four; the RTL
   block flips the horizontal ones, which the RTL build cannot see into. */
.productreels-embed .prs-popup {
  --prs-dx: 40px;
  --prs-dy: 24px;
  position: fixed;
  inset: auto;
  z-index: 99990;
  width: var(--prs-tile-w);
  animation: prs-popup-in 640ms var(--prs-out) backwards;
}

.productreels-embed .prs-popup.is-closing {
  animation: prs-popup-out 240ms cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

/* The design shows a 124px popup; the owner's reel width wins. */
.productreels-embed .prs-popup .prs-tile {
  --prs-tile-w: var(--wr-size);
  width: 100%;
}

.productreels-embed .prs-popup--bottom-right {
  inset-block-end: 24px;
  inset-inline-end: 24px;
}

.productreels-embed .prs-popup--bottom-left {
  --prs-dx: -40px;
  inset-block-end: 24px;
  inset-inline-start: 24px;
}

.productreels-embed .prs-popup--top-right {
  --prs-dy: -24px;
  inset-block-start: 24px;
  inset-inline-end: 24px;
}

.productreels-embed .prs-popup--top-left {
  --prs-dx: -40px;
  --prs-dy: -24px;
  inset-block-start: 24px;
  inset-inline-start: 24px;
}

[dir=rtl] .productreels-embed .prs-popup {
  --prs-dx: -40px;
}

[dir=rtl] .productreels-embed :is(.prs-popup--bottom-left, .prs-popup--top-left) {
  --prs-dx: 40px;
}

.productreels-embed .prs-close,
.productreels-embed .prs-close:is(:hover, :focus, :active) {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-ink);
  color: var(--pr-on-ink);
  box-shadow: 0 0 0 2px var(--pr-surface);
  animation: prs-fade-in 320ms var(--prs-out) 480ms backwards;
}

.productreels-embed .prs-close:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--pr-surface), 0 0 0 4px var(--pr-brand);
}

/* A circle's corner is empty air; the button sits on the ring instead. */
.productreels-embed .prs-popup--circle .prs-close {
  top: 2%;
  inset-inline-end: 2%;
}

@keyframes prs-popup-in {
  from {
    opacity: 0;
    transform: translate(var(--prs-dx), var(--prs-dy)) scale(0.94);
  }
}
@keyframes prs-popup-out {
  to {
    opacity: 0;
    transform: translate(var(--prs-dx), var(--prs-dy)) scale(0.96);
  }
}
@keyframes prs-fade-in {
  from {
    opacity: 0;
  }
}
@media (max-width: 782px) {
  .productreels-embed .prs-popup--desktop-only {
    display: none;
  }
}
/* In the editor the popup cannot pin to the screen, so the widget stands in
   for the page: a canvas panel with a few lines of "content", and the popup
   in the corner it was given. */
.productreels-embed .prs-popup--inline {
  position: absolute;
}

.productreels-embed--in-editor[data-template=popup] {
  position: relative;
  min-height: calc(var(--prs-tile-w) * 16 / 9 + 96px);
  overflow: hidden;
  border-radius: var(--pr-radius-lg);
  background: var(--pr-canvas);
}

.productreels-embed--in-editor[data-template=popup]::before {
  content: "";
  position: absolute;
  inset-block-start: 24px;
  inset-inline: 24px;
  height: 56px;
  background: linear-gradient(var(--pr-line), var(--pr-line)) 0 0/52% 12px no-repeat, linear-gradient(var(--pr-line), var(--pr-line)) 0 22px/74% 12px no-repeat, linear-gradient(var(--pr-line), var(--pr-line)) 0 44px/61% 12px no-repeat;
  pointer-events: none;
}

/* ----------------------------------------------- Elementor, nothing chosen */
/* Printed only in Elementor's editor before a widget is chosen. */
.prs.prs-builder-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--pr-space-6) var(--pr-space-4);
  border: 1px dashed var(--pr-line-strong);
  border-radius: var(--pr-radius-md);
  background: var(--pr-surface);
  color: var(--pr-ink-muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.prs-builder-hint strong {
  color: var(--pr-ink);
  font-size: 15px;
}

/* ------------------------------------------------- Responsive style buckets */
@media (max-width: 1024px) {
  .productreels-embed {
    --wr-size: var(--wr-size-tab);
    --wr-gap: var(--wr-gap-tab);
    --wr-radius: var(--wr-radius-tab);
  }
}
@media (max-width: 600px) {
  .productreels-embed {
    --wr-size: var(--wr-size-mob);
    --wr-gap: var(--wr-gap-mob);
    --wr-radius: var(--wr-radius-mob);
  }
}
/* The editor's device switch drives the same buckets by class, because the
   preview is narrower than the screen it stands in for. These come after the
   media queries so the chosen device wins whatever the window width. */
.productreels-embed--desktop {
  --wr-size: var(--wr-size-desk);
  --wr-gap: var(--wr-gap-desk);
  --wr-radius: var(--wr-radius-desk);
}

.productreels-embed--tablet {
  --wr-size: var(--wr-size-tab);
  --wr-gap: var(--wr-gap-tab);
  --wr-radius: var(--wr-radius-tab);
}

.productreels-embed--mobile {
  --wr-size: var(--wr-size-mob);
  --wr-gap: var(--wr-gap-mob);
  --wr-radius: var(--wr-radius-mob);
}

/* Less motion: everything lands at once, delays included, and the marquee
   is a still row (the template stops it). */
@media (prefers-reduced-motion: reduce) {
  .productreels-embed *,
  .productreels-embed *::before,
  .productreels-embed *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}
/**
 * The player stylesheet: the design's ReelPlayer, its PlayerTheater room,
 * and the product cards and buttons inside it.
 *
 * Scoped under .wr-portal-root, where the player renders (outside every
 * widget, directly on <body>), and .wr-player-compact, the reel editor's
 * inline preview built from the same slide. Both carry `prs`, so the design
 * tokens resolve; the components themselves come from _prs-storefront.scss
 * and this file fits them to the real player and holds them against a
 * theme's button and link rules.
 *
 * Opening is one motion: the room fades in, the stage lands, the chrome
 * (position, close, the buttons beside the stage, the top bar) follows a beat
 * later, and the foot with the title and products rises last. Closing runs
 * the first two in reverse. Between reels the track slides and nothing else
 * moves, so a swipe is only ever a swipe.
 */
.wr-portal-root,
.wr-player-compact {
  --prs-out: cubic-bezier(0.16, 1, 0.3, 1);
  --prs-in: cubic-bezier(0.4, 0, 1, 1);
  --prs-bar-h: 30px;
  position: relative;
  z-index: 2147483000;
  font-family: inherit;
  line-height: 1.4;
  color: var(--pr-on-reel);
  -webkit-font-smoothing: antialiased;
}

:where(.wr-portal-root, .wr-player-compact) :focus:not(:focus-visible) {
  outline: 0;
}

:where(.wr-portal-root, .wr-player-compact) :is(img, video, iframe) {
  display: block;
  max-width: 100%;
  border: 0;
}

body.wr-player-open {
  /* Set inline by the player; declared here so the lock has a home. */
  overscroll-behavior: none;
}

/* ------------------------------------------------------------------ Room */
.prs-room {
  /* The stage: as tall as the screen allows, never taller than a phone
     held at arm's length, and never wider than the room. */
  --prs-stage-w: min(calc(min(100vh - 96px, 720px) * 9 / 16), calc(100vw - 160px));
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--pr-studio);
  touch-action: none;
  animation: prs-fade-in 320ms var(--prs-out);
}

.prs-room.is-closing {
  animation: prs-fade-out 240ms var(--prs-in) forwards;
  pointer-events: none;
}

/* The click-outside target, under the layout. */
.prs-room__backdrop {
  position: absolute;
  inset: 0;
}

.prs-room__count {
  position: absolute;
  inset-block-start: var(--pr-space-5);
  inset-inline-start: var(--pr-space-6);
  z-index: 2;
  color: var(--pr-on-studio-muted);
  font-variant-numeric: tabular-nums;
  /* "2 of 6" reads in its own language's direction, whatever the page's. */
  unicode-bidi: plaintext;
}

.prs-room__close {
  position: absolute;
  inset-block-start: var(--pr-space-5);
  inset-inline-end: var(--pr-space-5);
  z-index: 2;
}

.prs-room__layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pr-space-6);
  width: 100%;
  height: 100%;
  padding: var(--pr-space-8);
  pointer-events: none;
}

.prs-room__layout > * {
  pointer-events: auto;
}

/* The neighbours: dimmed posters, smaller than the stage. */
.prs-room__peek {
  flex: none;
  width: calc(var(--prs-stage-w) * 0.62);
  aspect-ratio: 9/16;
  overflow: hidden;
  border-radius: var(--pr-radius-lg);
  background: var(--pr-studio-raised);
  filter: brightness(0.42) saturate(0.85);
  pointer-events: none;
}

.prs-room__peek > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1099px) {
  .prs-room__peek {
    display: none;
  }
}
.prs-room__stage {
  flex: none;
  width: var(--prs-stage-w);
  box-shadow: 0 0 0 1px var(--pr-studio-line), 0 40px 100px -24px rgba(0, 0, 0, 0.7);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  animation: prs-stage-in 560ms var(--prs-out);
}

.prs-room.is-closing .prs-room__stage {
  animation: prs-stage-out 240ms var(--prs-in) forwards;
}

/* The chrome arrives once the stage has landed. */
:is(.prs-room__count, .prs-room__close, .prs-room__nav, .prs-room .prs-player__top) {
  animation: prs-chrome-in 480ms var(--prs-out) 220ms backwards;
}

/* Vertical: the up and down buttons stack on the stage's end side, meeting
   at its centre line, the way a desktop reels feed keeps them. */
.prs-room.is-vertical .prs-room__layout {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
  align-content: center;
  justify-content: center;
  gap: 12px var(--pr-space-6);
}

.prs-room.is-vertical .prs-room__stage {
  grid-column: 1;
  grid-row: 1/span 2;
  align-self: center;
}

.prs-room.is-vertical .prs-room__nav--prev {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.prs-room.is-vertical .prs-room__nav--next {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

/* A phone: the reel is the screen. */
.prs-room.is-mobile .prs-room__layout {
  padding: 0;
}

.prs-room.is-mobile .prs-room__stage {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  animation-name: prs-fade-in;
}

.prs-room.is-mobile.is-closing .prs-room__stage {
  animation-name: prs-fade-out;
}

/* The previous / next buttons in the owner's navigation colours. */
.wr-portal-root .prs-navbtn,
.wr-portal-root .prs-navbtn:is(:hover, :focus, :active) {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pr-studio-line-strong);
  border-radius: var(--prs-nav-radius, 999px);
  background: var(--prs-nav-bg, var(--pr-studio-raised));
  color: var(--prs-nav-fg, var(--pr-on-studio));
  box-shadow: none;
  transition: transform 0.25s ease;
}

.wr-portal-root .prs-navbtn:hover {
  background: var(--prs-nav-bg-hover, var(--pr-studio-line));
  color: var(--prs-nav-fg-hover, var(--pr-on-studio));
  transform: scale(1.06);
}

.wr-portal-root .prs-navbtn:focus-visible {
  outline: 0;
  box-shadow: var(--pr-focus-ring-studio);
}

@keyframes prs-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes prs-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes prs-stage-in {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 24px;
  }
}
@keyframes prs-stage-out {
  to {
    opacity: 0;
    scale: 0.97;
    translate: 0 10px;
  }
}
@keyframes prs-chrome-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}
/* ----------------------------------------------------------------- Stage */
.prs-player__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 360ms var(--prs-out);
  will-change: transform;
}

.prs-room.is-vertical .prs-player__track {
  flex-direction: column;
}

.prs-room:is(.is-dragging, .is-snap) .prs-player__track {
  transition: none;
}

.prs-player__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.prs-player__media {
  position: absolute;
  inset: 0;
  background: #000;
}

:is(.prs-player__poster, .wr-player__video) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A cover is a picture chosen for the reel, not footage: it fills the stage
   whatever its shape rather than sitting between two black bars. */
.prs-player__poster {
  object-fit: cover;
}

/* On a phone a 9:16 reel fills a taller screen edge to edge, the way every
   reels feed does. Providers stay as they are: an iframe cannot be
   cropped. */
.prs-room.is-mobile :is(.prs-player__poster, .wr-player__video) {
  object-fit: cover;
}

.prs-player__poster--blank {
  display: block;
  background: var(--pr-studio-raised);
}

/* Providers: the iframe fills the box; the provider fits the video in it. */
.wr-player__frame {
  position: absolute;
  inset: 0;
}

.wr-player__frame iframe {
  width: 100%;
  height: 100%;
}

/* YouTube paints its own title bar and logo inside the iframe whenever the
   video is not playing, hugging the iframe's edges. The iframe is made taller
   than the stage and centred, so those bands fall outside the clip while the
   video, which YouTube centres, lands exactly where it did. */
.wr-player__frame--youtube {
  overflow: hidden;
}

.wr-player__frame--youtube iframe {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -72px;
  max-width: none;
  height: calc(100% + 144px);
}

.wr-player__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  word-break: break-all;
  color: var(--pr-on-studio-muted);
}

/* The tap layer toggles playback; while paused it shows the play disc. */
:is(.wr-portal-root, .wr-player-compact) .prs-player__tap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

.prs-player__tap:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px var(--pr-focus-studio);
}

.prs-play.prs-play--lg {
  position: static;
  width: 72px;
  height: 72px;
  margin: 0;
  animation: prs-pop 360ms var(--prs-out);
}

@keyframes prs-pop {
  from {
    opacity: 0;
    scale: 0.8;
  }
}
.prs-player__dots {
  position: absolute;
  inset-block-start: 8px;
  inset-inline: 14px;
  z-index: 5;
  display: flex;
  gap: 4px;
}

.prs-player__dot {
  flex: 1;
  height: 3px;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-on-reel);
  opacity: 0.32;
}

.prs-player__dot.is-on {
  opacity: 1;
}

/* --------------------------------------------------------------- Top bar */
.prs-player__top {
  z-index: 4;
  pointer-events: none;
}

.prs-player__top > * {
  pointer-events: auto;
}

.prs-player__tools {
  margin-inline-start: auto;
}

.has-files .prs-player__top {
  padding-block-start: 22px;
}

.prs-room.is-mobile .prs-player__top {
  padding-block-start: calc(14px + env(safe-area-inset-top, 0px));
}

.prs-room.is-mobile .prs-player__dots {
  inset-block-start: calc(8px + env(safe-area-inset-top, 0px));
}

:is(.wr-portal-root, .wr-player-compact) .prs-iconbtn,
:is(.wr-portal-root, .wr-player-compact) .prs-iconbtn:is(:hover, :focus, :active) {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-reel-badge);
  color: var(--pr-on-reel);
  box-shadow: none;
}

:is(.wr-portal-root, .wr-player-compact) .prs-iconbtn:focus-visible {
  box-shadow: var(--pr-focus-ring-studio);
}

/* Sound: the button, and a slider that unrolls from it on hover or focus. */
.prs-volume {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-reel-badge);
  backdrop-filter: blur(6px);
}

:is(.wr-portal-root, .wr-player-compact) .prs-volume .prs-iconbtn {
  background: transparent;
}

.prs-volume__slider {
  display: flex;
  align-items: center;
  width: 0;
  height: 28px;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  transition: width 280ms var(--prs-out), margin 280ms var(--prs-out);
}

.prs-volume:is(:hover, :focus-within) .prs-volume__slider {
  width: 64px;
  margin-inline-start: 14px;
}

.prs-volume__slider:focus-visible {
  outline: 2px solid var(--pr-focus-studio);
  outline-offset: 2px;
}

.prs-volume__track {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: var(--pr-radius-pill);
  background: rgba(255, 255, 255, 0.32);
}

.prs-volume__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pr-on-reel);
}

/* Shown when the browser refused sound: the first tap asks for it. */
.prs-player__sound {
  position: absolute;
  inset-block-start: 64px;
  inset-inline: 0;
  z-index: 4;
  width: max-content;
  margin-inline: auto;
  animation: prs-pop 360ms var(--prs-out);
}

.prs-room.is-mobile .prs-player__sound {
  inset-block-start: calc(64px + env(safe-area-inset-top, 0px));
}

/* ------------------------------------------------------------ Foot, bar */
/* The title and links ride on the slide; the seek bar stays on the stage
   beneath them. The bar is the scrim's solid end and the foot fades up from
   it, so the two read as one panel. */
.prs-player__foot {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--prs-bar-h);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 96px 14px 10px;
  background: linear-gradient(to top, var(--pr-reel-scrim) 0%, var(--pr-reel-scrim) 45%, transparent 100%);
  pointer-events: none;
}

.prs-player__foot > * {
  pointer-events: auto;
}

.prs-room.is-opening .prs-player__slide.is-active .prs-player__foot {
  animation: prs-foot-in 640ms var(--prs-out) 260ms backwards;
}

@keyframes prs-foot-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}
.no-bar .prs-player__foot {
  inset-block-end: 0;
  padding-block-end: 16px;
}

.prs-room.is-mobile.no-bar .prs-player__foot {
  padding-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
}

:is(.wr-portal-root, .wr-player-compact) .prs-player__title {
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--pr-on-reel);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.prs-player__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  height: var(--prs-bar-h);
  padding: 0 14px;
  background: var(--pr-reel-scrim);
}

.prs-room.is-mobile {
  --prs-bar-h: calc(54px + env(safe-area-inset-bottom, 0px));
}

.prs-seek {
  flex: none;
  cursor: pointer;
  touch-action: none;
}

.prs-seek:focus-visible {
  outline: 0;
}

/* The fill grows from the reading start and the knob is placed from it, in
   RTL as well (the knob's position is set inline as inset-inline-start). */
.prs-seek__fill {
  inset-inline: 0 auto;
}

.prs-seek__knob {
  margin-inline-start: -6px;
}

.prs-seek:focus-visible .prs-seek__knob {
  box-shadow: 0 0 0 3px var(--pr-focus-studio);
}

/* ------------------------------------------------------ Buttons and cards */
:is(.wr-portal-root, .wr-player-compact) .prs-btn,
:is(.wr-portal-root, .wr-player-compact) .prs-btn:is(:hover, :focus, :active, :visited) {
  min-height: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

:is(.wr-portal-root, .wr-player-compact) .prs-btn:hover {
  background: var(--pr-studio-raised);
  color: var(--pr-on-ink);
}

:is(.wr-portal-root, .wr-player-compact) .prs-btn--light:is(:hover, :focus, :active, :visited) {
  background: var(--pr-surface);
  color: var(--pr-ink);
}

:is(.wr-portal-root, .wr-player-compact) .prs-btn--light:hover {
  background: var(--pr-surface-hover);
}

.prs-btn__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.wr-portal-root, .wr-player-compact) .prs-btn.is-done {
  background: var(--pr-ok);
  color: var(--pr-on-ink);
}

:is(.wr-portal-root, .wr-player-compact) .prs-btn.is-disabled,
:is(.wr-portal-root, .wr-player-compact) .prs-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

:is(.wr-portal-root, .wr-player-compact) .prs-card {
  color: var(--pr-ink);
}

:is(.wr-portal-root, .wr-player-compact) .prs-card a {
  color: inherit;
  text-decoration: none;
}

:is(.wr-portal-root, .wr-player-compact) .prs-card__name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:is(.wr-portal-root, .wr-player-compact) .prs-card__name:focus-visible {
  outline: 2px solid var(--pr-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.prs-card__note {
  color: var(--pr-ink-muted);
}

:is(.wr-portal-root, .wr-player-compact) .prs-card__add,
:is(.wr-portal-root, .wr-player-compact) .prs-card__add:is(:hover, :focus, :active) {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-ink);
  color: var(--pr-on-ink);
  box-shadow: none;
}

:is(.wr-portal-root, .wr-player-compact) .prs-card__add:hover {
  background: var(--pr-studio-raised);
}

:is(.wr-portal-root, .wr-player-compact) .prs-card__add:focus-visible {
  box-shadow: var(--pr-focus-ring);
}

:is(.wr-portal-root, .wr-player-compact) .prs-card__add.is-done {
  background: var(--pr-ok);
}

.prs-card__add:disabled {
  cursor: progress;
}

/* The modern card's buy button with its text: a pill, not a circle. */
:is(.wr-portal-root, .wr-player-compact) .prs-card__add--text,
:is(.wr-portal-root, .wr-player-compact) .prs-card__add--text:is(:hover, :focus, :active) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 50%;
  height: 32px;
  padding: 0 var(--pr-space-3);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}

.prs-card__add-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.prs-card__add--text > svg {
  flex: none;
}

.prs-spin {
  animation: prs-spin 0.8s linear infinite;
}

@keyframes prs-spin {
  to {
    rotate: 360deg;
  }
}
/* ---------------------------------------------------------- Classic card */
/* A dark strip as wide as the reel: the picture at the start, then the
   name, the price and a full-width button. */
:is(.wr-portal-root, .wr-player-compact) .prs-card--classic {
  flex-direction: row;
  align-items: stretch;
  width: auto;
  gap: var(--pr-space-3);
  padding: var(--pr-space-2);
  border-radius: var(--pr-radius-md);
  background: var(--pr-reel-badge);
  color: var(--pr-on-reel);
  box-shadow: none;
}

.prs-card--classic .prs-card__thumb {
  width: 88px;
  height: 88px;
  aspect-ratio: auto;
  border-radius: var(--pr-radius-sm);
  background: var(--pr-surface);
}

.prs-card--classic .prs-card__text {
  justify-content: center;
  gap: 2px;
}

.prs-card--classic .prs-card__name {
  font-weight: 600;
}

:is(.wr-portal-root, .wr-player-compact) .prs-card--classic .prs-price {
  color: var(--pr-on-reel);
  font-weight: 700;
}

:is(.wr-portal-root, .wr-player-compact) .prs-card--classic .prs-price del {
  color: var(--pr-on-reel);
  font-weight: 400;
  opacity: 0.7;
}

:is(.wr-portal-root, .wr-player-compact) .prs-card--classic .prs-price ins {
  color: var(--pr-spark-bright);
}

.prs-card--classic .prs-stars,
.prs-card--classic .prs-stars .prs-stars__n {
  color: var(--pr-on-reel);
}

:is(.wr-portal-root, .wr-player-compact) .prs-card--classic .prs-btn,
:is(.wr-portal-root, .wr-player-compact) .prs-card--classic .prs-btn:is(:hover, :focus, :active, :visited) {
  margin-block-start: 6px;
  border-radius: var(--pr-radius-sm);
  background: var(--pr-reel-scrim);
  color: var(--pr-on-reel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

:is(.wr-portal-root, .wr-player-compact) .prs-card--classic .prs-btn:hover {
  background: var(--pr-studio-raised);
}

:is(.wr-portal-root, .wr-player-compact) .prs-card--classic .prs-btn:focus-visible {
  box-shadow: var(--pr-focus-ring-studio);
}

:is(.wr-portal-root, .wr-player-compact) .prs-card--classic .prs-btn.is-done {
  background: var(--pr-ok);
}

.prs-card--classic.is-loading .prs-card__text {
  gap: var(--pr-space-2);
}

/* The chevron that folds the classic cards away, at the end above them. */
.prs-player__fold {
  align-self: flex-end;
}

/* --------------------------------------------------------- Product panel */
/* The stage and the panel sit side by side as one piece. Without a panel
   the pair is not a box at all, and the stage is a child of the layout as
   it always was. */
.prs-room__duo {
  display: contents;
}

.prs-room.has-panel {
  --prs-stage-w: min(calc(min(100vh - 96px, 720px) * 9 / 16), calc((100vw - 200px) / 2.2));
  --prs-panel-w: calc(var(--prs-stage-w) * 1.2);
}

.prs-room.has-panel .prs-room__duo {
  display: flex;
  flex: none;
  border-radius: var(--pr-radius-lg);
  box-shadow: 0 0 0 1px var(--pr-studio-line), 0 40px 100px -24px rgba(0, 0, 0, 0.7);
}

.prs-room.has-panel .prs-room__stage {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  box-shadow: none;
}

/* Vertical: the up and down buttons move to the start side of the pair. */
.prs-room.is-vertical.has-panel .prs-room__duo {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
}

.prs-room.is-vertical.has-panel :is(.prs-room__nav--prev, .prs-room__nav--next) {
  grid-column: 1;
}

@media (max-width: 1679px) {
  .prs-room.has-panel .prs-room__peek {
    display: none;
  }
}
.prs-pp {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--pr-surface);
  color: var(--pr-ink);
  text-align: start;
  user-select: text;
  -webkit-user-select: text;
}

.prs-pp--dock {
  flex: none;
  width: var(--prs-panel-w);
  height: calc(var(--prs-stage-w) * 16 / 9);
  border-start-end-radius: var(--pr-radius-lg);
  border-end-end-radius: var(--pr-radius-lg);
  animation: prs-panel-in 520ms var(--prs-out) 120ms backwards;
}

@keyframes prs-panel-in {
  from {
    opacity: 0;
    translate: -16px 0;
  }
}
/* A phone: a sheet over the reel, on a shade that lowers it when tapped. */
.prs-room__sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.prs-room__sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--pr-scrim);
  animation: prs-fade-in 240ms var(--prs-out);
}

.prs-pp--sheet {
  max-height: 90%;
  border-radius: var(--pr-radius-lg) var(--pr-radius-lg) 0 0;
  animation: prs-sheet-in 420ms var(--prs-out);
}

@keyframes prs-sheet-in {
  from {
    translate: 0 100%;
  }
}
.prs-pp__bar {
  position: absolute;
  inset-block-start: var(--pr-space-3);
  inset-inline: var(--pr-space-3);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.prs-pp__bar > * {
  pointer-events: auto;
}

.wr-portal-root .prs-pp__round,
.wr-portal-root .prs-pp__round:is(:hover, :focus, :active) {
  display: grid;
  place-items: center;
  width: var(--pr-control);
  height: var(--pr-control);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-surface);
  color: var(--pr-ink);
  box-shadow: var(--pr-shadow-md);
  cursor: pointer;
}

.wr-portal-root .prs-pp__x,
.wr-portal-root .prs-pp__x:is(:hover, :focus, :active) {
  margin-inline-start: auto;
}

.wr-portal-root .prs-pp__round:hover {
  background: var(--pr-surface-hover);
}

.wr-portal-root .prs-pp__round:focus-visible {
  box-shadow: var(--pr-focus-ring);
}

.prs-pp__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
}

/* Pictures: one per swipe, letterboxed on white, never cropped. */
.prs-pp__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.prs-pp__track::-webkit-scrollbar {
  display: none;
}

.prs-pp__shot {
  flex: 0 0 100%;
  aspect-ratio: 4/3;
  scroll-snap-align: start;
  background: var(--pr-surface);
}

.prs-pp__shot:empty {
  background: var(--pr-surface-sunken);
}

.wr-portal-root .prs-pp__shot > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prs-pp__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-block-start: var(--pr-space-3);
}

.wr-portal-root .prs-pp__dot,
.wr-portal-root .prs-pp__dot:is(:hover, :focus, :active) {
  position: relative;
  width: 8px;
  height: 8px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-line-strong);
  box-shadow: none;
  opacity: 0.45;
  cursor: pointer;
}

/* A bigger target than the dot. */
.prs-pp__dot::after {
  content: "";
  position: absolute;
  inset: -6px -3px;
}

.wr-portal-root .prs-pp__dot.is-on {
  background: var(--pr-ink);
  opacity: 1;
}

.wr-portal-root .prs-pp__dot:focus-visible {
  box-shadow: var(--pr-focus-ring);
  opacity: 1;
}

.prs-pp__body {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-6);
  padding: var(--pr-space-6) var(--pr-space-6) var(--pr-space-5);
}

.prs-pp__scroll.is-loading .prs-pp__body {
  gap: var(--pr-space-2);
}

.prs-pp__head {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-2);
}

/* The storefront inherits the theme's font, display sizes included. */
.wr-portal-root .prs-pp :is(.pr-t-display, .pr-t-title) {
  font-family: inherit;
}

.wr-portal-root .prs-pp__name {
  margin: 0;
  padding: 0;
  color: var(--pr-ink);
  overflow-wrap: anywhere;
}

.wr-portal-root .prs-pp a:is(.prs-pp__more, :not([class])) {
  color: inherit;
  text-decoration: none;
}

.wr-portal-root .prs-pp a:is(.prs-pp__more, :not([class])):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wr-portal-root .prs-pp a:is(.prs-pp__more, :not([class])):focus-visible {
  outline: 2px solid var(--pr-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.wr-portal-root .prs-pp .prs-price {
  flex-wrap: wrap;
  white-space: normal;
  color: var(--pr-ink);
}

.prs-pp__option {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-3);
}

.prs-pp__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pr-space-2);
}

.wr-portal-root .prs-pp__pill,
.wr-portal-root .prs-pp__pill:is(:hover, :focus, :active) {
  height: var(--pr-control);
  min-height: 0;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: var(--pr-radius-pill);
  background: var(--pr-surface-sunken);
  color: var(--pr-ink);
  box-shadow: none;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.wr-portal-root .prs-pp__pill:hover {
  background: var(--pr-line);
}

.wr-portal-root .prs-pp__pill.is-on {
  background: var(--pr-ink);
  color: var(--pr-on-ink);
}

/* No variation has this choice with the others: still pressable, so a
   shopper can change their mind in any order, but struck through. */
.wr-portal-root .prs-pp__pill.is-off {
  color: var(--pr-ink-disabled);
  text-decoration: line-through;
}

.wr-portal-root .prs-pp__pill.is-on.is-off {
  color: var(--pr-on-ink);
  opacity: 0.6;
}

.wr-portal-root .prs-pp__pill:focus-visible {
  box-shadow: var(--pr-focus-ring);
}

.prs-pp__desc {
  color: var(--pr-ink-muted);
  overflow-wrap: anywhere;
}

.prs-pp__desc > * + * {
  margin-block-start: var(--pr-space-2);
}

.wr-portal-root .prs-pp__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--pr-space-1);
}

/* The buy button and the cart, kept in view under the scroll. */
.prs-pp__foot {
  flex: none;
  display: flex;
  gap: var(--pr-space-3);
  padding: var(--pr-space-4) var(--pr-space-6) var(--pr-space-6);
  border-block-start: 1px solid var(--pr-line);
  background: var(--pr-surface);
}

.prs-pp--sheet .prs-pp__foot {
  padding: var(--pr-space-3) var(--pr-space-4) calc(var(--pr-space-4) + env(safe-area-inset-bottom, 0px));
}

.wr-portal-root .prs-pp__buy,
.wr-portal-root .prs-pp__buy:is(:hover, :focus, :active, :visited) {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pr-space-2);
  height: var(--pr-control-lg);
  min-height: 0;
  margin: 0;
  padding: 0 var(--pr-space-4);
  border: 0;
  border-radius: var(--pr-radius-sm);
  background: var(--pr-ink);
  color: var(--pr-on-ink);
  box-shadow: none;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
}

.wr-portal-root .prs-pp__buy:hover {
  background: var(--pr-studio-raised);
}

.wr-portal-root .prs-pp__buy:focus-visible {
  box-shadow: var(--pr-focus-ring);
}

.wr-portal-root .prs-pp__buy.is-done {
  background: var(--pr-ok);
}

.wr-portal-root .prs-pp__buy.is-disabled {
  background: var(--pr-surface-sunken);
  color: var(--pr-ink-muted);
  cursor: not-allowed;
}

.wr-portal-root .prs-pp__buy:disabled {
  cursor: progress;
}

.wr-portal-root .prs-pp__cart,
.wr-portal-root .prs-pp__cart:is(:hover, :focus, :active, :visited) {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--pr-control-lg);
  height: var(--pr-control-lg);
  border-radius: var(--pr-radius-sm);
  background: var(--pr-surface-sunken);
  color: var(--pr-ink);
  box-shadow: none;
  text-decoration: none;
}

.wr-portal-root .prs-pp__cart:hover {
  background: var(--pr-line);
}

.wr-portal-root .prs-pp__cart:focus-visible {
  box-shadow: var(--pr-focus-ring);
}

/* Several products: a list to pick from, the title level with the close. */
.prs-pp__scroll--list {
  padding: var(--pr-space-3) var(--pr-space-5) var(--pr-space-5);
}

.wr-portal-root .prs-pp__heading {
  display: flex;
  align-items: center;
  min-height: var(--pr-control);
  margin: 0 0 var(--pr-space-4);
  padding-inline-end: 52px;
  color: var(--pr-ink);
}

.wr-portal-root .prs-pp__list {
  display: flex;
  flex-direction: column;
  gap: var(--pr-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wr-portal-root .prs-pp__row,
.wr-portal-root .prs-pp__row:is(:hover, :focus, :active) {
  display: flex;
  align-items: center;
  gap: var(--pr-space-3);
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--pr-space-2);
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-radius-md);
  background: var(--pr-surface);
  color: var(--pr-ink);
  box-shadow: none;
  font-family: inherit;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.wr-portal-root .prs-pp__row:hover {
  background: var(--pr-surface-hover);
}

.wr-portal-root .prs-pp__row:focus-visible {
  box-shadow: var(--pr-focus-ring);
}

.wr-portal-root .prs-pp__row:disabled {
  cursor: default;
}

.prs-pp__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--pr-radius-sm);
  background: var(--pr-surface-sunken);
}

.wr-portal-root .prs-pp__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prs-pp__rowtext {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prs-pp__rowname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Toast */
.prs-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(420px, 100vw - 32px);
  margin-inline: auto;
  padding: 12px 16px;
  border-radius: var(--pr-radius-md);
  background: var(--pr-surface);
  color: var(--pr-ink);
  box-shadow: var(--pr-shadow-lg);
  animation: prs-pop 420ms var(--prs-out);
}

.prs-toast::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pr-ok);
}

.prs-toast--error::before {
  background: var(--pr-danger);
}

/* On a phone the foot of the reel is full of buttons: the toast drops in
   under the top bar instead. */
.prs-room.is-mobile .prs-toast {
  inset-block: calc(64px + env(safe-area-inset-top, 0px)) auto;
}

/* Less motion: everything lands at once, delays included. */
@media (prefers-reduced-motion: reduce) {
  :is(.wr-portal-root, .wr-player-compact) *,
  :is(.wr-portal-root, .wr-player-compact) *::before,
  :is(.wr-portal-root, .wr-player-compact) *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}
/* --------------------------------------------------------- Compact player */
/* Inline: it takes the width its parent gives it and stays in the flow. */
.wr-player-compact {
  z-index: auto;
  width: 100%;
}

.wr-player-compact .prs-player {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 64px -24px rgba(0, 0, 0, 0.8);
  user-select: none;
  -webkit-user-select: none;
}

/* Its toast stays on the stage instead of the screen's bottom edge. */
.wr-player-compact .prs-toast {
  position: absolute;
  inset-block-end: calc(var(--prs-bar-h) + 12px);
  max-width: calc(100% - 24px);
}

/* A widget placed on every product page by its Place it settings. Outside
   the summary it sits on its own row below the floated gallery and summary. */
.prs-product-page {
  clear: both;
  width: 100%;
}

.prs-product-page > .productreels-embed {
  margin-block: var(--pr-space-8);
}

.prs-product-page--after-cart {
  clear: none;
}

.prs-product-page--after-cart > .productreels-embed {
  margin-block: var(--pr-space-6);
}

.productreels-embed .wr-embed-loading {
  /* One row of thumbnails' worth of height, so the page settles before the payload lands. */
  min-height: 120px;
}

/*# sourceMappingURL=style-productreels-public.css.map*/