* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #F9EFE7;
  color: #111111;
  -webkit-tap-highlight-color: transparent;
}
button, a, input, select, label, summary, [role="button"], [role="radio"], [role="dialog"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
.offstage {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.offstage-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}
.viewport-frame {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  background: #F9EFE7;
  overflow-x: clip;
}
.long-page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  background: #F9EFE7;
  touch-action: pan-y;
  overflow-x: clip;
}
.stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--native-w) / var(--native-h);
  height: auto;
  overflow: hidden;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: #F9EFE7;
}
.clean-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.result-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
#stage-02b.stage-02b-direct {
  aspect-ratio: auto;
  height: auto;
  overflow-x: clip;
  overflow-y: hidden;
  line-height: normal;
}
#stage-02b.stage-02b-direct .result-bg {
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}
#stage-02b .result-direct {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  pointer-events: none;
}
#stage-02b .result-heading-gap {
  width: 100%;
  height: 0;
  padding-top: calc(var(--heading-end) * 100%);
  flex: 0 0 auto;
  pointer-events: none;
}
#stage-02b .result-art-wrap {
  position: relative;
  width: calc(var(--art-width, 0.90) * 100%);
  max-width: 92%;
  margin: 0 auto 8px;
  pointer-events: none;
  z-index: 2;
  border: 1.5px solid #111111;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  transform: translateZ(0);
}
#stage-02b .result-art {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}
#stage-02b .result-actions {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: calc(var(--art-width, 0.90) * 100%);
  max-width: 92%;
  margin: 4px auto 16px;
  z-index: 50;
  pointer-events: auto;
  isolation: isolate;
}
#stage-02b .result-actions .hit {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  flex: 1 1 0;
  z-index: 50;
  pointer-events: auto;
}
#stage-02b .seam-correction,
#stage-02b .result-bg,
#stage-02b .ink-loader {
  pointer-events: none;
}
#stage-02b .generation-error {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 72%;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #9f1239;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  z-index: 4;
  pointer-events: none;
}
#stage-02b.is-generating .progress-chip { display: none; }
#stage-02b.is-generating .result-art {
  opacity: 0;
}
#stage-02b.is-generating .ink-loader {
  background: #f6ebe3;
}
#stage-03b .ink-loader {
  display: none !important;
}
#stage-02b .hit {
  z-index: 40;
}

/* Stage 1 — Felix-approved cta-crop + transparent hotspot */
#stage-01 .cta-crop {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  z-index: 30;
}
#stage-01 .hit {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  z-index: 31;
}
#stage-01 .hit:hover,
#stage-01 .hit:active {
  background: transparent;
  filter: none;
}
#stage-01:has(#cta-create-mine:active) .cta-crop {
  transform: translateY(1px) scale(0.98);
  transform-origin: center center;
}
#stage-01 .hit:focus { outline: none; }
#stage-01 .hit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #e85d1c;
}

/* Stage 2A / 2B — painted DOM pills on local crop */
#stage-02a .hit,
#stage-02b .hit {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 2px 0 rgba(40, 24, 16, 0.18);
  pointer-events: auto;
  overflow: hidden;
  isolation: isolate;
  z-index: 31;
}
#stage-02a .hit.is-selected,
#stage-02b .hit.is-selected { outline: none; }
#stage-02b .hit.is-accepted { box-shadow: 0 1px 0 rgba(80, 8, 24, 0.28); }
#stage-02a .hit:focus,
#stage-02b .hit:focus { outline: none; }
#stage-02a .hit:focus-visible,
#stage-02b .hit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #e85d1c;
}
#cta-classic,
#cta-wild,
#cta-insane {
  background: #111111;
  color: #ffffff;
}
#cta-classic.is-selected,
#cta-wild.is-selected,
#cta-insane.is-selected {
  background: #e85d1c;
  color: #ffffff;
}
#stage-02a #cta-upload-photo {
  background: #e85d1c;
  color: #ffffff;
  min-width: 44px;
  min-height: 44px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
#stage-02b #cta-love-it,
#stage-02b #cta-try-again {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  z-index: 60;
  isolation: isolate;
  pointer-events: auto;
  touch-action: manipulation;
}
#stage-02b #cta-love-it { background: #ffffff; color: #111111; }
#stage-02b #cta-love-it.is-accepted {
  background: #fff0f3;
  color: #e11d48;
  box-shadow: 0 1px 0 rgba(80, 8, 24, 0.28);
}
#stage-02b #cta-love-it.is-accepted .ico { fill: #e11d48; }
#stage-02b #cta-try-again { background: #e85d1c; color: #ffffff; }
#stage-02b #cta-try-again.is-retry-requested,
#stage-02b #cta-try-again.is-loading {
  background: #c94c12;
  color: #ffffff;
}
#stage-02a .hit .ico,
#stage-02b .hit .ico {
  width: 0.95em;
  height: 0.95em;
  margin-inline-start: 0.35em;
  vertical-align: -0.12em;
  display: inline-block;
  flex: 0 0 auto;
}
#stage-02b #cta-love-it .ico { fill: #e11d48; }
#stage-02b #cta-try-again .ico { fill: #ffffff; }

/* Stage 3A / 3B — painted DOM on local crops */
#stage-03b .cluster-label {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  display: flex;
  align-items: center;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111111;
  pointer-events: none;
  z-index: 30;
}
#stage-03a .live-field {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  min-height: 44px;
  margin: 0;
  padding: 0 52px 0 16px;
  border: 1px solid #d4cdc6;
  border-radius: 18px;
  background: #ffffff;
  color: #1a1a1a;
  caret-color: #111111;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  z-index: 32;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(40, 24, 16, 0.10);
}
#stage-03a .live-field:focus { outline: none; }
#stage-03a .live-field:focus-visible { outline: none; box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #5939a3; }
#stage-02a .upload-error {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.01em;
  color: #9f1239;
  text-align: center;
  line-height: 1.15;
  pointer-events: none;
  z-index: 32;
}
#stage-02a .upload-error[hidden] { display: none; }
#stage-03a .char-count {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 14px;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: #8a8178;
  pointer-events: none;
  z-index: 33;
}
#stage-03a .hit,
#stage-03b .hit {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 2px 0 rgba(40, 24, 16, 0.18);
  pointer-events: auto;
  overflow: hidden;
  isolation: isolate;
  z-index: 31;
}
#stage-03a .hit:focus,
#stage-03b .hit:focus { outline: none; }
#stage-03a .hit:focus-visible { outline: none; box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #5939a3; }
#stage-03b .hit:focus-visible { outline: none; box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #111111; }
#stage-03a .hit-cta,
#cta-create-my-art {
  background: #5939a3;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(40, 24, 16, 0.18);
  z-index: 40;
  min-height: 44px;
  pointer-events: auto;
}
#cta-create-my-art:disabled {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}
#cta-create-my-art.is-loading {
  background: #4a2f8a;
  color: #ffffff;
}
#stage-03b .hit-toggle {
  text-transform: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  min-height: 44px;
  box-shadow: 0 1px 3px rgba(40, 24, 16, 0.12), inset 0 0 0 1px #d9d0c8;
}
#stage-03b .hit-toggle.is-selected {
  background: #111111;
  color: #ffffff;
  box-shadow: 0 2px 0 rgba(40, 24, 16, 0.18);
}
#stage-03a .cta-arrow {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  pointer-events: none;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage-03b .hit-case {
  justify-content: center;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 999px;
  min-height: 36px;
}
#stage-03b .native-select {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  min-height: 44px;
  margin: 0;
  padding: 0 22px 0 10px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #111111;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  z-index: 32;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 1px 3px rgba(40, 24, 16, 0.12), inset 0 0 0 1px #d9d0c8;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23111111' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
#stage-03b .native-select:focus { outline: none; }
#stage-03b .native-select:focus-visible { outline: none; box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #111111; }

/* Stage 4 — unified two-column order card on the painted canvas */
#stage-04 .order-summary-card {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 47% 53%;
  column-gap: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 24;
  box-sizing: border-box;
  overflow: visible;
  line-height: 1.15;
  pointer-events: none;
}
#stage-04 .order-col-left,
#stage-04 .order-col-right {
  min-width: 0;
  position: relative;
}
#stage-04 .order-col-left {
  display: flex;
  flex-direction: column;
  padding: 5.5% 2% 0 8.7%;
  box-sizing: border-box;
}
#stage-04 .order-col-right {
  pointer-events: auto;
}
#stage-04 .summary-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 6px;
  align-items: start;
}
#stage-04 .summary-identity {
  min-width: 0;
}
#stage-04 .summary-model,
#stage-04 .summary-case,
#stage-04 .summary-price,
#stage-04 .live-credit {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #111111;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: break-word;
}
#stage-04 .summary-model {
  font-weight: 700;
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.15;
}
#stage-04 .summary-case {
  font-weight: 500;
  font-size: clamp(9px, 2.5vw, 11px);
  color: #3a2a22;
  line-height: 1.15;
  margin-top: 1px;
}
#stage-04 .summary-price {
  font-weight: 700;
  font-size: clamp(11px, 3.1vw, 13px);
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  padding-top: 1px;
}
#stage-04 .live-credit {
  font-size: clamp(8px, 2.1vw, 9px);
  font-weight: 600;
  color: #3a2a22;
  margin-top: 2px;
}
#stage-04 .live-credit[hidden] { display: none; }
#stage-04 .summary-divider {
  border: 0;
  height: 1px;
  width: 92%;
  margin: 10% 0 7%;
  background: rgba(90, 70, 60, 0.28);
}
#stage-04 .approval {
  position: absolute;
  left: 12.4%;
  top: 26.8%;
  width: 85.7%;
  height: auto;
  min-height: 44px;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  z-index: 40;
  cursor: pointer;
  pointer-events: auto;
  overflow: visible;
}
#stage-04 .approval-box {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#stage-04 .approval input {
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid #111111;
  border-radius: 2px;
  background: #ffffff;
  pointer-events: auto;
}
#stage-04 .approval input:checked {
  background: #111111;
  border-color: #111111;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ffffff' stroke-width='2.2' d='M3 8.2l3.2 3.2L13 4.6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
#approval-label {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(8px, 2.3vw, 10px);
  line-height: 1.2;
  color: #111111;
  pointer-events: auto;
}
#stage-04 .hit-cta {
  position: absolute;
  left: 12.4%;
  top: 57.9%;
  width: 85.7%;
  max-width: 85.7%;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  overflow: visible;
  isolation: isolate;
  z-index: 42;
  box-shadow: none;
  line-height: 0;
}
#stage-04 .cta-face {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  object-fit: fill;
}
#stage-04 .cta-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
#stage-04 .hit-cta:disabled {
  pointer-events: none;
  opacity: 0.55;
  cursor: default;
}
#stage-04 .hit-cta:focus { outline: none; }
#stage-04 .hit-cta:focus-visible { outline: none; box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #d85e07; }
#stage-04 .approval input:focus { outline: none; }
#stage-04 .approval input:focus-visible { outline: none; box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #111111; }

@media (max-width: 379px) {
  /* Painted CTA/approval seats are shorter than 44px; forcing 44px covers the SSL line. Keep the two-column % composition and use the painted height. */
  #stage-04 .hit-cta,
  #stage-04 .approval {
    min-height: 0;
  }
}

.intensity-group { display: contents; }

.photo-card {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  transform: rotate(var(--rot, 0deg));
  transform-origin: center center;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: transparent;
  z-index: 28;
  pointer-events: none;
  border-radius: 0;
}
.photo-well {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: 0;
  background: #1a1a1a;
  clip-path: inset(0);
}
.photo-card img,
.photo-well img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
  background: #1a1a1a;
  transform: scale(1.10);
  transform-origin: 50% 32%;
}
.result-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}
.mock-flag,
.modal-mock-flag {
  display: none !important;
}
.hit:disabled,
.hit-cta:disabled {
  cursor: default;
  opacity: 0.55;
}

#stage-02a .hit,
#stage-02b .hit,
#stage-03a .hit,
#stage-03b .hit,
#stage-04 .hit-cta,
#stage-03b .native-select,
#stage-03a .live-field,
#stage-01 .cta-crop,
.modal-primary,
.modal-secondary,
.modal-close {
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease, filter 140ms ease;
}
#stage-02a .hit:hover:not(:disabled),
#stage-02b .hit:hover:not(:disabled),
#stage-03a .hit:hover:not(:disabled),
#stage-03b .hit:hover:not(:disabled),
#stage-04 .hit-cta:hover:not(:disabled),
.modal-primary:hover:not(:disabled),
.modal-secondary:hover:not(:disabled) {
  filter: brightness(1.06);
}
@media (hover: hover) and (pointer: fine) {
  #stage-02a .hit:hover:not(:disabled),
  #stage-02b .hit:hover:not(:disabled),
  #stage-03a .hit:hover:not(:disabled),
  #stage-03b .hit:hover:not(:disabled),
  #stage-04 .hit-cta:hover:not(:disabled) {
    filter: brightness(1.06);
  }
}
#stage-02a .hit:active:not(:disabled),
#stage-02b .hit:active:not(:disabled),
#stage-03a .hit:active:not(:disabled),
#stage-03b .hit:active:not(:disabled),
.modal-primary:active:not(:disabled),
.modal-secondary:active:not(:disabled),
.modal-close:active,
#stage-02a .hit.qa-pressed:not(:disabled),
#stage-02b .hit.qa-pressed:not(:disabled),
#stage-03a .hit.qa-pressed:not(:disabled),
#stage-03b .hit.qa-pressed:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 0 0 rgba(40, 24, 16, 0);
}
#stage-04 .hit-cta:active:not(:disabled),
#stage-04 .hit-cta.qa-pressed:not(:disabled) {
  transform: none;
}
#stage-02a #cta-upload-photo:active:not(:disabled),
#stage-02a #cta-upload-photo.qa-pressed {
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 0 0 rgba(40, 24, 16, 0);
}
#stage-03b .native-select:active {
  transform: translateY(1px) scale(0.98);
}
#stage-02a .hit:focus:not(:focus-visible),
#stage-02b .hit:focus:not(:focus-visible),
#stage-03a .hit:focus:not(:focus-visible),
#stage-03b .hit:focus:not(:focus-visible),
#stage-03a .live-field:focus:not(:focus-visible),
#stage-03b .native-select:focus:not(:focus-visible),
#stage-04 .hit-cta:focus:not(:focus-visible),
#stage-04 .approval input:focus:not(:focus-visible),
#stage-01 .hit:focus:not(:focus-visible),
.modal-primary:focus:not(:focus-visible),
.modal-secondary:focus:not(:focus-visible),
.modal-close:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
#stage-03a .hit:focus-visible,
#stage-03a .live-field:focus-visible,
#stage-03a .hit-cta:focus-visible,
#cta-create-my-art:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #5939a3;
}
#stage-03b .hit:focus-visible,
#stage-03b .native-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #111111;
}
#stage-01 .hit:focus-visible,
.modal-primary:focus-visible,
.modal-secondary:focus-visible,
.modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #e85d1c;
}
.final-preview-art {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  object-fit: contain;
  object-position: center;
  background: transparent;
  pointer-events: none;
  z-index: 22;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(40, 24, 16, 0.12);
}
.compat-error {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  margin: 0;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 8px;
  line-height: 1.2;
  color: #9f1239;
  z-index: 34;
  pointer-events: none;
}
#stage-02b .progress-chip {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin: 0 auto 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.86);
  color: #ffffff;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  z-index: 4;
  pointer-events: none;
}
#toggle-magsafe-case.is-unavailable,
#toggle-tough-case.is-unavailable,
#toggle-slim-case.is-unavailable {
  display: none;
}

#stage-case-guide {
  overflow: visible;
}
#stage-case-guide picture.case-guide-picture {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
  z-index: 0;
  pointer-events: none;
}
#stage-case-guide .case-guide-cta {
  position: absolute;
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  height: calc(var(--nh) * 100%);
  margin: -12px -6px;
  padding: 12px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  z-index: 8;
  pointer-events: auto;
  touch-action: manipulation;
  box-sizing: content-box;
  transition: transform 140ms ease, filter 140ms ease;
}
#stage-case-guide .case-guide-cta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  background: transparent;
}
#stage-case-guide .case-guide-cta .cta-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
#stage-case-guide .case-guide-cta:disabled {
  cursor: default;
  opacity: 0.72;
}
@media (hover: hover) and (pointer: fine) {
  #stage-case-guide .case-guide-cta:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 10px rgba(89, 57, 163, 0.32));
  }
}
#stage-case-guide .case-guide-cta:active:not(:disabled),
#stage-case-guide .case-guide-cta.qa-pressed:not(:disabled) {
  transform: scale(0.97);
}
#stage-case-guide .case-guide-cta:focus { outline: none; }
#stage-case-guide .case-guide-cta:focus-visible {
  outline: 3px solid #5939a3;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #stage-02a .hit,
  #stage-02b .hit,
  #stage-03a .hit,
  #stage-03b .hit,
  #stage-04 .hit-cta,
  #stage-03b .native-select,
  #stage-03a .live-field,
  #stage-01 .cta-crop,
  #stage-case-guide .case-guide-cta,
  #stage-02a #cta-upload-photo:active:not(:disabled),
  #stage-01:has(#cta-create-mine:active) .cta-crop,
  .modal-primary,
  .modal-secondary,
  .modal-close,
  .modal-sheet {
    transition: none;
    transform: none;
  }
}

.modal[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.46);
}
.modal-sheet {
  position: relative;
  width: min(420px, 100%);
  margin: 0;
  padding: 22px 18px 18px;
  border-radius: 18px 18px 12px 12px;
  background: #f9eee8;
  color: #111111;
  box-shadow: 0 12px 40px rgba(17, 17, 17, 0.22);
  z-index: 81;
  font-family: "Fredoka", "Segoe UI", sans-serif;
}
.modal-sheet h2 {
  margin: 0 28px 10px 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.modal-sheet p {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #3a2a22;
}
.modal-mock-flag {
  display: none !important;
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.modal-primary,
.modal-secondary,
.modal-close {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 700;
  cursor: pointer;
}
.modal-primary,
.modal-secondary {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
}
.modal-primary {
  background: #e85d1c;
  color: #ffffff;
  box-shadow: 0 2px 0 rgba(40, 24, 16, 0.18);
}
.modal-primary:disabled {
  opacity: 0.55;
  cursor: default;
}
.modal-secondary {
  background: #ffffff;
  color: #111111;
  box-shadow: inset 0 0 0 1px #d9d0c8;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-size: 22px;
  line-height: 1;
}

.long-page {
  position: relative;
  --seam-base: #F9EFE7;
  --seam-height: 12px;
  --seam-upper-color: #F9EFE7;
  --seam-lower-color: #F9EFE7;
  --seam-correction-opacity: 0.12;
  --paper-grain-opacity: 0.028;
}
.paper-underlay {
  position: absolute;
  inset: 0;
  background: var(--seam-base, #F9EFE7);
  pointer-events: none;
  z-index: 0;
}
.paper-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--paper-grain-opacity, 0.028);
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 18% 12%, rgba(70, 42, 24, 0.12) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(90, 58, 32, 0.04) 0 1px, transparent 1px 13px);
}
.stage.seam-aware {
  z-index: 1;
  margin-top: 0;
  background: var(--seam-base, #F9EFE7);
}
#stage-01.seam-aware { margin-top: 0; }
.seam-correction {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--seam-height, 12px);
  pointer-events: none;
  z-index: 2;
  opacity: var(--seam-correction-opacity, 0.12);
  mix-blend-mode: soft-light;
  background: linear-gradient(
    to bottom,
    var(--seam-upper-color, #F9EFE7) 0%,
    var(--seam-base, #F9EFE7) 50%,
    var(--seam-lower-color, #F9EFE7) 100%
  );
}
.seam-correction-out {
  top: auto;
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--seam-lower-color, #F9EFE7) 0%,
    var(--seam-base, #F9EFE7) 50%,
    var(--seam-upper-color, #F9EFE7) 100%
  );
}
.clean-canvas,
.result-bg {
  z-index: 1;
}
.stage.seam-aware::before,
.stage.seam-aware::after {
  content: none;
}
#stage-02b .result-art {
  object-fit: contain;
  object-position: center;
}
#stage-03b > .seam-correction:first-of-type {
  display: none;
}
#stage-02b .ink-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f6ebe3;
  z-index: 3;
  pointer-events: none;
}
#stage-02b .ink-loader[hidden] { display: none; }
.ink-svg { width: 42%; max-width: 160px; overflow: visible; }
.ink-track {
  fill: none;
  stroke: rgba(17, 17, 17, 0.18);
  stroke-width: 3.2;
}
.ink-progress {
  fill: none;
  stroke: #e85d1c;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 72 268;
  stroke-dashoffset: 0;
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
}
#stage-02b.is-generating .ink-progress {
  animation: crazify-ink-orbit 1.35s linear infinite;
}
.ink-splash {
  fill: none;
  stroke: #5939a3;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  opacity: 0;
}
#stage-02b.is-generating .ink-splash {
  opacity: 0.9;
  animation: crazify-ink-splash 1.6s ease-in-out infinite;
}
.ink-status {
  margin: 8px 12px 0;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #111111;
  text-align: center;
  line-height: 1.25;
  min-height: 2.5em;
  opacity: 1;
  transition: opacity 280ms ease;
}
.ink-status.is-swap {
  opacity: 0;
}
@keyframes crazify-ink-orbit {
  to { transform: rotate(270deg); }
}
@keyframes crazify-ink-splash {
  0% { stroke-dashoffset: 48; opacity: 0.25; }
  50% { stroke-dashoffset: 0; opacity: 0.95; }
  100% { stroke-dashoffset: -48; opacity: 0.25; }
}
.credit-chip, .free-flag {
  position: absolute;
  left: 8%;
  margin: 0;
  padding: 4px 8px;
  border-radius: 999px;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 10px;
  z-index: 5;
  pointer-events: none;
  background: rgba(255,255,255,0.86);
  color: #3a2a22;
}
.free-flag { top: 42%; left: 29%; right: 29%; text-align: center; }
.credit-chip { top: 16%; }
#stage-02b .credit-chip,
#stage-02b .progress-chip,
#stage-02b .generation-error,
#stage-02b .art-history {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: calc(var(--art-width, 0.90) * 100%);
  max-width: 92%;
  margin: 0 auto 8px;
}
#stage-02b .art-history {
  overflow-x: auto;
  pointer-events: auto;
}
.art-history[hidden] {
  display: none !important;
}
.art-history:not([hidden]) {
  display: flex;
  gap: 6px;
  z-index: 5;
  overflow-x: auto;
  pointer-events: auto;
}
.art-history button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  appearance: none;
}
.art-history img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.price-live, .live-credit {
  position: absolute;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 700;
  color: #111111;
  z-index: 34;
  pointer-events: none;
  line-height: 1.2;
}
.price-live {
  left: calc(var(--nx) * 100%);
  top: calc(var(--ny) * 100%);
  width: calc(var(--nw) * 100%);
  font-size: 11px;
}
.sku-options { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.sku-option {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-family: "Fredoka", "Segoe UI", sans-serif;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #d9d0c8;
  appearance: none;
}
.sku-option.is-selected {
  background: #e85d1c;
  color: #ffffff;
  box-shadow: none;
}
.sku-option:focus, .art-history button:focus { outline: none; }
.sku-option:focus-visible, .art-history button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #f9eee8, 0 0 0 5px #e85d1c;
}
.credit-hint {
  font-size: 12px !important;
  color: #3a2a22 !important;
}
#toggle-clear-case.is-unavailable,
#toggle-magsafe-case.is-unavailable,
#toggle-tough-case.is-unavailable {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ink-progress, .ink-splash, .ink-status { transition: none; animation: none !important; }
  #stage-02b.is-generating .ink-progress,
  #stage-02b.is-generating .ink-splash { animation: none !important; opacity: 0.85; }
}
@media (min-width: 768px) {
  .long-page { --seam-height: 16px; }
}
@media (min-width: 1024px) {
  .long-page { --seam-height: 16px; }
}

.printful-mockup-wrap,
.printful-mockup-wrap {
  position: absolute;
  left: 36%;
  top: 10%;
  width: 58%;
  max-width: 100%;
  height: 82%;
  z-index: 32;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  pointer-events: none;
  padding: 8px;
  box-sizing: border-box;
  background: transparent;
  overflow: visible;
}
.printful-mockup-wrap[hidden],
.printful-mockup-wrap[hidden] { display: none !important; }
.printful-mockup-wrap[data-state="preparing"],
.printful-mockup-wrap[data-state="generating"],
.printful-mockup-wrap[data-state="unavailable"],
.printful-mockup-wrap[data-state="preparing"],
.printful-mockup-wrap[data-state="generating"],
.printful-mockup-wrap[data-state="unavailable"] {
  justify-content: flex-start;
}
.printful-mockup-wrap[data-state="ready"],
.printful-mockup-wrap[data-state="ready"] {
  background: transparent;
  pointer-events: none;
}
#stage-03b.is-printful-preview-ready > .clean-canvas,
#stage-03b.is-printful-preview-ready > .seam-correction,
#stage-03b.is-printful-preview-ready > .clean-canvas,
#stage-03b.is-printful-preview-ready > .seam-correction {
  visibility: hidden;
}
.printful-mockup-status,
.printful-mockup-status {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #24170f;
  background: #fff8f2;
  border: 1px solid rgba(36, 23, 15, 0.12);
  border-radius: 999px;
  padding: 6px 12px;
  text-align: center;
}
.printful-mockup-note,
.printful-mockup-note {
  margin: 0;
  max-width: 92%;
  font-family: "Fredoka", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  color: #3a2a22;
  text-align: center;
}
.printful-mockup-art,
.printful-mockup-art {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 92%;
  object-fit: contain;
  object-position: center top;
  display: block;
  background: transparent;
}
.printful-mockup-retry,
.printful-mockup-retry {
  pointer-events: auto;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  border: 0;
  background: #24170f;
  color: #fff8f2;
  border-radius: 999px;
  padding: 8px 14px;
}
.admin-debug {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 80;
  max-width: 280px;
  background: #111;
  color: #f4f1ea;
  font: 11px/1.35 ui-monospace, Consolas, monospace;
  padding: 8px 10px;
  border-radius: 8px;
  opacity: 0.92;
}
.admin-debug[hidden] { display: none !important; }
.admin-debug p { margin: 0 0 4px; }
.test-recipient-banner {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  color: #7a1f1f;
  background: #ffe8e8;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.test-order-facts { margin: 0; }
.test-order-facts dt { font-weight: 700; margin-top: 8px; }
.test-order-facts dd { margin: 0; }
.test-order-result { white-space: pre-wrap; font-size: 13px; }

.adjust-my-art {
  pointer-events: auto;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  border: 0;
  background: #24170f;
  color: #fff8f2;
  border-radius: 999px;
  padding: 8px 14px;
  max-width: 100%;
}
.placement-local-label {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #24170f;
  background: #fff8f2;
  border-radius: 999px;
  padding: 4px 10px;
}
.placement-local-canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  background: transparent;
}
.placement-editor {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 12, 8, 0.46);
  padding: 0;
  box-sizing: border-box;
  overflow: auto;
}
.placement-editor[hidden] { display: none !important; }
.placement-editor-sheet {
  width: 100%;
  max-width: 430px;
  box-sizing: border-box;
  background: #F9EFE7;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px 24px;
  max-height: 100%;
  overflow: auto;
}
.placement-editor h2,
.placement-editor p,
.placement-editor label,
.placement-editor button {
  font-family: "Fredoka", sans-serif;
}
.placement-editor h2 { margin: 0 0 8px; font-size: 22px; }
.placement-editor p { margin: 0 0 10px; font-size: 14px; line-height: 1.35; }
.placement-stage { position: relative; width: 100%; max-width: 100%; }
#placement-canvas {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  background: #efe4d6;
  border-radius: 18px;
  touch-action: none;
}
.placement-warning {
  color: #7a1f1f;
  background: #ffe8e8;
  border-radius: 10px;
  padding: 8px 10px;
}
.placement-ack { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.placement-controls, .placement-actions, .placement-nudge, .placement-zoom-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  max-width: 100%;
}
.placement-zoom-label { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.placement-zoom-label input { width: 100%; }
.placement-controls button,
.placement-actions button,
.placement-nudge button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff8f2;
  color: #24170f;
}
.placement-apply { background: #24170f !important; color: #fff8f2 !important; }
@media (prefers-reduced-motion: reduce) {
  .placement-editor, #placement-canvas { transition: none !important; }
}
@media (max-width: 430px) {
  .placement-editor-sheet { max-width: 100%; padding: 14px 12px 20px; }
}