:root{font:15px/1.5 system-ui,sans-serif;color:#223148;background:#f5f7fb;--accent:#17645a}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:24px;align-items:center;padding:16px 5%;background:#fff;border-bottom:1px solid #dfe5ec}header a{color:var(--accent);font-weight:750;text-decoration:none}header a:last-child{margin-left:auto}main{max-width:1280px;margin:auto;padding:32px 24px}h1{font-size:36px;margin:0}h2{font-size:21px;margin:0 0 10px}p{color:#5b697b}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--accent);font-weight:700}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.badge{background:#e6f3ee;color:#23634e;border-radius:20px;padding:8px 14px}.card{background:white;border:1px solid #e0e6ee;border-radius:16px;padding:24px;margin-bottom:24px;box-shadow:0 3px 16px #22314804}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:20px}.tile{text-align:left;min-height:105px;background:#f8fafb}.tile strong,.tile small{display:block}.tile small{color:#65758a;margin-top:6px}button,.button{font:inherit;border:1px solid #cdd8e3;border-radius:8px;background:white;color:#223148;padding:9px 13px;cursor:pointer}button:hover,.button:hover{border-color:var(--accent);background:#eef6f3}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--accent);color:white;width:100%;margin-top:18px}.primary:hover{background:#104f48;color:white}.studio{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px}.stage{height:510px;background:#eef0f4;border-radius:12px;display:flex;justify-content:center;align-items:center;overflow:hidden}.stage #surface{width:440px;max-width:90%;aspect-ratio:1;position:relative;background:#fff;box-shadow:0 12px 28px #24304419}.stage img{width:100%;height:100%;object-fit:contain;display:block}.stage.mug{background:linear-gradient(#ddd5c8 72%,#bba58c 72%,#c8b69f)}.stage.mug #surface{width:290px;border-radius:16px 16px 35px 35px;background:linear-gradient(90deg,#ddd,#fff 20%,#fff 75%,#ddd);box-shadow:0 25px 22px #352c3a42;padding:30px 12px}.stage.mug #surface:before{content:'';position:absolute;width:90px;height:150px;border:23px solid #f7f6f5;right:-75px;top:60px;border-radius:40%;z-index:0}.stage.mug img{position:relative}.stage.mug #hitboxes{display:none}#hitboxes{position:absolute;inset:0;pointer-events:none}.hitbox{position:absolute;min-width:35px;height:26px;border:1px dashed #17645a;background:#17645a0d;pointer-events:auto;cursor:move;touch-action:none}.hitbox.selected{border:2px solid #17645a}.tabs{display:flex;gap:8px;margin-bottom:12px}.tabs [aria-pressed=true]{background:#e6f3ee;border-color:#17645a}label{display:block;margin-bottom:14px;font-size:13px;font-weight:600}input,select{display:block;width:100%;font:inherit;border:1px solid #ccd5e0;border-radius:7px;padding:8px;background:#fff;margin-top:5px}input[type=color]{padding:2px;height:38px}input[type=range]{padding:0}.row{display:flex;gap:10px;margin-bottom:12px}.row>*{flex:1;min-width:0}.hint{font-size:12px}#render-status,#status{color:#9b3b28}#orders{margin-top:12px}#orders button{margin:6px}[hidden]{display:none!important}:focus-visible{outline:3px solid #56a99b;outline-offset:3px}@media(max-width:800px){main{padding:20px 12px}.studio{grid-template-columns:1fr}.stage{height:auto;min-height:340px;padding:24px}.heading{align-items:flex-start;flex-direction:column}.card{padding:16px}h1{font-size:29px}.stage #surface{width:330px}}
.studio>*{min-width:0}.studio{overflow-wrap:anywhere}input[type=checkbox]{display:inline;width:auto;margin-right:8px}@media(max-width:800px){.studio{grid-template-columns:minmax(0,1fr)}.stage #surface{width:100%;max-width:330px}.tabs{flex-wrap:wrap}}

/* Reserve async content space, including slow Shopify/API responses. */
.placeholder{padding:9px 13px;border:1px solid #cdd8e3;border-radius:8px;color:#65758a}#name{min-height:2lh}#dimensions{min-height:2lh}#render-status,#saved{min-height:3lh;overflow-wrap:anywhere}

.product-card{display:grid;gap:8px}.product-card .tile{width:100%}.product-card a{color:var(--accent);font-size:13px}details{margin:14px 0}summary{cursor:pointer;font-weight:600}#customer-fields input{font-size:16px}#customer-fields{padding:8px 0}
/* The editable print stays a separate live layer over the photographic mug. */
.stage.mug{position:relative;aspect-ratio:1;height:auto;min-height:0;padding:0;background:#e5ded2 url('mug-preview.webp') 70% 60%/140% 140% no-repeat}
.stage.mug #surface{position:absolute;left:9%;top:19%;width:58%;max-width:none;aspect-ratio:1;padding:0;border-radius:0;background:transparent;box-shadow:none;mix-blend-mode:multiply}
.mug-contour{display:none;width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.stage.mug .mug-contour{display:block}.stage.mug #preview{visibility:hidden}
.photo-live{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.photo-live[hidden]{display:none}#customer-fields textarea{width:100%;font:inherit;line-height:1.5;padding:12px;border:1px solid #bdc9c2;border-radius:6px;resize:vertical;min-height:100px}
.stage.mug #surface:before{display:none}
.stage.mug.full-height-mug #surface{top:12.5%;aspect-ratio:80/95}
[data-text-size-for]{accent-color:#17645a;min-height:32px}label:has([data-text-size-for]) output{display:inline-block;margin:4px 8px 0 0}label:has([data-text-size-for]) small{font-weight:400}
.stage.mug img{width:100%;height:100%;object-fit:contain}
#render-status{color:#17645a}

.view-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.view-buttons button[aria-pressed=true]{background:#17645a;color:white}.rotation-canvas{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;touch-action:none}.rotation-canvas canvas{display:block;width:100%;height:100%}.rotation-panel input[type=range]{width:100%}
.example-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.example-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.example-gallery p{font-size:.9rem}
.customer-mode #name,.customer-mode #render-status{min-height:0}.customer-mode #dimensions{display:none}.customer-mode .studio{gap:16px}.customer-mode #customer-fields{padding-top:0}.customer-mode #customer-fields h3{margin-top:0}
.example-photos button{padding:0;overflow:hidden}.example-photos button img{display:block;border-radius:8px}
.inspiration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.inspiration-grid button{padding:6px;display:grid;gap:6px;overflow:hidden}.inspiration-grid img{width:100%;aspect-ratio:1;object-fit:contain;background:#faf8f3}.inspiration-grid span{overflow-wrap:anywhere}.inspiration-grid button[aria-pressed=true]{outline:3px solid #17645a}

.photo-position{position:absolute;z-index:2;border:2px dashed transparent;touch-action:none;cursor:grab;background:transparent}.photo-position:hover,.photo-position:focus-visible{border-color:#17645a}.photo-position:active{cursor:grabbing}.photo-position-note{font-size:13px;line-height:1.5;margin:0 0 10px}.photo-tools{padding:14px;border:1px solid #d9e2da;background:#f6f8f4;border-radius:10px;margin-top:12px}.photo-zoom{display:flex;gap:10px;align-items:center}.photo-zoom button{min-width:44px;min-height:44px;font-size:24px;font-weight:700;padding:2px}.photo-zoom input{min-width:40px;flex:1;accent-color:#17645a;margin:0;height:44px}.photo-zoom output{min-width:44px;font-size:13px}.photo-tools>button{font-size:13px;margin-top:10px}.photo-upload-button{width:100%;min-height:58px;border:2px dashed #78846e;background:#f3f5ee;color:#354531;font-size:18px;font-weight:650;border-radius:10px}.photo-upload-button:hover{background:#e7eddf}.photo-upload-help{font-size:13px;font-weight:400;line-height:1.6;margin:8px 0 0}.photo-file-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;clip-path:inset(50%);overflow:hidden}.photo-fine-adjustments{font-size:13px}.photo-fine-adjustments label{margin-top:12px}