/* Scoped for both the Shopify parent page and the standalone Artroom generator. */
.fa-crop-dialog,
.fa-crop-dialog * { box-sizing: border-box; }
.fa-crop-dialog {
  position: fixed; inset: 0; width: min(920px, calc(100vw - 32px)); height: min(780px, 90dvh);
  max-width: none; max-height: 90dvh; margin: auto; padding: 0; overflow: hidden;
  border: 1px solid #12007822; border-radius: 24px; background: #fffdf8; color: #15121f;
  box-shadow: 0 28px 90px #12007840; font: 400 15px/1.5 Inter, Arial, sans-serif;
  text-align: left; letter-spacing: normal; overscroll-behavior: contain;
}
.fa-crop-dialog:not([open]) { display: none; }
.fa-crop-dialog[open] { display: flex; flex-direction: column; }
.fa-crop-dialog::backdrop { background: #090727b8; backdrop-filter: blur(4px); }
.fa-crop-dialog button { appearance: none; -webkit-appearance: none; font: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; touch-action: manipulation; margin: 0; box-shadow: none; }
.fa-crop-dialog button::before, .fa-crop-dialog button::after { display: none; }
.fa-crop-dialog :focus-visible { outline: 3px solid #120078; outline-offset: 5px; }
.fa-crop-header { display: flex; align-items: flex-start; gap: 20px; padding: 25px 28px 16px; flex: 0 0 auto; }
.fa-crop-heading { min-width: 0; flex: 1; }
.fa-crop-title { font: 700 clamp(23px, 3vw, 31px)/1.15 'Bricolage Grotesque', Inter, Arial, sans-serif; letter-spacing: -.035em; margin: 0 0 8px; color: #120078; text-transform: none; }
.fa-crop-hint { margin: 0; font-size: 14px; line-height: 1.5; color: #625d73; }
.fa-crop-close { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0; border: 1px solid #12007822; border-radius: 50%; background: #fff; color: #120078; font-size: 28px!important; line-height: 1!important; }
.fa-crop-close:hover { background: #ffd332; }
.fa-crop-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; padding: 0 28px 12px; overflow: auto; }
.fa-crop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; }
.fa-crop-formats { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: #efedf5; min-width: 0; }
.fa-crop-format { min-height: 38px; padding: 7px 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #625d73; font-size: 13px!important; font-weight: 600!important; white-space: nowrap; }
.fa-crop-format[aria-pressed="true"] { color: #120078; background: #fff; border-color: #12007820; box-shadow: 0 2px 5px #1200780c; }
.fa-crop-format:hover:not([aria-pressed="true"]) { color: #120078; background: #ffd332; }
.fa-crop-reset { flex: 0 1 auto; min-height: 44px; padding: 8px 0 8px 8px; border: 0; background: transparent; color: #120078; font-size: 13px!important; font-weight: 600!important; text-decoration: underline; text-underline-offset: 4px; }
.fa-crop-reset:hover { color: #120078; text-decoration-thickness: 2px; }
.fa-crop-surface { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 150px; width: 100%; padding: 25px; border: 1px solid #1200780c; border-radius: 17px; overflow: hidden; background: #eeecf2; }
.fa-crop-stage { position: relative; flex: 0 0 auto; margin: 0; padding: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.fa-crop-canvas { position: absolute; inset: 0; display: block; width: 100%!important; height: 100%!important; max-width: none!important; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; }
.fa-crop-shade { position: absolute; pointer-events: none; background: #0b072c99; }
.fa-crop-selection { position: absolute; z-index: 1; border: 1.5px solid #fff; outline: 1px solid #12007830; cursor: grab; touch-action: none; background: transparent; }
.fa-crop-selection:focus-visible { outline: 3px solid #ffd332; outline-offset: 2px; }
.fa-crop-stage.is-dragging .fa-crop-selection { cursor: grabbing; }
.fa-crop-guide { position: absolute; display: block; background: #ffffff88; pointer-events: none; }
.fa-crop-guide-0, .fa-crop-guide-1 { top: 0; bottom: 0; width: 1px; }
.fa-crop-guide-0 { left: 33.333%; }.fa-crop-guide-1 { left: 66.666%; }
.fa-crop-guide-2, .fa-crop-guide-3 { left: 0; right: 0; height: 1px; }
.fa-crop-guide-2 { top: 33.333%; }.fa-crop-guide-3 { top: 66.666%; }
.fa-crop-handle { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; min-width: 48px; min-height: 48px; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 12px; background: transparent; touch-action: none!important; }
.fa-crop-handle-nw, .fa-crop-handle-se { cursor: nwse-resize!important; }
.fa-crop-handle-ne, .fa-crop-handle-sw { cursor: nesw-resize!important; }
.fa-crop-corner { position: relative; display: block; width: 18px; height: 18px; border: 4px solid #fff; border-radius: 5px; box-shadow: 0 1px 6px #12007870; background: #120078; transition: transform .15s, background .15s; }
.fa-crop-handle:hover .fa-crop-corner, .fa-crop-handle:focus-visible .fa-crop-corner { transform: scale(1.16); background: #ffd332; }
.fa-crop-size { flex: 0 0 auto; display: block; text-align: center; min-height: 20px; color: #625d73; font-size: 12px; font-variant-numeric: tabular-nums; }
.fa-crop-footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex: 0 0 auto; padding: 17px 28px 21px; border-top: 1px solid #12007814; background: #fffdf8; }
.fa-crop-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 10px 8px 24px; border: 1px solid #12007824; border-radius: 999px; font-size: 15px!important; font-weight: 650!important; line-height: 1.25!important; text-decoration: none; transition: background-color .18s, color .18s, border-color .18s; }
.fa-crop-cancel { padding-inline: 24px; background: #fff; color: #120078; }.fa-crop-cancel:hover { background: #ffd332; border-color: #120078; }
.fa-crop-apply { background: #120078; color: #fff; border-color: #120078; }.fa-crop-apply:hover { background: #ffd332; color: #120078; }
@media (max-width: 600px) {
  .fa-crop-dialog { width: calc(100vw - 20px); height: 90dvh; border-radius: 20px; }
  .fa-crop-header { padding: 20px 17px 14px; gap: 12px; }
  .fa-crop-hint { font-size: 13px; }
  .fa-crop-body { padding: 0 15px 10px; gap: 10px; }
  .fa-crop-toolbar { flex-wrap: wrap; gap: 2px 8px; }
  .fa-crop-formats { gap: 0; padding: 3px; }.fa-crop-format { padding: 7px 10px; }
  .fa-crop-reset { margin-left: auto!important; font-size: 12px!important; }
  .fa-crop-surface { padding: 24px; border-radius: 13px; }
  .fa-crop-footer { padding: 14px 17px 17px; gap: 9px; }
  .fa-crop-button { flex: 1; padding: 12px; font-size: 14px!important; }
}
@media (prefers-reduced-motion: reduce) { .fa-crop-dialog *, .fa-crop-dialog *::before, .fa-crop-dialog *::after { transition: none!important; } }

/* Keep compact secondary tools; match the homepage for the main crop action. */
.fa-crop-dialog .fa-crop-button{border-radius:999px;min-width:0;max-width:100%}
.fa-crop-dialog .fa-crop-apply{justify-content:space-between;gap:18px;padding:8px 10px 8px 24px;text-align:left}
.fa-crop-dialog .fa-crop-apply::after{content:"";display:block;position:static;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#ffd332 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23120078' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/20px 20px no-repeat;pointer-events:none}
@media(max-width:749px){.fa-crop-dialog .fa-crop-button{min-height:44px;font-size:13px!important}.fa-crop-dialog .fa-crop-apply{gap:12px;padding:6px 8px 6px 16px}.fa-crop-dialog .fa-crop-apply::after{flex-basis:30px;width:30px;height:30px;background-size:20px 20px}}