.pc-host{width:100%;display:grid;place-items:center}
.pc-canvas{position:relative;width:min(100%,var(--pc-max-width,760px));aspect-ratio:var(--pc-aspect,1);isolation:isolate;
  filter:drop-shadow(0 12px 20px rgba(35,31,25,.2));transition:width .2s ease,aspect-ratio .2s ease}
.pc-frame-fallback{position:absolute;inset:4%;z-index:0;border-radius:8px;background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pc-frame{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;object-fit:contain;display:block}
.pc-frame-rotated{inset:auto;left:50%;top:50%;width:calc(100% * var(--pc-inverse-aspect));height:calc(100% * var(--pc-aspect));
  transform:translate(-50%,-50%) rotate(90deg)}
.pc-slots{position:absolute;inset:0;z-index:2}
.pc-slot{position:absolute;display:grid;place-items:center;border:0;padding:0;background:none;cursor:pointer;overflow:visible;
  border-radius:4px;transition:filter .18s ease,transform .18s ease}
.pc-slot img{width:100%;height:100%;max-width:none;display:block;object-fit:contain}
.pc-slot:hover{z-index:3;filter:brightness(1.06)}
.pc-slot:focus-visible{z-index:3;outline:2px solid #1b1b1a;outline-offset:3px}
.pc-slot:active{transform:scale(.985)}
.pc-slot.empty{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pc-plus{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:#73706a;
  box-shadow:0 2px 7px rgba(0,0,0,.12);font:300 22px/1 system-ui,sans-serif}
.pc-frame-missing .pc-frame-fallback{background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pc-unavailable{padding:40px 20px;color:#6c6a64;text-align:center}

/* Jasmart: module PNG содержит прозрачный квадрат 900x900. Размер слота равен
   высоте frame-рендера, поэтому лицевая накладка попадает точно в отверстие. */
.pc-jasmart-fd .pc-frame-fallback{display:none}
.pc-jasmart-fd .pc-slot.empty{background:none;box-shadow:none}

/* У Kranz/Rikett frame-фото непрозрачные, а модульные фото уже аккуратно
   обрезаны до лицевой панели. Фон ячейки скрывает белое отверстие в frame-фото. */
.pc-kranz-round .pc-slot img,.pc-rikett .pc-slot img{border-radius:3px}

@media(max-width:560px){
  .pc-canvas{width:100%}
  .pc-plus{width:24px;height:24px;font-size:18px}
}