:root{
  --ink:#3e3545;
  --rose:#c77f91;
  --cream:#fbf7f4;
}

*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif}
button,input,select,textarea{font:inherit}
[hidden]{display:none!important}

.shirt-header{max-width:1120px;margin:auto;padding:18px 20px;display:flex;gap:22px;align-items:center}
.shirt-header>a{color:#846e77;text-decoration:none;font-size:13px}
.shirt-header small{color:#b37385;text-transform:uppercase;letter-spacing:.12em;font-size:9px}
.shirt-header h1{font:700 24px "Playfair Display",serif;margin:2px 0}
.shirt-editor{max-width:1120px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr);background:#fffaf7}

.shirt-preview-panel{position:relative;background:radial-gradient(circle at 50% 38%,#fff 0,#f3e7eb 47%,#e5eef1 100%);padding:18px 16px 22px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.preview-heading{position:relative;z-index:3;width:100%;display:flex;justify-content:space-between;color:#a35e75;font-size:10px;letter-spacing:.1em}
.preview-heading b{color:#5a4b54;letter-spacing:0}
.rotate-hint{position:relative;z-index:3;margin-top:7px;padding:6px 11px;border-radius:999px;background:#fff9;color:#8d707a;font-size:10px;box-shadow:0 4px 16px #9e71801c}
.shirt-stage{position:relative;width:min(410px,calc(100vw - 30px));aspect-ratio:1;margin:-3px auto 0;touch-action:none;cursor:grab}
.shirt-stage:active{cursor:grabbing}
.shirt-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.shirt-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 14px #765d681f);transition:opacity .2s ease}
.shirt-stage.ready .shirt-fallback{opacity:0;pointer-events:none}
.shirt-loading{position:absolute;inset:auto 50% 12px auto;transform:translateX(50%);z-index:2;padding:7px 11px;border-radius:999px;background:#fffbd9;color:#8d707a;font-size:10px;white-space:nowrap;box-shadow:0 4px 16px #9e71801c}
.shirt-stage.ready .shirt-loading{display:none}
.shirt-side-switch{position:relative;z-index:3;width:min(330px,100%);display:grid;grid-template-columns:1fr 1fr;gap:7px;background:#fff9;border:1px solid #eadde1;border-radius:17px;padding:5px;box-shadow:0 8px 24px #8e667319}
.shirt-side-switch button{border:0;border-radius:12px;background:transparent;color:#77666e;padding:9px 12px;display:grid;gap:2px;cursor:pointer}
.shirt-side-switch button span{font-weight:800;font-size:12px}
.shirt-side-switch button small{font-size:9px;color:#a28c95}
.shirt-side-switch button.active{background:#493c50;color:#fff;box-shadow:0 5px 14px #4a34443a}
.shirt-side-switch button.active small{color:#f4dfe6}
.shirt-side-switch button.ready small{color:#a9526d;font-weight:800}
.shirt-side-switch button.active.ready small{color:#ffd6e2}
.preview-note{position:relative;z-index:3;font-size:10px;color:#947b84;text-align:center;margin:10px 0 0}

.shirt-controls{padding:4px 18px 50px}
.shirt-step,.shirt-checkout{padding:25px 0;border-bottom:1px solid #eee4e6}
.step-title{display:flex;gap:12px;align-items:flex-start}
.step-title>span{color:#d07d92;font:700 14px "Playfair Display",serif}
.step-title h2{font:700 27px "Playfair Display",serif;margin:0}
.step-title p{font-size:12px;color:#83747b;margin:5px 0 18px;line-height:1.45}

.placement-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.placement-grid button{border:1px solid #e5d9dc;background:#fff;padding:12px 9px;border-radius:13px;color:var(--ink);text-align:left;display:grid;gap:3px;cursor:pointer}
.placement-grid button.active{border-color:#bd7488;background:#fff4f6;box-shadow:0 0 0 1px #bd7488}
.placement-grid button[data-placement-side="back"]{grid-column:1/-1}
.placement-grid small{color:#8e7c83}
.a4-info{margin-top:13px;padding:14px;background:#f8f3f1;border-radius:13px}
.a4-info b{font-size:12px}
.a4-info p{font-size:11px;color:#7e7076;line-height:1.45;margin:5px 0 10px}
.a4-info label{font-size:11px;font-weight:700;display:flex;gap:7px;align-items:center}

.shirt-mode-switch{display:grid;grid-template-columns:1fr 1fr;background:#f4edef;border-radius:14px;padding:4px;margin-bottom:14px}
.shirt-mode-switch button{border:0;background:transparent;padding:11px;border-radius:11px;color:#806d75;font-weight:700;cursor:pointer}
.shirt-mode-switch button.active{background:#463a4d;color:#fff}
.shirt-upload{min-height:100px;border:1px dashed #d9a6b4;border-radius:14px;display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;align-items:end;padding:17px;color:#9f5267;cursor:pointer}
.shirt-upload span{grid-row:1/3;width:36px;height:36px;border-radius:50%;background:#f7e4ea;display:grid;place-items:center;font-size:22px;align-self:center}
.shirt-upload b{font-size:13px}
.shirt-upload small{font-size:10px;color:#977f87;align-self:start}
.shirt-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
.shirt-photo-actions button{border:1px solid #e1d5d8;background:#fff;border-radius:10px;padding:10px;color:#9b5266;cursor:pointer}

.shirt-text-panel label{font-size:11px;font-weight:700}
.shirt-text-panel textarea{width:100%;height:75px;border:1px solid #e2d6d9;border-radius:12px;padding:12px;margin-top:6px;font:14px "DM Sans";resize:vertical}
.shirt-fonts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.shirt-fonts button{min-height:54px;border:1px solid #e3d8db;background:#fff;border-radius:12px;color:#4b3e46;cursor:pointer}
.shirt-fonts button.active{border-color:#c27489;background:#fff4f6}
.shirt-fonts .elegant{font:italic 600 17px "Playfair Display"}
.shirt-fonts .modern{font:700 13px "DM Sans";letter-spacing:.14em}
.shirt-fonts .script{font:21px "Brush Script MT",cursive}
.shirt-fonts .bold{font:800 15px "DM Sans"}
.shirt-colors{display:flex;gap:10px}
.shirt-colors button{width:30px;height:30px;border-radius:50%;border:4px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #ddd;cursor:pointer}
.shirt-colors button.selected{box-shadow:0 0 0 2px #b96f84}
.shirt-adjustments{margin-top:14px;background:#f8f4f2;border-radius:14px;padding:14px;display:grid;gap:14px}
.shirt-adjustments label{font-size:11px;font-weight:700}
.shirt-adjustments label b{float:right;color:#a15e72}
.shirt-adjustments input[type=range]{width:100%;accent-color:#c5768a;margin-top:9px}
.shirt-product-fields{display:grid;gap:12px}
.shirt-product-fields>label{font-size:11px;font-weight:700}
.shirt-product-fields select{display:block;width:100%;margin-top:6px;border:1px solid #e2d6d9;background:#fff;border-radius:11px;padding:11px}
.mirror-option{display:flex;align-items:center;gap:8px;background:#f8f3f1;border-radius:11px;padding:12px}
.shirt-checkout{border-bottom:0}

@media(min-width:860px){
  .shirt-header h1{font-size:30px}
  .shirt-editor{grid-template-columns:minmax(430px,1fr) minmax(400px,1fr);min-height:calc(100vh - 82px)}
  .shirt-preview-panel{position:sticky;top:0;height:calc(100vh - 82px);justify-content:center}
  .shirt-controls{padding:0 38px 70px}
  .shirt-stage{width:min(430px,100%)}
  .step-title h2{font-size:31px}
}