/* Shared editor v5: stable mobile cards and visible exit controls. */
.cpse {
  --cpse-ink: #1b2541;
  --cpse-pink: #cf006f;
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #fff;
  color: var(--cpse-ink);
  font: 16px/1.45 system-ui, sans-serif;
}
[data-cpg].cpg--shared-ready [data-cpg-legacy-design] { display: none; }
[data-cp-ps-chooser][hidden] { display: none !important; }
.cp-ps__guided-trigger { display: block; width: 100%; min-height: 52px; margin: 14px 0 0; padding: 12px 18px; border: 0; border-radius: 12px; color: #fff; background: #cf006f; font-weight: 700; cursor: pointer; }
.cp-ps__guided-message { margin: 8px 0; color: #a21d3e; font-weight: 700; }
.cp-ps__guided-message.is-good { color: #145c42; }
.cpg__shared-trigger { min-height: 52px; padding: 12px 18px; border: 0; border-radius: 12px; color: #fff; background: #cf006f; font-weight: 700; cursor: pointer; }
body.cpse-is-open { overflow: hidden; }
.cpse *, .cpse *::before, .cpse *::after { box-sizing: border-box; }
.cpse button, .cpse input, .cpse select, .cpse textarea { font: inherit; }
.cpse button { min-height: 44px; cursor: pointer; }
.cpse button:disabled { cursor: not-allowed; opacity: .55; }
.cpse__header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid #dfe2e8; background: #fff; }
.cpse__header strong { display: block; font-size: clamp(19px, 2vw, 26px); }
.cpse__header small { display: block; color: #5f6879; }
.cpse__close { flex: 0 0 auto; padding: 8px 16px; border: 0; border-radius: 12px; color: #fff; background: var(--cpse-pink); font-weight: 700; }
.cpse__header-actions { display: flex; align-items: center; gap: 8px; }
.cpse__header-actions [data-cpse-cancel] { border: 1px solid #cdd2dc; border-radius: 12px; padding: 8px 12px; color: var(--cpse-ink); background: #fff; }
.cpse__header-price { text-align: right; white-space: nowrap; }
.cpse__header-price strong { font-size: 22px; color: var(--cpse-ink); }
.cpse__zone-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px 0; }
.cpse__zone-head strong, .cpse__zone-head small { display: block; }
.cpse__zone-head small { color: #5f6879; }
.cpse__rotate-hint { display: none !important; }
.cpse__zone-head button, .cpse__extra-toggle { border: 0; background: transparent; color: var(--cpse-pink); font-weight: 700; }
.cpse__source { margin-bottom: 12px; }
.cpse__source > strong, .cpse__source > small { display: block; }
.cpse__source > small { margin-top: 6px; color: #5f6879; }
.cpse__source-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.cpse__source-actions button { padding: 8px 10px; border: 1px solid #cdd2dc; border-radius: 12px; background: #fff; color: var(--cpse-ink); font-weight: 700; }
.cpse__source-actions button[aria-pressed="true"] { border: 2px solid var(--cpse-pink); background: #fff0f7; color: #9b0053; }
.cpse__source-actions [data-cpse-source="whatsapp"] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.cpse__source-actions [data-cpse-source="whatsapp"] img { display: block; flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.cpse__source-confirm { margin-top: 10px; padding: 12px; border: 1px solid #e6a4c8; border-radius: 12px; background: #fff5fa; }
.cpse__source-confirm p { margin: 4px 0 10px; }
.cpse__source-confirm > div { display: flex; gap: 8px; }
.cpse__source-confirm button { flex: 1 1 0; min-width: 0; padding: 8px; border: 1px solid #cdd2dc; border-radius: 10px; background: #fff; color: var(--cpse-ink); font-weight: 700; }
.cpse__source-confirm [data-cpse-keep-upload] { border-color: var(--cpse-pink); color: #9b0053; }
.cpse__extra-toggle { display: block; padding: 8px 0; text-align: left; }
.cpse__extras[hidden] { display: none; }
.cpse__extras { margin-bottom: 8px; }
.cpse__zones { display: flex; flex: 0 0 auto; gap: 8px; padding: 10px 24px; overflow-x: auto; border-bottom: 1px solid #e5e6ea; scrollbar-width: thin; }
.cpse__zone { flex: 0 0 auto; min-width: 124px; min-height: 60px; padding: 8px 12px; border: 1px solid #dfe2e8; border-radius: 12px; background: #fff; color: var(--cpse-ink); text-align: left; }
.cpse__zone strong, .cpse__zone small { display: block; }
.cpse__zone small { color: #667084; }
.cpse__zone.is-active { border-color: var(--cpse-pink); box-shadow: inset 0 0 0 1px var(--cpse-pink); background: #fff5fa; }
.cpse__zone.is-active small { color: #9b0053; font-weight: 700; }
.cpse__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 16px; padding: 12px 24px; }
.cpse__canvas { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid #e3e6ea; border-radius: 16px; background: #f8f9fb; }
.cpse__missing-view { max-width: 38ch; margin: 20px; padding: 20px; border: 1px solid #dfe2e8; border-radius: 12px; background: #fff; color: #485469; text-align: center; }
.cpse__garment-frame { position: relative; width: auto; height: 100%; min-width: 0; min-height: 0; max-width: 100%; aspect-ratio: 4 / 5; }
.cpse__garment-frame > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cpse__safe-area { position: absolute; border: 1px dashed var(--cpse-pink); pointer-events: none; }
.cpse__design { position: absolute; max-height: 44%; color: #fff; font-size: clamp(17px, 2vw, 28px); font-weight: 700; text-shadow: 0 1px 2px #111; text-align: center; touch-action: none; user-select: none; cursor: grab; }
.cpse__design img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.cpse__tools { min-height: 0; overflow-y: auto; padding: 4px 8px 12px 2px; }
.cpse__presets { display: grid; gap: 8px; margin-bottom: 16px; }
.cpse__presets button, .cpse__actions button, .cpse__size button { padding: 8px 12px; border: 1px solid #ced3dd; border-radius: 12px; background: #fff; color: var(--cpse-ink); font-weight: 700; }
.cpse__presets small { color: #5f6879; }
.cpse__presets button:hover, .cpse__actions button:hover { border-color: var(--cpse-pink); }
.cpse__status { font-weight: 700; }
.cpse__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cpse__actions [data-cpse-action="upload"] { color: #fff; border-color: var(--cpse-pink); background: var(--cpse-pink); }
.cpse__size { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; color: #5f6879; }
.cpse__size div { display: flex; gap: 6px; }
.cpse__size button { min-width: 44px; font-size: 24px; }
.cpse__note, .cpse__text-label, .cpse__roster label { display: block; margin-top: 14px; font-weight: 700; }
.cpse__contrast { display: block; margin-top: 10px; padding: 8px 12px; border: 1px solid #cdd2dc; border-radius: 10px; background: #fff; color: var(--cpse-ink); font-weight: 700; }
.cpse__note textarea, .cpse__text-label input, .cpse__roster input, .cpse__roster select { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 9px 12px; border: 1px solid #cdd2dc; border-radius: 10px; font-size: 16px; color: var(--cpse-ink); background: #fff; }
.cpse__note textarea { min-height: 76px; }
.cpse__zone-note { display: block; margin-top: 12px; font-weight: 700; }
.cpse__zone-note textarea { display: block; width: 100%; min-height: 64px; margin-top: 6px; padding: 9px 12px; border: 1px solid #cdd2dc; border-radius: 10px; color: var(--cpse-ink); background: #fff; font: inherit; font-weight: 400; resize: vertical; box-sizing: border-box; }
.cpse__error { color: #a21d3e; font-weight: 700; }
.cpse__footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 24px; border-top: 1px solid #dfe2e8; background: #fff; }
.cpse__footer { display: none; }
.cpse__footer small, .cpse__footer strong { display: block; }
.cpse__footer strong { font-size: clamp(20px, 2vw, 28px); }
.cpse__footer span { color: #5f6879; text-align: right; }
.cpse__exit-backdrop { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(16, 20, 31, .55); }
.cpse__exit-confirm { width: min(100%, 420px); padding: 22px; border-radius: 16px; background: #fff; box-shadow: 0 18px 45px rgba(0, 0, 0, .18); }
.cpse__exit-confirm > strong { display: block; font-size: 22px; }
.cpse__exit-confirm p { margin: 8px 0 18px; }
.cpse__exit-confirm > div { display: flex; gap: 8px; }
.cpse__exit-confirm button { flex: 1 1 0; min-width: 0; padding: 9px 12px; border: 1px solid #cdd2dc; border-radius: 10px; background: #fff; color: var(--cpse-ink); font-weight: 700; }
.cpse__exit-confirm [data-cpse-keep-editing] { border-color: var(--cpse-pink); background: var(--cpse-pink); color: #fff; }
@media (max-width: 700px) {
  .cpse__header { padding: 8px 12px; flex-direction: column; align-items: stretch; gap: 5px; }
  .cpse__header > div:first-child > small { display: none; }
  .cpse__header > div:first-child > strong { font-size: 17px; }
  .cpse__close { font-size: 14px; }
  .cpse__header-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .cpse__header-price { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
  .cpse__header-price strong { font-size: 18px; }
  .cpse__header-actions [data-cpse-cancel], .cpse__close { min-height: 44px; padding: 7px 8px; font-size: 13px; }
  .cpse__zone-head { padding: 7px 12px 0; }
  .cpse__zone-head small { font-size: 12px; }
  .cpse__rotate-hint { display: block !important; color: #9b0053 !important; }
  .cpse__zones { min-height: 76px; padding: 8px 12px; }
  .cpse__zone { min-width: 140px; min-height: 60px; padding: 6px 10px; font-size: 14px; line-height: 1.2; }
  .cpse__zone small { margin-top: 3px; font-size: 12px; line-height: 1.2; }
  .cpse__body { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; }
  .cpse__canvas { flex: 0 0 auto; height: min(45dvh, 380px); }
  .cpse__tools { flex: 1 1 auto; padding: 2px 2px 10px; }
  .cpse__source-actions button { font-size: 13px; }
  .cpse__source-confirm > div, .cpse__exit-confirm > div { flex-direction: column; }
  .cpse__size { align-items: flex-start; }
  .cpse__design { font-size: clamp(23px, 6vw, 32px); }
  .cpse__footer { padding: 7px 12px max(8px, env(safe-area-inset-bottom)); font-size: 13px; }
  .cpse__footer strong { font-size: 20px; }
  .cpse__footer span { max-width: 50%; }
}
@media (max-width: 380px) { .cpse__canvas { height: min(39dvh, 300px); } .cpse__actions { grid-template-columns: 1fr; } }

@media (orientation: landscape) and (max-height: 550px) and (min-width: 701px) {
  .cpse__header { min-height: 44px; gap: 8px; padding: 3px 12px; }
  .cpse__header > div:first-child > small, .cpse__header-price small, .cpse__zone-head small { display: none; }
  .cpse__header strong { font-size: 17px; }
  .cpse__header-price strong { font-size: 18px; }
  .cpse__header-actions [data-cpse-cancel], .cpse__close { min-height: 34px; padding: 3px 10px; font-size: 12px; }
  .cpse__zone-head { min-height: 31px; padding: 2px 12px 0; }
  .cpse__zone-head strong { font-size: 13px; }
  .cpse__zone-head button { min-height: 28px; font-size: 13px; }
  .cpse__zones { min-height: 50px; gap: 6px; padding: 3px 12px; }
  .cpse__zone { min-width: 112px; min-height: 42px; padding: 3px 8px; font-size: 12px; }
  .cpse__zone strong { line-height: 1.15; }
  .cpse__zone small { font-size: 10px; }
  .cpse__body { grid-template-columns: minmax(0, 1.4fr) minmax(270px, .6fr); gap: 8px; padding: 4px 12px; }
  .cpse__tools { padding-bottom: 4px; }
  .cpse__source-actions { grid-template-columns: minmax(0, 1fr); }
  .cpse__source-actions button { min-height: 42px; padding: 5px 8px; font-size: 13px; }
  .cpse__footer { min-height: 40px; gap: 8px; padding: 3px 12px max(3px, env(safe-area-inset-bottom)); font-size: 12px; }
  .cpse__footer strong { font-size: 17px; }
  .cpse__footer span { max-width: 55%; font-size: 11px; }
}

/* On phones, let the garment and controls use the full landscape height. */
@media (orientation: landscape) and (max-height: 550px) and (min-width: 600px) {
  .cpse__header { flex-direction: row; align-items: center; min-height: 40px; padding: 3px 10px; }
  .cpse__header > div:first-child > strong { font-size: 15px; }
  .cpse__header-actions { display: flex; align-items: center; gap: 6px; }
  .cpse__header-price { display: block; white-space: nowrap; }
  .cpse__header-price small { display: none; }
  .cpse__header-price strong { font-size: 17px; }
  .cpse__header-actions [data-cpse-cancel], .cpse__close { min-height: 34px; padding: 4px 9px; font-size: 12px; }
  .cpse__zone-head { display: flex; }
  .cpse__zones { min-height: 47px; padding: 3px 10px; }
  .cpse__body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); gap: 8px; padding: 4px 10px 6px; }
  .cpse__tools { min-height: 0; }
}

.cpse__rotate-gate { display: none; }
.cpse__focus-open { position: absolute; z-index: 2; left: 10px; bottom: 10px; min-height: 40px; padding: 6px 12px; border: 1px solid #cf006f; border-radius: 10px; background: #fff; color: #9b0053; font-weight: 700; }
.cpse__rotate-card { width: min(88vw, 380px); text-align: center; }
.cpse__rotate-card h2 { margin: 0 0 8px; font-size: 23px; line-height: 1.2; }
.cpse__rotate-card p { margin: 0 0 14px; color: #4e586a; }
.cpse__rotate-phone { display: block; position: relative; width: 61px; height: 106px; margin: 0 auto 39px; border: 5px solid #14233e; border-radius: 13px; background: #fff; animation: cpse-turn-phone 2.8s ease-in-out infinite alternate; }
.cpse__rotate-phone::after { content: ''; position: absolute; inset: 9px 5px 15px; border-radius: 4px; background: linear-gradient(145deg, #ffe6f3 0%, #cf006f 100%); }
@keyframes cpse-turn-phone { 0%, 30% { transform: rotate(0); } 75%, 100% { transform: rotate(90deg); } }
.cpse__rotate-card [data-cpse-continue-portrait] { border: 0; background: none; color: #9b0053; text-decoration: underline; font-weight: 700; }
.cpse__rotate-card [data-cpse-gate-exit] { display: block; min-height: 44px; margin: 12px auto 0; padding: 6px 12px; border: 1px solid #cbd0d9; border-radius: 10px; background: #fff; color: #14233e; }
@media (orientation: portrait) and (max-width: 700px) {
  .cpse:not(.cpse--portrait-ok) .cpse__rotate-gate { display: grid; position: absolute; z-index: 5; inset: 0; place-items: center; padding: 20px; background: #fff; }
}
@media (prefers-reduced-motion: reduce) { .cpse__rotate-phone { animation: none; } }

.cpse__focus-toolbar { display: none; }
.cpse--focus .cpse__header, .cpse--focus .cpse__zone-head, .cpse--focus .cpse__zones, .cpse--focus .cpse__tools, .cpse--focus .cpse__footer { display: none !important; }
.cpse--focus .cpse__focus-toolbar { position: absolute; z-index: 3; top: 7px; left: 8px; right: 8px; display: flex; align-items: center; gap: 6px; min-height: 38px; }
.cpse__focus-toolbar .cpse__focus-zone { margin-right: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cpse__focus-toolbar .cpse__focus-price { margin-left: auto; white-space: nowrap; color: #14233e; }
.cpse__focus-toolbar button { flex: 0 0 auto; min-height: 36px; padding: 5px 10px; border: 1px solid #cbd0d9; border-radius: 9px; background: #fff; color: #14233e; font-weight: 700; }
.cpse__focus-toolbar [data-cpse-focus-close] { border-color: #cf006f; color: #9b0053; }
.cpse--focus .cpse__body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 51px 8px 8px; }
.cpse--focus .cpse__canvas { height: auto; min-height: 0; border-radius: 10px; touch-action: none; }
.cpse--focus .cpse__focus-open { display: none; }
@media (max-width: 700px) { .cpse--focus .cpse__focus-zone { display: none; } .cpse--focus .cpse__focus-price { margin-left: 0; margin-right: auto; } }