/* PDR STREET 3D fitting room. Keep the closet still while the model turns. */
.pdr-clothing .pdr-fitting-stage { position:relative; }
.pdr-clothing .pdr-mannequin { position:relative; isolation:isolate; }
.pdr-clothing #pdr3DHost {
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  opacity:0;
  background:#201d19 url("assets/closet-pdr-web.webp") center / cover no-repeat;
  touch-action:pan-y;
  cursor:grab;
  transition:opacity .22s ease;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.pdr-clothing #pdr3DHost:active,
.pdr-clothing #pdr3DHost[data-dragging="true"] { cursor:grabbing; }
.pdr-clothing #pdr3DHost canvas {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  outline:none;
  touch-action:pan-y;
}
.pdr-clothing #pdr3DHost:focus-visible {
  outline:2px solid #fff;
  outline-offset:-4px;
}
.pdr-clothing .pdr-fitting-stage:is(.pdr-3d-loaded,[data-pdr-3d-loaded="true"]) #pdr3DHost,
.pdr-clothing #pdr3DHost:is(.ready,[data-ready="true"]) { opacity:1; }
.pdr-clothing .pdr-fitting-stage:is(.pdr-3d-loaded,[data-pdr-3d-loaded="true"]) .pdr-mannequin > svg,
.pdr-clothing .pdr-fitting-stage:is(.pdr-3d-loaded,[data-pdr-3d-loaded="true"]) .pdr-2d-fallback { visibility:hidden; }
.pdr-clothing .pdr-fitting-stage:is(.pdr-3d-loaded,[data-pdr-3d-loaded="true"]) .pdr-mobile-stage-label { display:none; }

.pdr-clothing .pdr-turn-toolbar {
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:56px;
  padding:6px 12px;
  border-top:1px solid #653144;
  background:#100d13;
}
.pdr-clothing .pdr-angle-switch {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3px;
  min-width:0;
  padding:3px;
  border:1px solid #49303b;
  border-radius:5px;
  background:#08080c;
}
.pdr-clothing .pdr-turn-toolbar button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:64px;
  min-height:44px;
  margin:0;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:3px;
  background:transparent;
  color:#e4d8e1;
  font:800 14px/1 var(--display,'Arial Narrow',Impact,sans-serif);
  letter-spacing:.025em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pdr-clothing .pdr-turn-toolbar button:hover { background:#37212b; color:#fff; }
.pdr-clothing .pdr-turn-toolbar button[aria-pressed="true"] {
  border-color:#f50b39;
  color:#fff;
  background:#f50b39;
}
.pdr-clothing .pdr-turn-toolbar button:focus-visible,
.pdr-clothing #pdrTurnLeft:focus-visible,
.pdr-clothing #pdrTurnRight:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
}
.pdr-clothing .pdr-turn-toolbar button:disabled { opacity:.4; cursor:not-allowed; }
.pdr-clothing #pdrSlowMotion {
  min-width:100px;
  border-color:#634050;
  background:#21151e;
}
.pdr-clothing #pdrSlowMotion[aria-pressed="true"] {
  border-color:#f50b39;
  background:#4c1225;
  box-shadow:inset 0 0 0 1px #f50b3926;
}
.pdr-clothing #pdrSlowMotion .pdr-ui-icon { width:16px; height:16px; }
.pdr-clothing #pdr3DStatus {
  position:absolute;
  z-index:4;
  top:68px;
  left:12px;
  right:12px;
  width:max-content;
  max-width:calc(100% - 24px);
  margin:0;
  padding:6px 8px;
  border:1px solid #ffffff25;
  border-radius:3px;
  background:#0b090dd9;
  color:#f2e9ef;
  font:500 10px/1.4 var(--body,Arial,sans-serif);
  letter-spacing:.01em;
  pointer-events:none;
}
.pdr-clothing #pdr3DStatus:empty { display:none; }
.pdr-clothing .pdr-3d-label {
  position:absolute;
  z-index:4;
  top:105px;
  left:12px;
  padding:4px 7px;
  border-radius:2px;
  background:#0c090dcc;
  color:#dfc8d4;
  font:500 9px/1.4 var(--body,Arial,sans-serif);
  pointer-events:none;
}
.pdr-clothing .pdr-fitting-stage .pdr-character-nav button svg { pointer-events:none; }

@media (max-width:760px) {
  .pdr-clothing #pdr3DHost {
    inset:0 auto 0 50%;
    width:auto;
    height:100%;
    max-width:100%;
    aspect-ratio:3 / 4;
    transform:translateX(-50%);
  }
  .pdr-clothing .pdr-turn-toolbar {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    min-height:52px;
    padding:4px 8px;
    gap:6px;
    border-top-color:#6a2b40;
    background:#0e0b10f2;
  }
  .pdr-clothing .pdr-angle-switch { padding:0; border:0; gap:3px; background:none; }
  .pdr-clothing .pdr-turn-toolbar button {
    min-width:57px;
    min-height:44px;
    padding:8px 9px;
    border-color:#4e2f3c;
    background:#191019;
    font-size:12px;
    letter-spacing:0;
  }
  .pdr-clothing #pdrSlowMotion { min-width:90px; }
  .pdr-clothing #pdr3DStatus { top:8px; left:8px; right:8px; max-width:calc(100% - 16px); padding:4px 6px; font-size:9px; }
  .pdr-clothing .pdr-3d-label { top:35px; left:8px; padding:3px 5px; font-size:8px; }
  .pdr-clothing .pdr-character-nav { top:calc(50% - 22px); }
  .pdr-clothing #pdrTurnLeft,
  .pdr-clothing #pdrTurnRight {
    border-color:#cc2348;
    background:#100c13de;
    box-shadow:0 2px 9px #0005;
  }
}

@media (prefers-reduced-motion:reduce) {
  .pdr-clothing #pdr3DHost,
  .pdr-clothing .pdr-turn-toolbar button { transition:none; }
}

/* Preserve the frontal fallback while the WebGL view loads. */
.pdr-clothing .pdr-2d-fallback {display:grid;place-items:center;width:100%;height:100%;min-height:0;}
.pdr-clothing .pdr-2d-fallback > svg {display:block;width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;}

.pdr-clothing #pdr2DFallback {position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;}
.pdr-clothing #pdr2DFallback>svg {display:block;width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:3/4;filter:none;}