@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--accent:#c94708;--ink:#181b22;--muted:#656976;--line:#e4e2dd;--paper:#f6f5f2}*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font:14px 'IBM Plex Sans Thai',Tahoma,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:7px;padding:10px 12px;color:var(--ink);transition:background .15s,border-color .15s}button:hover{border-color:var(--accent);background:#fff7f1}button:focus-visible,a:focus-visible{outline:3px solid #ee9e70;outline-offset:3px}button:disabled{opacity:.45;cursor:default}header{height:88px;display:flex;align-items:center;gap:35px;border-bottom:1px solid var(--line);padding:0 36px}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font:800 24px Manrope,sans-serif;letter-spacing:-1px}.brand img{width:56px;height:56px;object-fit:contain}.brand small{display:block;font:600 8px Manrope,sans-serif;letter-spacing:2px;margin-top:5px}.back{margin-left:auto;color:var(--muted);text-decoration:none}.local{font-size:12px;background:#f1f5ee;color:#456341;border-radius:20px;padding:7px 13px}main{max-width:1600px;margin:auto;padding:30px 36px 0}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow{font:700 10px Manrope,sans-serif;letter-spacing:2px;color:var(--accent);margin:0 0 12px}h1{font-size:32px;line-height:1.4;letter-spacing:-.7px;margin:0;font-weight:600}h1 em{font-style:normal;color:var(--accent)}.heading p:not(.eyebrow){color:var(--muted);margin:8px 0 0}.tools{display:flex;gap:8px}.studio{display:grid;grid-template-columns:260px minmax(300px,1fr) 270px;gap:20px;align-items:start}.panel{padding:20px;border:1px solid var(--line);border-radius:12px;background:white}.section-title{display:flex;align-items:center;gap:9px;margin:0 0 17px}.section-title span{font:600 10px Manrope;color:var(--accent);border:1px solid #f0cdb9;padding:4px 6px;border-radius:4px}.section-title h2{font-size:16px;font-weight:600;margin:0}.types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.types button{text-align:left;padding:13px 10px;font-weight:600}.types small{font:600 8px Manrope;display:block;margin-top:7px;letter-spacing:.5px}.chosen{border-color:var(--accent)!important;background:#fff3eb!important;color:var(--accent)!important}.label-row{display:flex;justify-content:space-between;margin:15px 0 10px}.label-row span{color:var(--muted);font-size:12px}.swatches{display:flex;gap:9px;flex-wrap:wrap}.swatches button{padding:0;width:27px;height:27px;border-radius:50%;border:1px solid #aaa;box-shadow:inset 0 0 0 3px white}.swatches button.selected{outline:2px solid var(--accent);outline-offset:2px}label{display:block;font-size:12px;margin:13px 0;color:#52555d}input:not([type=range]),select{display:block;width:100%;border:1px solid #dcdad5;border-radius:6px;background:white;color:var(--ink);min-height:38px;margin-top:6px;padding:7px 9px}input[type=color]{padding:4px;cursor:pointer}input[type=range]{width:100%;accent-color:var(--accent);display:block;margin:10px 0 0}input:focus,select:focus{outline:2px solid #e9aa86;outline-offset:1px}.custom-color{display:flex;align-items:center;justify-content:space-between}.custom-color input{width:45px;margin:0}.divider{height:1px;background:var(--line);margin:23px 0}.upload{border:1px dashed #d6a88c;color:var(--accent);width:100%;background:#fffbf7;font-size:13px;padding:16px 6px}.upload small{display:block;font-size:9px;color:var(--muted);margin-top:6px}.wide{width:100%;margin-top:8px}.hint{font-size:10px;color:var(--muted);line-height:1.8;margin:12px 0 0}.canvas-panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;position:sticky;top:16px}.canvas-top{padding:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;font:600 10px Manrope;letter-spacing:1px}.badge{font:10px 'IBM Plex Sans Thai',sans-serif;color:#777;border:1px solid #d8d6d0;border-radius:4px;padding:4px 8px}.views{display:flex;justify-content:center;gap:5px;padding:0 10px}.views button{font-size:12px;padding:7px 12px;background:transparent;border-color:transparent}.views .chosen{background:white!important}#stage{width:100%;max-width:640px;margin:0 auto;touch-action:none}#stage svg{display:block;width:100%;height:auto;max-height:620px;user-select:none}#stage [data-object]{cursor:grab}.canvas-bottom{display:flex;align-items:center;justify-content:space-between;padding:0 22px;font:600 9px Manrope;letter-spacing:1px;color:#777}.canvas-bottom button{font:11px 'IBM Plex Sans Thai';padding:6px 9px;background:transparent}.preview-note{text-align:center;font-size:10px;color:#85847e;margin:14px 10px 18px}.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.two button{font-size:11px;margin-top:7px;padding:9px 4px}.danger{color:#a53120}.empty{padding:25px 8px;text-align:center;background:var(--paper);font-size:12px;color:var(--muted);line-height:1.9;border-radius:6px}.price{padding:16px 0}.price span{font-size:11px;color:var(--muted);display:block}.price strong{display:block;font-size:20px;margin-top:5px}.price p{font-size:10px;line-height:1.8;color:var(--muted);margin:7px 0 0}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:#a93805;color:#fff}footer{display:flex;align-items:center;gap:20px;margin-top:30px;padding:23px 0;border-top:1px solid var(--line);font:700 10px Manrope;letter-spacing:1px}footer span{color:#888;font-size:9px}footer button{margin-left:auto;font:11px 'IBM Plex Sans Thai';border:0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 22px;background:#181b22;color:white;border-radius:8px;box-shadow:0 5px 30px #0002;display:none;z-index:10;max-width:90vw}.inspector output{float:right;color:var(--accent)}@media(min-width:1450px){.studio{grid-template-columns:290px 1fr 300px}.panel{padding:24px}}@media(max-width:1050px){main{padding:24px 18px 0}header{padding:0 20px}.studio{grid-template-columns:225px 1fr}.inspector{grid-column:1/-1;display:block}.canvas-panel{position:static}.inspector #objectControls{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}.inspector .price{padding:0}.inspector .wide{max-width:320px;margin-right:10px}.heading h1{font-size:27px}}@media(max-width:650px){header{height:74px;padding:0 16px;gap:10px}.brand{font-size:18px}.brand img{width:40px;height:40px}.brand small{font-size:6px}.local{display:none}.back{font-size:11px}.heading{display:block}.heading h1{font-size:25px}.heading p:not(.eyebrow){font-size:12px}.tools{margin-top:18px}.tools button{font-size:12px}.studio{display:flex;flex-direction:column;gap:16px}.studio>*{width:100%}.canvas-panel{order:-1}.canvas-top{padding:16px}#stage svg{max-height:460px}.panel{padding:19px}.inspector #objectControls{grid-template-columns:1fr 1fr}.inspector #objectControls>label:first-child{grid-column:1/-1}.inspector .wide{max-width:none}.canvas-bottom{padding:0 16px}footer span{display:none}}
[hidden]{display:none!important}.catalog-link{display:block;font-size:11px;color:var(--accent);margin:10px 0;text-underline-offset:3px}.size-details{border:1px solid var(--line);border-radius:7px;padding:10px;font-size:12px}.size-details summary{cursor:pointer;color:var(--accent)}.size-details table{width:100%;border-collapse:collapse;margin-top:10px;font-size:11px}.size-details th,.size-details td{padding:7px 5px;text-align:left;border-bottom:1px solid var(--line)}.size-details th{background:var(--paper)}.types{gap:6px}.types button{font-size:12px;padding:10px 8px}.types small{font-size:7px;letter-spacing:0}.types button:last-child:nth-child(odd){grid-column:1/-1}.label-row{align-items:start;gap:8px}#colorName{text-align:right;max-width:140px}

.sublimation-choice{width:100%;text-align:left;margin:0 0 18px;background:#fff7ef;color:var(--accent);font-size:12px;border-color:#efcbb4}.sublimation-choice small{display:block;font-size:10px;margin-top:5px}.admin-panel{grid-column:span 2;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:40px;text-align:center}.admin-panel h2{font-size:38px;line-height:1.4;margin:14px 0 24px}.admin-panel h2 em{font-style:normal;color:var(--accent)}.admin-panel>img{width:min(100%,560px);height:280px;object-fit:cover;border-radius:10px}.admin-panel>p{line-height:1.9;color:var(--muted)}.admin-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0}.admin-actions a{border:1px solid var(--accent);border-radius:7px;padding:12px 20px;text-decoration:none}.admin-actions .primary{color:white}.admin-actions a:not(.primary){color:var(--accent);background:white}@media(max-width:1050px){.admin-panel{grid-column:auto;padding:25px}.admin-panel h2{font-size:30px}}

.size-quantity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}.size-quantity-row input{width:82px}#sizeQuantities strong{display:block;margin-top:16px}input[readonly]{background:#eee}

.design-help{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;margin-bottom:20px;background:#fff3eb;border:1px solid #f0cdb9;border-radius:12px}.design-help p{margin:5px 0 0;color:#656976}.design-help a{background:#c94708;color:white;padding:11px 17px;border-radius:7px;text-decoration:none;white-space:nowrap}@media(max-width:650px){.design-help{align-items:flex-start;flex-direction:column}}

.tools{flex-wrap:wrap}#artWarning{color:#a93805;padding:0 20px;text-align:center}.hint{font-size:12px}.swatches button{min-width:32px;min-height:32px}

/* Direct mobile artwork controls */
.mobile-art-tools{display:none}
@media(max-width:650px){
 .mobile-art-tools{display:block;padding:8px 12px 14px;text-align:center}
 .mobile-art-tools>span{display:block;font-size:12px;color:#555;margin-bottom:8px}
 .mobile-art-tools>div{display:flex;justify-content:center;gap:8px}
 .mobile-art-tools button{min-height:44px;padding:8px 12px;font-size:14px}
 button,.views button,.tools button{min-height:44px}
 input:not([type=range]):not([type=color]),select{font-size:16px;min-height:44px}
 input[type=range]{min-height:32px}
 .swatches button{min-width:36px;min-height:36px}
 .swatches{gap:10px}
 .hint,.preview-note{font-size:12px}
 .views{flex-wrap:wrap}
 .tools{display:flex;flex-wrap:wrap;gap:8px}
 .canvas-top{gap:6px;letter-spacing:.5px}
 .canvas-bottom{gap:8px;flex-wrap:wrap}
 .inspector #objectControls{grid-template-columns:1fr}
 #stage svg{max-height:46svh;min-height:240px}
 .heading h1{overflow-wrap:anywhere}
}

/* Compact workspace on phones only: preview stays visible above scrollable tools. */
.mobile-sections{display:none}
@media(max-width:650px){
 html,body{height:100%;overflow:hidden}
 body{height:100dvh;display:flex;flex-direction:column}
 header{height:48px;min-height:48px;padding:4px 12px}
 .brand{font-size:14px}.brand img{width:30px;height:30px}.brand small{display:none}
 .back{font-size:11px}
 main{padding:0 8px 0;min-height:0;flex:1;display:flex;flex-direction:column}
 .heading{margin:0;padding:0;flex:none}.heading>div:first-child{display:none}
 .heading .tools{margin:0;padding:4px 0;display:flex;gap:4px;flex-wrap:nowrap}
 .tools button{flex:1;min-width:0;min-height:36px;font-size:11px;padding:5px 3px}
 .design-help,main>footer{display:none}
 .studio{flex:1;min-height:0;gap:0;overflow:hidden}
 .canvas-panel{order:-2;flex:none;height:43dvh;min-height:260px;max-height:420px;display:flex;flex-direction:column;border-radius:10px 10px 0 0}
 .canvas-top{padding:5px 10px;font-size:9px;flex:none}.canvas-top .badge{font-size:9px;padding:2px 4px;white-space:nowrap}
 .views{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:0 7px;flex:none}
 .views button{min-width:0;min-height:36px;padding:4px 2px;font-size:12px;white-space:nowrap}
 #stage{flex:1;min-height:0;overflow:hidden;max-width:none;display:flex;align-items:center;justify-content:center}
 #stage svg{width:100%;height:100%;min-height:0;max-height:100%;flex:1}
 .mobile-art-tools{padding:3px 6px 5px;flex:none}.mobile-art-tools>span{font-size:10px;margin:0 0 3px}
 .mobile-art-tools button{min-height:34px;font-size:12px;padding:4px 12px}
 .canvas-bottom,.canvas-panel>.preview-note{display:none}
 #artWarning:empty{display:none}#artWarning{font-size:10px;line-height:1.3;margin:0;padding:2px 6px}
 .mobile-sections{display:grid;grid-template-columns:repeat(4,1fr);flex:none;order:-1;border:1px solid var(--line);background:#fff;gap:0}
 .mobile-sections button{border:0;border-radius:0;min-height:46px;padding:5px 2px;font-size:12px;background:#fff;color:#555}
 .mobile-sections button[aria-pressed=true]{background:#fff0e6;color:#ad3904;box-shadow:inset 0 -3px #c94708;font-weight:700}
 .studio>.panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px;border-radius:0 0 10px 10px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
 .studio[data-mobile-section=product]>.inspector,.studio[data-mobile-section=add]>.inspector{display:none}
 .studio[data-mobile-section=edit]>.panel:not(.inspector),.studio[data-mobile-section=order]>.panel:not(.inspector){display:none}
 .studio[data-mobile-section=product] [data-mobile-group=add],.studio[data-mobile-section=add] [data-mobile-group=product],.studio[data-mobile-section=edit] [data-mobile-group=order],.studio[data-mobile-section=order] [data-mobile-group=edit]{display:none!important}
 .panel .divider{display:none}.panel .section-title{margin-bottom:8px}.panel h2{font-size:15px}
 .panel label{margin-top:10px}.panel .types{grid-template-columns:repeat(3,1fr);gap:6px}
 .types button{padding:7px;font-size:12px}.types small{font-size:8px}
 .admin-panel{flex:1;min-height:0;overflow:auto;padding:16px}.admin-panel>img{height:100px}
 #toast{bottom:12px;font-size:12px}
}
@media(max-width:650px) and (max-height:580px){.canvas-panel{height:40dvh;min-height:170px}.canvas-top,.mobile-art-tools>span{display:none}}

.expand-preview{display:none}
@media(max-width:650px){
 .canvas-top .badge{display:none}
 .expand-preview{display:block;min-height:34px;padding:4px 8px;font-size:12px;letter-spacing:0;color:#ad3904;white-space:nowrap}
 .canvas-panel.preview-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100dvh;min-height:0;max-height:none;border-radius:0;background:#f6f5f2;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .preview-expanded .canvas-top{display:flex;padding:8px 12px}
 .preview-expanded .expand-preview{min-height:44px}
 .preview-expanded #stage svg{transform:scale(1.15)}
 .preview-expanded .mobile-art-tools{padding-bottom:14px}
 .preview-expanded .mobile-art-tools button{min-height:44px}
}

.mobile-send-bar{display:none}
@media(max-width:650px){
 .mobile-send-bar{display:block;flex:none;padding:7px 2px max(7px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e4e2dd}
 .mobile-send-bar button{width:100%;min-height:46px;font-size:16px;font-weight:700;background:#087c42;border-color:#087c42;color:white}
 .mobile-send-bar small{display:block;text-align:center;font-size:10px;color:#666;line-height:1.4;padding-top:4px}
 .canvas-panel:not(.preview-expanded){height:38dvh;min-height:225px}
}
@media(max-width:650px) and (max-height:580px){.canvas-panel:not(.preview-expanded){height:34dvh;min-height:150px}}

.share-design-dialog{width:min(94vw,560px);max-height:90dvh;overflow:auto;border:0;border-radius:14px;padding:20px;color:#181b22;box-shadow:0 10px 50px #0005}
.share-design-dialog::backdrop{background:#0009}.share-design-dialog h2{font-size:21px;margin:12px 0}.share-close{float:right}.share-status,.share-help{font-size:13px;line-height:1.6}.share-preview{display:block;max-width:100%;max-height:42dvh;margin:12px auto;object-fit:contain;border:1px solid #ddd}.share-preview[hidden]{display:none}.share-design-dialog>button:not(.share-close){width:100%;margin-top:8px;min-height:46px}.share-design-dialog [hidden]{display:none!important}