/* Same square canvas, mask and transform in the editor and public page. */
.sm-frame {
  display: block; position: relative; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: 0; background: transparent;
  box-sizing: border-box; isolation: isolate;
}
.sm-frame > img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  object-fit: contain; object-position: center;
  transform-origin: 50% 50%;
  transform: translate(var(--sm-x, 0%), var(--sm-y, 0%)) scale(var(--sm-zoom, 1));
}
.smc-img__box.sm-frame { width: 100%; max-width: 220px; margin: 8px auto; border: 0; box-shadow: 0 0 0 1px #ddd; }
.smc-frame-controls label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin-block: 8px; }
.smc-frame-controls input[type="range"] { width: 100%; margin: 0; }
.smc-frame-controls output { font-variant-numeric: tabular-nums; }
.smc-frame-note { color: #646970; font-size: 12px; }
@media (max-width: 1100px) { .smc .smc-cat__body { grid-template-columns: 1fr; } }
.sm-crop-dialog { width: min(880px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: auto; padding: 24px; border: 0; border-radius: 8px; color: #1d2327; background: #fff; font: 14px/1.5 system-ui, sans-serif; }
.sm-crop-dialog::backdrop { background: rgba(0,0,0,.65); }
.sm-crop-dialog h2 { margin: 0 0 8px; font-size: 22px; }
.sm-crop-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr); gap: 24px; align-items: start; }
.sm-crop-stage { width: 100%; outline: 2px solid #2271b1; cursor: grab; touch-action: none; background: #eee; }
.sm-crop-stage:active { cursor: grabbing; }
.sm-crop-stage:focus-visible { outline: 4px solid #2271b1; }
.sm-crop-preview { width: 100%; max-width: 180px; margin: 8px 0 16px; background: #eee; }
.sm-crop-dialog input[type="range"] { display: block; width: 100%; margin: 12px 0; }
.sm-crop-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sm-crop-dialog button { padding: 8px 14px; cursor: pointer; }
.sm-crop-dialog button[data-crop="apply"] { background: #2271b1; color: white; border: 1px solid #2271b1; }
.sm-crop-dialog button:disabled { opacity: .5; cursor: default; }
.sm-frame.sm-product-frame { aspect-ratio: 4 / 3 !important; border-radius: 0 !important; }
@media (max-width: 600px) {
  .sm-crop-dialog { padding: 16px; }
  .sm-crop-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sm-crop-preview { width: 112px; }
}

/* Only homepage category menu icons and their editor use a circular mask. */
.pcat__tab-ico.pcat__tab-ico,
.pcat__tab-ico > .sm-frame,
.smc-img__box--icon.sm-frame,
.sm-frame.sm-category-icon {
  aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}
.pcat__tab-ico .sm-frame > img,
.pcat__tab-ico > img,
.smc-img__box--icon.sm-frame > img,
.sm-frame.sm-category-icon > img { object-fit: contain; }

/* Show the whole source in the editor; only the preview/public icon is masked. */
.sm-crop-stage.sm-category-image,
.sm-crop-stage.sm-category-icon { border-radius: 0; clip-path: none; overflow: hidden; }
.sm-crop-stage.sm-category-image::after,
.sm-crop-stage.sm-category-icon::after {
  content: ''; position: absolute; inset: 0; border: 2px solid #2271b1;
  border-radius: 50%; box-sizing: border-box; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.22);
}

/* Category introduction photos share the editor's square canvas and circular output. */
.pcat__panel-img .ph.sm-frame,
.smc-img__box--image.sm-frame,
.sm-crop-preview.sm-category-image {
  aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  clip-path: circle(50% at 50% 50%); background: #FCFDFC;
}
.pcat__panel-img .ph.sm-frame > img { object-fit: contain; }
.pcat__panel-img::before { content: none; }