/**
 * Try-on widget presets — visual definitions.
 *
 * Loaded by the customization panel (public/business.html) and, later, by the embed
 * script on the merchant's own site. Everything is prefixed `pw-` and sets explicit
 * values rather than inheriting, because on a merchant's page this lands in the
 * middle of THEIR stylesheet and must not be reshaped by it.
 *
 * Preset ids are stored in the DB (business_sites.widget_config) — see
 * public/widget/presets.js. Don't rename a class without migrating the data.
 */

/* ============================ BUTTON ============================ */

/* Size is a set of custom properties rather than a per-preset override, so one
   size class scales every design — including the ones with unusual geometry
   (icon-tag is square, ribbon is a banner, soft-card is chunkier). */
.pw-btn {
  --pw-fs: 14px; --pw-py: 10px; --pw-px: 16px; --pw-gap: 7px; --pw-icon: 17px; --pw-sq: 40px;
  position: absolute;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: var(--pw-gap);
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Fredoka', -apple-system, system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--pw-fs);
  line-height: 1;
  padding: var(--pw-py) var(--pw-px);
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.pw-btn:hover { transform: scale(1.045); }
.pw-btn:active { transform: scale(.99); }
.pw-btn__icon { width: var(--pw-icon); height: var(--pw-icon); flex: none; display: block; }

.pw-size--sm { --pw-fs: 12px;   --pw-py: 7px;  --pw-px: 12px; --pw-gap: 5px; --pw-icon: 14px; --pw-sq: 32px; }
.pw-size--md { --pw-fs: 14px;   --pw-py: 10px; --pw-px: 16px; --pw-gap: 7px; --pw-icon: 17px; --pw-sq: 40px; }
.pw-size--lg { --pw-fs: 16.5px; --pw-py: 13px; --pw-px: 22px; --pw-gap: 9px; --pw-icon: 21px; --pw-sq: 50px; }

/* A listing tile can be narrower than the button — a phone shows two or three
   products per row. The icon is what goes; the words stay, because an unlabelled
   icon sitting on a shop's photo doesn't invite anyone to do anything. See decide()
   in probna-tryon.js. */
.pw-btn.pw-slim { padding-left: calc(var(--pw-px) * .7); padding-right: calc(var(--pw-px) * .7); }
.pw-btn.pw-slim .pw-btn__icon { display: none; }

/* corner placement — same four for every design */
.pw-pos--top-left     { top: 12px; left: 12px; }
.pw-pos--top-right    { top: 12px; right: 12px; }
.pw-pos--bottom-left  { bottom: 12px; left: 12px; }
.pw-pos--bottom-right { bottom: 12px; right: 12px; }

/* --- glass-pill (default): survives any photo — white, translucent, blurred --- */
.pw-btn--glass-pill {
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #2C2540;
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.pw-btn--glass-pill:hover { background: #fff; border-color: #FF4D8D; }

/* --- logo-pill: the glass pill, with the Probna mark in place of the icon.
       The only preset that changes the GLYPH rather than the shell — the swap itself
       is markup, done by each renderer from MARK_PRESETS in presets.js; everything
       here is the shell it shares with glass-pill above. The mark is a FILLED path
       where the generic icon is a stroked one, so it reads a touch heavier at the
       same box: it is drawn fractionally smaller to sit on the same optical weight
       as the label beside it, and tinted our pink so it is the mark and not a
       lookalike of the icon it replaced. --- */
.pw-btn--logo-pill {
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #2C2540;
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.pw-btn--logo-pill .pw-btn__icon {
  width: calc(var(--pw-icon) * .92); height: calc(var(--pw-icon) * .92);
  color: #FF4D8D;
}
.pw-btn--logo-pill:hover { background: #fff; border-color: #FF4D8D; }

/* --- glow-pill: same shell, slow pulsing halo --- */
.pw-btn--glow-pill {
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #2C2540;
  border-color: rgba(124,92,255,.45);
  animation: pw-glow 2.6s ease-in-out infinite;
}
.pw-btn--glow-pill:hover { animation-duration: 1.2s; border-color: #7C5CFF; }
@keyframes pw-glow {
  0%,100% { box-shadow: 0 0 8px 1px rgba(124,92,255,.30), 0 0 20px 3px rgba(124,92,255,.12); }
  50%     { box-shadow: 0 0 17px 3px rgba(124,92,255,.48), 0 0 38px 7px rgba(124,92,255,.20); }
}

/* --- solid-brand: flat Probna pink, chunky shadow --- */
.pw-btn--solid-brand {
  background: #FF4D8D;
  color: #fff;
  border-color: #FF4D8D;
  box-shadow: 0 4px 0 #E0376F, 0 6px 14px rgba(224,55,111,.3);
}
.pw-btn--solid-brand:hover { background: #E0376F; border-color: #E0376F; }
.pw-btn--solid-brand:active { transform: translateY(3px) scale(.99); box-shadow: 0 1px 0 #E0376F; }

/* --- outline-dark: dark glass, hairline edge --- */
.pw-btn--outline-dark {
  background: rgba(24,18,36,.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 4px 14px rgba(0,0,0,.24);
}
.pw-btn--outline-dark:hover { background: rgba(24,18,36,.8); border-color: #fff; }

/* --- icon-tag: square, icon only. For crowded product cards --- */
.pw-btn--icon-tag {
  padding: 0;
  width: var(--pw-sq);
  height: var(--pw-sq);
  justify-content: center;
  border-radius: 13px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #FF4D8D;
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.pw-btn--icon-tag:hover { color: #fff; background: #FF4D8D; border-color: #FF4D8D; }
.pw-btn--icon-tag .pw-btn__label { display: none; }
.pw-btn--icon-tag .pw-btn__icon { width: calc(var(--pw-icon) * 1.2); height: calc(var(--pw-icon) * 1.2); }

/* --- ribbon: banner pinned to the image edge, square inner corner --- */
.pw-btn--ribbon {
  padding: var(--pw-py) calc(var(--pw-px) + 2px);
  border-radius: 0;
  background: linear-gradient(100deg, #FF4D8D, #7C5CFF);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(124,92,255,.34);
}
.pw-btn--ribbon:hover { filter: brightness(1.07); }
.pw-pos--top-left.pw-btn--ribbon     { top: 16px; left: 0;  border-radius: 0 999px 999px 0; }
.pw-pos--bottom-left.pw-btn--ribbon  { bottom: 16px; left: 0;  border-radius: 0 999px 999px 0; }
.pw-pos--top-right.pw-btn--ribbon    { top: 16px; right: 0; border-radius: 999px 0 0 999px; }
.pw-pos--bottom-right.pw-btn--ribbon { bottom: 16px; right: 0; border-radius: 999px 0 0 999px; }

/* --- soft-card: bigger white card, two-line, desktop-led shops --- */
.pw-btn--soft-card {
  padding: calc(var(--pw-py) + 1px) var(--pw-px);
  border-radius: 15px;
  background: #fff;
  color: #2C2540;
  border-color: #ECE3F0;
  box-shadow: 0 8px 24px rgba(44,37,64,.17);
}
.pw-btn--soft-card:hover { border-color: #FF4D8D; box-shadow: 0 12px 28px rgba(255,77,141,.22); }
.pw-btn--soft-card .pw-btn__icon { width: calc(var(--pw-icon) * 1.25); height: calc(var(--pw-icon) * 1.25); }

/* --- glass-square: the safe glass shell, softened rectangle instead of a pill --- */
.pw-btn--glass-square {
  border-radius: 12px;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #2C2540;
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.pw-btn--glass-square:hover { background: #fff; border-color: #7C5CFF; }

/* --- solid-dark: near-black, high contrast on pale studio shots --- */
.pw-btn--solid-dark {
  background: #1C1726;
  color: #fff;
  border-color: #1C1726;
  box-shadow: 0 5px 16px rgba(0,0,0,.3);
}
.pw-btn--solid-dark:hover { background: #322A44; border-color: #322A44; }

/* --- solid-white: opaque white, for shops whose photos are dark or busy --- */
.pw-btn--solid-white {
  background: #fff;
  color: #1C1726;
  border-color: #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,.22);
}
.pw-btn--solid-white:hover { color: #FF4D8D; }

/* --- gradient: brand pink → violet --- */
.pw-btn--gradient {
  background: linear-gradient(100deg, #FF4D8D, #7C5CFF);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(124,92,255,.35);
}
.pw-btn--gradient:hover { filter: brightness(1.08); }

/* --- outline-light: hairline white on the photo itself. Needs a dark image, so
       it carries a soft shadow to stay readable on mid-tones. --- */
.pw-btn--outline-light {
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  border-color: rgba(255,255,255,.85);
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.pw-btn--outline-light:hover { background: rgba(255,255,255,.22); }

/* --- badge-corner: small uppercase chip, minimal footprint --- */
.pw-btn--badge-corner {
  padding: calc(var(--pw-py) - 3px) calc(var(--pw-px) - 3px);
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #1C1726;
  border-color: rgba(0,0,0,.08);
  font-size: calc(var(--pw-fs) - 2.5px);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
}
.pw-btn--badge-corner:hover { color: #FF4D8D; }
.pw-btn--badge-corner .pw-btn__icon { width: calc(var(--pw-icon) * .8); height: calc(var(--pw-icon) * .8); }

/* --- text-only: no chip at all, just a legible label on the photo --- */
.pw-btn--text-only {
  padding: calc(var(--pw-py) - 4px) calc(var(--pw-px) - 8px);
  background: none;
  border-color: transparent;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  box-shadow: none;
}
.pw-btn--text-only:hover { color: #FFD3E5; }

/* Phones: every design shrinks — never configured separately.
 *
 * Written twice on purpose. On a real shop the viewport media query is what's
 * correct. In the panel's phone preview the viewport is still a desktop one, so the
 * media query never fires and the preview would lie — hence the .pw-force-mobile
 * class, which the preview frame sets to opt into the same rules. Keep the two
 * blocks in sync; they are the only duplicated CSS in this file. */
/* Phones re-step the SIZE VARIABLES rather than overriding font-size/padding
   directly — overriding the properties would beat the size class and flatten
   sm/md/lg into one size on mobile. */
@media (max-width: 640px) {
  .pw-size--sm { --pw-fs: 11px;   --pw-py: 6px;  --pw-px: 10px; --pw-gap: 4px; --pw-icon: 13px; --pw-sq: 28px; }
  .pw-size--md { --pw-fs: 12.5px; --pw-py: 8px;  --pw-px: 13px; --pw-gap: 5px; --pw-icon: 15px; --pw-sq: 34px; }
  .pw-size--lg { --pw-fs: 14.5px; --pw-py: 10px; --pw-px: 17px; --pw-gap: 7px; --pw-icon: 18px; --pw-sq: 42px; }
  .pw-pos--top-left, .pw-pos--top-right { top: 9px; }
  .pw-pos--bottom-left, .pw-pos--bottom-right { bottom: 9px; }
  .pw-pos--top-left, .pw-pos--bottom-left { left: 9px; }
  .pw-pos--top-right, .pw-pos--bottom-right { right: 9px; }
}
.pw-force-mobile .pw-size--sm { --pw-fs: 11px;   --pw-py: 6px;  --pw-px: 10px; --pw-gap: 4px; --pw-icon: 13px; --pw-sq: 28px; }
.pw-force-mobile .pw-size--md { --pw-fs: 12.5px; --pw-py: 8px;  --pw-px: 13px; --pw-gap: 5px; --pw-icon: 15px; --pw-sq: 34px; }
.pw-force-mobile .pw-size--lg { --pw-fs: 14.5px; --pw-py: 10px; --pw-px: 17px; --pw-gap: 7px; --pw-icon: 18px; --pw-sq: 42px; }
.pw-force-mobile .pw-pos--top-left, .pw-force-mobile .pw-pos--top-right { top: 9px; }
.pw-force-mobile .pw-pos--bottom-left, .pw-force-mobile .pw-pos--bottom-right { bottom: 9px; }
.pw-force-mobile .pw-pos--top-left, .pw-force-mobile .pw-pos--bottom-left { left: 9px; }
.pw-force-mobile .pw-pos--top-right, .pw-force-mobile .pw-pos--bottom-right { right: 9px; }

/* neon-ring (a glass shell with a conic gradient spinning around its border) was
   removed here — it read as a toy on every real storefront it was tried on, and no
   shop had chosen it. sanitizeConfig() drops the id on read, so were one ever to
   surface from an old row it falls back to the default rather than rendering
   unstyled. */

/* --- frosted-bar: a wide bar along the picture edge rather than a floating pill.
       Reads as part of the photo's furniture, which suits editorial shots. --- */
.pw-btn--frosted-bar {
  border-radius: 10px; padding: calc(var(--pw-py) + 1px) calc(var(--pw-px) + 6px);
  color: #241E33; background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-color: rgba(255,255,255,.6); letter-spacing: .2px;
  box-shadow: 0 8px 22px rgba(24,16,40,.16);
}
.pw-btn--frosted-bar:hover { background: rgba(255,255,255,.92); color: #FF4D8D; }

/* --- mini-fab: round, icon only. The smallest footprint that is still obviously
       a button — for crowded grids where a label would cover the garment. --- */
.pw-btn--mini-fab {
  width: var(--pw-sq); height: var(--pw-sq); padding: 0; border-radius: 50%;
  color: #fff; background: linear-gradient(140deg, #FF4D8D, #7C5CFF); border-color: transparent;
  box-shadow: 0 8px 20px rgba(124,92,255,.4);
}
.pw-btn--mini-fab .pw-btn__label { display: none; }
.pw-btn--mini-fab .pw-btn__icon { width: calc(var(--pw-icon) * 1.15); height: calc(var(--pw-icon) * 1.15); }
.pw-btn--mini-fab:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(124,92,255,.5); }

/* --- shine: solid brand with a highlight travelling across it --- */
.pw-btn--shine {
  position: relative; overflow: hidden;
  color: #fff; background: #FF4D8D; border-color: #FF4D8D;
  box-shadow: 0 6px 16px rgba(255,77,141,.34);
}
.pw-btn--shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: pw-shine 2.8s ease-in-out infinite;
}
@keyframes pw-shine { 0% { left: -60%; } 60%, 100% { left: 120%; } }
.pw-btn--shine:hover { background: #E0376F; border-color: #E0376F; }

/* --- sticker: deliberately informal, for shops with a playful tone --- */
.pw-btn--sticker {
  color: #241E33; background: #FFE27A; border: 2px dashed #241E33; border-radius: 12px;
  transform: rotate(-3deg); box-shadow: 3px 4px 0 rgba(36,30,51,.9);
  font-weight: 700;
}
.pw-btn--sticker:hover { transform: rotate(0deg) scale(1.03); background: #FFD84D; }

/* --- underline: no chrome at all, just the words and a line that grows --- */
.pw-btn--underline {
  position: relative; padding-left: 2px; padding-right: 2px; border-radius: 0;
  color: #fff; background: none; border: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.65); font-weight: 700;
}
.pw-btn--underline::after {
  content: ""; position: absolute; left: 0; bottom: 1px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(.28); transform-origin: left;
  animation: pw-underline 2.6s ease-in-out infinite;
}
@keyframes pw-underline { 0%,100% { transform: scaleX(.28); } 50% { transform: scaleX(1); } }
.pw-btn--underline:hover { color: #FFD3E5; }
.pw-btn--underline:hover::after { animation: none; transform: scaleX(1); }

/* ============================ POPUP ============================= */

.pw-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,12,32,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: pw-fade .22s ease both;
}
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }

.pw-sheet {
  position: relative;
  width: 100%;
  max-width: 330px;
  /* Fixed panel, not content-sized — see .pw-sheet__body. */
  height: min(560px, 92%);
  max-height: 92%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
}

/* entrance animations */
.pw-sheet--slide-up   { animation: pw-slide-up .38s cubic-bezier(.34,1.56,.64,1) both; }
.pw-sheet--fade-scale { animation: pw-fade-scale .3s ease-out both; }
.pw-sheet--drawer-right { animation: pw-drawer .34s cubic-bezier(.32,.72,.35,1) both; }
@keyframes pw-slide-up   { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes pw-fade-scale { from { opacity: 0; transform: scale(.9); }        to { opacity: 1; transform: none; } }
@keyframes pw-drawer     { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
.pw-sheet--drawer-left { animation: pw-drawer-left .34s cubic-bezier(.32,.72,.35,1) both; }
.pw-sheet--zoom-blur   { animation: pw-zoom-blur .42s cubic-bezier(.2,.8,.3,1) both; }
.pw-sheet--flip-in     { animation: pw-flip .5s cubic-bezier(.3,1.2,.5,1) both; transform-origin: 50% 50%; }
.pw-sheet--pop-bounce  { animation: pw-pop .5s cubic-bezier(.28,1.6,.5,1) both; }
.pw-sheet--curtain     { animation: pw-curtain .42s cubic-bezier(.32,.75,.3,1) both; transform-origin: top center; }
@keyframes pw-drawer-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes pw-zoom-blur { from { opacity: 0; transform: scale(1.12); filter: blur(12px); }
                          to   { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pw-flip { from { opacity: 0; transform: perspective(900px) rotateY(38deg) translateX(30px); }
                     to   { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); } }
@keyframes pw-pop  { 0% { opacity: 0; transform: scale(.72); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pw-curtain { from { opacity: 0; transform: scaleY(.55) translateY(-14px); }
                        to   { opacity: 1; transform: none; } }

/* drawer sits against the right edge instead of centred */
.pw-overlay--drawer-right { justify-content: flex-end; }
.pw-overlay--drawer-right .pw-sheet { max-width: 300px; height: 100%; max-height: 100%; border-radius: 18px 0 0 18px; }

/* Phones: sheets rise from the bottom edge, full width.
 * Duplicated for the panel's phone preview — see the note on .pw-force-mobile above. */
@media (max-width: 640px) {
  .pw-overlay { align-items: flex-end; }
  .pw-overlay--drawer-right { justify-content: center; }
  .pw-sheet, .pw-overlay--drawer-right .pw-sheet {
    max-width: 100%; height: 88%; max-height: 94%; border-radius: 20px 20px 0 0;
  }
}
.pw-force-mobile .pw-overlay { align-items: flex-end; }
.pw-force-mobile .pw-overlay--drawer-right { justify-content: center; }
.pw-force-mobile .pw-sheet,
.pw-force-mobile .pw-overlay--drawer-right .pw-sheet {
  max-width: 100%; height: 88%; max-height: 94%; border-radius: 20px 20px 0 0;
}

.pw-sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid #ECE3F0; flex: none;
}
.pw-sheet__title { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 14px; color: #2C2540; }
.pw-sheet__close {
  width: 28px; height: 28px; flex: none; padding: 0; margin: 0; cursor: pointer;
  border: none; border-radius: 50%; background: #F3EEF8; color: #8E8AA0; font-size: 13px; line-height: 1;
}
.pw-sheet__close:hover { color: #2C2540; }
/* overflow:hidden, not auto — a fixed panel must never grow a scrollbar; the
   flexible child (drop zone / loading art / result) absorbs the difference. */
.pw-sheet__body { padding: 15px; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; }

/* ---- drop zone (the "input a picture" step) ---- */
.pw-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; flex: 1 1 auto; min-height: 0; padding: 22px; cursor: pointer;
  border: 2px dashed #E2D7EC; border-radius: 16px; background: #FBF7FF;
  font-family: 'Fredoka', system-ui, sans-serif; transition: background .18s, border-color .18s;
}
.pw-drop:hover { background: #F6EEFF; border-color: #7C5CFF; }
.pw-drop__icon { width: 40px; height: 40px; color: #B9A8E8; }
.pw-drop__title { font-weight: 600; font-size: 14.5px; color: #57506B; }
.pw-drop__sub { font-size: 12px; color: #A9A2BC; }

/* ============================ LOADING =========================== */

.pw-load { position: relative; width: 100%; flex: 1 1 auto; min-height: 0;
  border-radius: 14px; overflow: hidden; background: #F6F1FA; }
/* CONTAIN, not cover. A garment shot is portrait and the loading box is not, so
   cover cropped the dress down to a band of fabric — the merchant judging the design
   could not see what was being tried on, which is the one thing the screen is for.
   The box is filled instead by a blurred copy of the same picture underneath, so
   nothing is cut and there are no empty bars. */
.pw-load__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.pw-load__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Scaled past the edges so the blur's soft border never shows as a seam. */
  transform: scale(1.2); filter: blur(24px) brightness(.68) saturate(1.15);
}
/* The garment, rendered only by the presets that show both pictures. Every other
   preset ignores it, so the markup can always carry it. */
.pw-load__img--alt { display: none; }
.pw-load--swap .pw-load__img--alt { display: block; }
.pw-load__caption {
  flex: none; margin-top: 13px; text-align: center; font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600; font-size: 13px; color: #57506B; min-height: 18px;
}
.pw-load__bar { flex: none; margin-top: 9px; height: 4px; border-radius: 999px; background: #EDE4F5; overflow: hidden; }
.pw-load__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7C5CFF, #FF4D8D); transition: width .5s ease; }

/* ============================ RESULT ============================ */

.pw-result { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pw-result__img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain;
  border-radius: 14px; display: block; }
.pw-result__title { flex: none; margin: 12px 0 0; text-align: center;
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 13px; color: #57506B; }
.pw-result__sub { flex: none; margin: 4px 0 0; text-align: center; font-size: 11.5px; color: #A9A2BC; }

/* --- scan: light bar sweeping down over the shopper's photo --- */
.pw-load--scan .pw-load__img { filter: brightness(.88); }
.pw-load--scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34%;
  background: linear-gradient(to bottom, transparent, rgba(124,92,255,.16) 45%, rgba(167,139,250,.24) 50%, rgba(124,92,255,.16) 55%, transparent);
  animation: pw-scan 2.6s ease-in-out infinite;
}
@keyframes pw-scan { 0% { top: -35%; } 100% { top: 100%; } }

/* --- ring: pulsing progress circle over a dimmed photo --- */
.pw-load--ring .pw-load__img { filter: brightness(.8) saturate(.9); }
.pw-load--ring::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; border: 4px solid rgba(255,255,255,.35); border-top-color: #FF4D8D;
  animation: pw-spin 1s linear infinite;
}
@keyframes pw-spin { to { transform: rotate(360deg); } }

/* --- shimmer: blurred photo resolving, with a sheen passing over --- */
.pw-load--shimmer .pw-load__img { filter: blur(9px) brightness(.95); animation: pw-unblur 3.2s ease-in-out infinite; }
@keyframes pw-unblur { 0%,100% { filter: blur(9px) brightness(.95); } 55% { filter: blur(2px) brightness(1); } }
.pw-load--shimmer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.42) 50%, transparent 68%);
  background-size: 220% 100%;
  animation: pw-sheen 2.1s linear infinite;
}
@keyframes pw-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* --- swap: alternate between the shopper's photo and the garment ---------------
   The only two pictures the shopper cares about are the two the model is being
   given, so the wait shows exactly those, in turn. `--alt` is the garment; it sits
   on top and fades in and out over the person. When the popup only has one picture
   (no photo chosen yet in a preview) the single image simply stays put. */
.pw-load--swap .pw-load__img { animation: pw-swap-a 3.6s ease-in-out infinite; }
.pw-load--swap .pw-load__img--alt { animation: pw-swap-b 3.6s ease-in-out infinite; object-fit: contain;
  background: #fff; }
@keyframes pw-swap-a { 0%, 38% { opacity: 1; transform: scale(1); }
                       50%, 88% { opacity: 0; transform: scale(1.04); }
                       100% { opacity: 1; transform: scale(1); } }
@keyframes pw-swap-b { 0%, 38% { opacity: 0; transform: scale(1.04); }
                       50%, 88% { opacity: 1; transform: scale(1); }
                       100% { opacity: 0; transform: scale(1.04); } }
/* A soft sweep tying the two together, so the cut reads as one process rather than
   two slides. */
.pw-load--swap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.3) 50%, transparent 62%);
  background-size: 240% 100%; animation: pw-sheen 3.6s linear infinite;
}

/* --- orbit: dots circling the photo. No picture required, so it is the safe one
       when the shop's image fails to load. --- */
.pw-load--orbit .pw-load__img { filter: brightness(.72) saturate(.85); }
.pw-load--orbit::before, .pw-load--orbit::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 74px; height: 74px;
  margin: -37px 0 0 -37px; border-radius: 50%;
}
.pw-load--orbit::before { border: 2px solid rgba(255,255,255,.28); }
.pw-load--orbit::after {
  border: 2px solid transparent; border-top-color: #FF4D8D; border-right-color: #7C5CFF;
  animation: pw-spin 1.15s cubic-bezier(.6,.1,.4,.9) infinite;
}

/* --- bars: the picture is uncovered in vertical strips ------------------------ */
.pw-load--bars .pw-load__img { filter: brightness(.95); }
.pw-load--bars::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(28,20,44,.62) 0 12.5%, rgba(28,20,44,0) 12.5% 25%);
  background-size: 200% 100%;
  animation: pw-bars 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pw-bars { 0% { background-position: 0 0; opacity: .95; }
                     100% { background-position: -100% 0; opacity: .5; } }

/* Respect a shopper's reduced-motion setting — the previews still read fine static. */
@media (prefers-reduced-motion: reduce) {
  .pw-btn, .pw-sheet, .pw-overlay,
  .pw-btn--glow-pill, .pw-load--scan::after, .pw-load--ring::after,
  .pw-load--shimmer .pw-load__img, .pw-load--shimmer::after,
  .pw-btn--shine::after, .pw-btn--underline::after,
  .pw-load--swap .pw-load__img, .pw-load--swap .pw-load__img--alt, .pw-load--swap::after,
  .pw-load--orbit::after, .pw-load--bars::after {
    animation: none !important;
    transition: none !important;
  }
}