/* SASU Fashions Product Media - frontend (v1.1.0). Loaded only on product pages with an active Reel. */

/* ---------- Reel box (gallery slide / fallback card) ---------- */
.sasu-pm-box{position:relative;width:100%;max-width:100%;aspect-ratio:9/16;max-height:78vh;margin:0 auto;background:#111;border-radius:var(--wd-brd-radius,8px);overflow:hidden}
.sasu-pm-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.sasu-pm-facade{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:#222;box-shadow:none;transform:none;text-transform:none;cursor:pointer;display:block;overflow:hidden}
.sasu-pm-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.sasu-pm-facade::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.05) 40%,rgba(0,0,0,.35))}
.sasu-pm-badge{position:absolute;top:10px;left:10px;z-index:2;padding:3px 9px;border-radius:12px;background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);color:#fff;font:600 11px/1.4 sans-serif;letter-spacing:.06em;text-transform:uppercase}
.sasu-pm-playicon{position:absolute;left:50%;top:50%;z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 12px rgba(0,0,0,.35)}
.sasu-pm-playicon::after{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #dc2743}
.sasu-pm-facade:focus-visible{outline:3px solid #dc2743;outline-offset:-3px}
.sasu-pm-card{margin:16px 0}
.sasu-pm-card-title{margin:0 0 8px;font-weight:600}
.sasu-pm-card .sasu-pm-box{max-width:320px}

/* ---------- Gallery thumbnail ---------- */
.sasu-pm-thumb{position:relative;cursor:pointer}
.sasu-pm-thumb img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--wd-brd-radius,4px)}
.sasu-pm-thumb .sasu-pm-playicon{width:28px;height:28px;margin:-14px 0 0 -14px}
.sasu-pm-thumb .sasu-pm-playicon::after{left:11px;top:8px;border-width:6px 0 6px 9px}

/* Hide "Click to enlarge" while the Reel slide is showing (WoodMart gallery) */
.woocommerce-product-gallery.sasu-pm-gallery-active .wd-show-product-gallery-wrap{display:none}

/* ---------- Floating player ---------- */
.sasu-pm-float{position:fixed;z-index:9990;width:var(--sasu-pm-w-d,200px);bottom:var(--sasu-pm-bottom-d,104px);background:#000;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.35);overflow:hidden;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s}
.sasu-pm-float[hidden]{display:none}
.sasu-pm-float[data-pos-d="bottom-right"]{right:16px;left:auto}
.sasu-pm-float[data-pos-d="bottom-left"]{left:16px;right:auto}
.sasu-pm-float.is-in{opacity:1;transform:none}
.sasu-pm-float.is-away{opacity:0;pointer-events:none}
.sasu-pm-float.is-dragging{transition:none;user-select:none}
.sasu-pm-bar{display:flex;align-items:center;gap:2px;padding:2px 4px 2px 10px;background:#161616;color:#fff;cursor:grab;touch-action:none}
.sasu-pm-title{flex:1;font:600 11px/1 sans-serif;letter-spacing:.06em;text-transform:uppercase}
.sasu-pm-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:6px;background:transparent;box-shadow:none;text-transform:none;color:#fff;cursor:pointer;text-decoration:none;line-height:1}
.sasu-pm-btn[hidden]{display:none}
.sasu-pm-btn:hover,.sasu-pm-btn:focus-visible{background:rgba(255,255,255,.18);color:#fff}
.sasu-pm-stage{position:relative;width:100%;aspect-ratio:9/16;background:#111;overflow:hidden}
/* The embed keeps its natural width and is scaled into the small card */
.sasu-pm-stage .sasu-pm-frame{position:absolute;left:0;top:0;width:340px;height:604px;transform-origin:0 0;transform:scale(var(--sasu-pm-scale,.588))}
.sasu-pm-stage .sasu-pm-badge{display:none}

/* Expanded / fullscreen (higher specificity than the position rules and media queries below) */
html body .sasu-pm-float.is-expanded{inset:0;left:0;right:0;top:0;bottom:0;width:100%;height:100%;border-radius:0;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;transform:none;opacity:1}
html body .sasu-pm-float.is-expanded .sasu-pm-bar{width:100%;background:transparent;justify-content:flex-end;padding:8px}
html body .sasu-pm-float.is-expanded .sasu-pm-title{display:none}
html body .sasu-pm-float.is-expanded .sasu-pm-stage{width:min(92vw,420px);height:calc(100vh - 64px);height:calc(100dvh - 64px);aspect-ratio:auto;max-height:800px;border-radius:12px}
html body .sasu-pm-float.is-expanded .sasu-pm-stage .sasu-pm-frame,html body .sasu-pm-float.is-fs .sasu-pm-stage .sasu-pm-frame{width:100%;height:100%;transform:none}
html body .sasu-pm-float.is-expanded .sasu-pm-stage .sasu-pm-badge{display:block}
html body .sasu-pm-float.is-fs{inset:0;width:100%;height:100%;border-radius:0;display:flex;flex-direction:column;align-items:center;background:#000;transform:none;opacity:1}
html body .sasu-pm-float.is-fs .sasu-pm-stage{width:min(100vw,56.25vh);height:calc(100vh - 36px);aspect-ratio:auto}
html.sasu-pm-lock{overflow:hidden}

/* Tablet / phone: clear the mobile bottom toolbar; chat button stays on the right */
@media (max-width:1024px){
  .sasu-pm-float{bottom:calc(var(--sasu-pm-bottom-m,72px) + env(safe-area-inset-bottom,0px))}
  .sasu-pm-float[data-pos-m="bottom-left"]{left:10px;right:auto}
  .sasu-pm-float[data-pos-m="bottom-right"]{right:10px;left:auto}
}
@media (max-width:768px){
  .sasu-pm-float{width:var(--sasu-pm-w-m,96px);border-radius:10px}
  .sasu-pm-bar{padding-left:6px}
  .sasu-pm-title,.sasu-pm-btn-open,.sasu-pm-btn-fs{display:none}
  .sasu-pm-btn{width:24px;height:24px}
  .sasu-pm-stage .sasu-pm-playicon{width:36px;height:36px;margin:-18px 0 0 -18px}
  .sasu-pm-stage .sasu-pm-playicon::after{left:14px;top:11px;border-width:7px 0 7px 11px}
  html body .sasu-pm-float.is-expanded{padding-top:env(safe-area-inset-top,0px)}
  html body .sasu-pm-float.is-expanded .sasu-pm-btn-open{display:inline-flex}
}
/* ---------- v1.1: embed lifecycle, fallback note, View on Instagram ---------- */
.sasu-pm-facade{z-index:3}
.sasu-pm-facade.is-fading{opacity:0;transition:opacity .25s;pointer-events:none}
.sasu-pm-box.is-loading .sasu-pm-playicon,.sasu-pm-stage.is-loading .sasu-pm-playicon{animation:sasu-pm-pulse 1.2s ease-in-out infinite}
@keyframes sasu-pm-pulse{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.6;transform:scale(.92)}}
.sasu-pm-note{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:8px 10px;background:rgba(0,0,0,.75);color:#fff;font:500 12px/1.35 sans-serif;text-align:center}
.sasu-pm-note a{color:#fff;text-decoration:underline}
.sasu-pm-stage .sasu-pm-note{padding:4px 5px;font-size:9px}
.sasu-pm-ig-btn{display:none;margin:0;padding:11px 14px;border-radius:8px;background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);color:#fff;font:600 14px/1.2 sans-serif;text-align:center;text-decoration:none;box-sizing:border-box}
.sasu-pm-ig-btn:hover,.sasu-pm-ig-btn:focus-visible{color:#fff;filter:brightness(1.08)}
html body .sasu-pm-float.is-expanded .sasu-pm-ig-btn{display:block;width:min(92vw,420px);margin:10px 0 max(10px,env(safe-area-inset-bottom,0px))}
html body .sasu-pm-float.is-expanded.has-ig .sasu-pm-stage{height:calc(100vh - 124px);height:calc(100dvh - 124px)}
html body .sasu-pm-float.is-fs .sasu-pm-ig-btn{display:none}
/* ---------- v1.1: native video player + controls ---------- */
.sasu-pm-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#000}
.sasu-pm-controls{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;gap:6px;justify-content:center;padding:8px;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0));opacity:0;transition:opacity .2s}
.sasu-pm-box:hover .sasu-pm-controls,.sasu-pm-box:focus-within .sasu-pm-controls,.sasu-pm-box.is-paused .sasu-pm-controls,.sasu-pm-box.is-ended .sasu-pm-controls,.sasu-pm-stage:hover .sasu-pm-controls,.sasu-pm-stage:focus-within .sasu-pm-controls,.sasu-pm-stage.is-paused .sasu-pm-controls,.sasu-pm-stage.is-ended .sasu-pm-controls{opacity:1}
.sasu-pm-ctl{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;box-shadow:none;cursor:pointer;line-height:1}
.sasu-pm-ctl:hover,.sasu-pm-ctl:focus-visible{background:rgba(0,0,0,.85);color:#fff}
.sasu-pm-ctl-replay{display:none}
.sasu-pm-box.is-ended .sasu-pm-ctl-replay,.sasu-pm-stage.is-ended .sasu-pm-ctl-replay{display:inline-flex}
.sasu-pm-box.is-ended .sasu-pm-ctl-play,.sasu-pm-stage.is-ended .sasu-pm-ctl-play{display:none}
.sasu-pm-box.is-ended .sasu-pm-video,.sasu-pm-stage.is-ended .sasu-pm-video{filter:brightness(.6)}
.sasu-pm-stage .sasu-pm-controls{padding:4px}
.sasu-pm-stage .sasu-pm-ctl{width:26px;height:26px}
html body .sasu-pm-float.is-expanded .sasu-pm-controls{padding:8px}
html body .sasu-pm-float.is-expanded .sasu-pm-ctl{width:36px;height:36px}
@media (max-width:768px){.sasu-pm-float:not(.is-expanded) .sasu-pm-controls{display:none}}
@media (prefers-reduced-motion:reduce){.sasu-pm-controls{transition:none}.sasu-pm-float{transition:none}.sasu-pm-box.is-loading .sasu-pm-playicon,.sasu-pm-stage.is-loading .sasu-pm-playicon{animation:none}.sasu-pm-facade.is-fading{transition:none}}