:root{--pd-accent:#ff6f50;--pd-accent-dark:#e85b3d;--pd-ink:#171513;--pd-muted:#756e69;--pd-line:#e6dfda;--pd-soft:#fff7f3;--pd-panel:#fbfaf9;--pd-ok:#23884b;--pd-warn:#ad7a00;--pd-bad:#bf3b27}
#pd-designer,#pd-designer *{box-sizing:border-box}
#pd-designer{color:var(--pd-ink);font-family:inherit}
#pd-designer button,#pd-designer input,#pd-designer select{font:inherit;color:var(--pd-ink)}
#pd-designer button{cursor:pointer}
#pd-designer [hidden]{display:none!important}

/* Keep WooCommerce's original gallery/images untouched. Only hide the native cart controls because the full-width designer owns the CTA. */
.pd-designer-product .summary form.cart .quantity,.pd-designer-product .summary form.cart .single_add_to_cart_button{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;pointer-events:none!important}
.pd-designer-product .summary form.cart{min-height:0!important;margin-bottom:0!important}

.pd-section{clear:both;width:100%;margin:38px 0 24px;padding:0 14px}
.pd-shell{width:min(1240px,100%);margin:0 auto}
#pd-designer{width:100%;padding:22px;border:1px solid var(--pd-line);border-radius:22px;background:#fff;box-shadow:0 14px 44px rgba(56,35,24,.055)}
.pd-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding:2px 2px 20px;margin-bottom:22px;border-bottom:1px solid #eee8e4}
.pd-kicker{display:inline-block;margin-bottom:6px;color:var(--pd-accent);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.pd-heading h2{margin:0 0 7px!important;font-size:30px!important;line-height:1.1!important;text-transform:uppercase}
.pd-heading p{max-width:780px;margin:0;color:var(--pd-muted);font-size:14px;line-height:1.55}
.pd-zone-pill{min-width:190px;padding:12px 15px;border:1px solid #eadfd9;border-radius:14px;background:var(--pd-soft);display:flex;flex-direction:column;gap:2px;text-align:right}
.pd-zone-pill span{font-size:10px;font-weight:900;letter-spacing:.12em;color:#a47d70}.pd-zone-pill strong{font-size:18px}.pd-zone-pill small{font-size:11px;color:#867c76}

.pd-main-grid{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(520px,1.12fr);gap:22px;align-items:start}
.pd-card{min-width:0;border:1px solid var(--pd-line);border-radius:18px;background:#fff;padding:18px}
.pd-card-title{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}
.pd-card-title h3,.pd-canvas-top h3{margin:5px 0 0!important;font-size:21px!important;line-height:1.15!important}
.pd-step{display:inline-flex;padding:4px 8px;border-radius:999px;background:#fff0eb;color:#e75d40;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.pd-live-dot{font-size:10px;font-weight:900;letter-spacing:.08em;color:#25844a}

.pd-product-preview,.pd-mug-stage{position:relative;width:100%;border:1px solid #eee8e4;border-radius:15px;overflow:hidden;background:radial-gradient(circle at 50% 44%,#fff 0,#f8f5f2 64%,#efeae6 100%)}
.pd-product-preview{aspect-ratio:16/9}.pd-mug-stage{aspect-ratio:16/10}
.pd-product-preview>img,.pd-preview-product{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.pd-preview-canvas,#pd-mug-fallback canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.pd-side-badge{position:absolute;z-index:4;left:12px;bottom:12px;padding:6px 9px;border-radius:999px;background:rgba(23,21,19,.86);color:#fff;font-size:10px;font-weight:900;letter-spacing:.08em}
.pd-preview-note{margin:10px 2px 0;color:#7d756f;font-size:11px;line-height:1.5}
.pd-engrave .pd-preview-canvas{mix-blend-mode:multiply}

.pd-three-stage{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}.pd-three-stage:active{cursor:grabbing}.pd-three-stage canvas{display:block;width:100%!important;height:100%!important}
.pd-mug-controls{margin-top:10px;padding:10px;border:1px solid #eee6e1;border-radius:12px;background:#fcfbfa}
.pd-mug-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pd-mug-presets button{min-height:38px;border:1px solid #ddd5cf;border-radius:9px;background:#fff;font-size:10px;font-weight:850}.pd-mug-presets button.active{background:#171513!important;color:#fff!important;border-color:#171513}
.pd-mug-controls p{margin:8px 2px 0;color:#7c746f;font-size:10px;line-height:1.45}

.pd-history{display:flex;gap:6px}.pd-history button{height:36px;padding:0 10px;border:1px solid #ddd5cf;border-radius:8px;background:#fff;font-size:10px;font-weight:850}.pd-history button:disabled{opacity:.4;cursor:not-allowed}
.pd-tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:8px}
.pd-tool{position:relative;min-height:70px;border:1px solid #ddd5cf!important;border-radius:12px!important;background:#fff!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;padding:8px!important;color:#171513!important;text-shadow:none!important;box-shadow:none!important}
.pd-tool:hover{border-color:var(--pd-accent)!important;background:#fff9f7!important}.pd-tool>span{font-size:24px;line-height:1}.pd-tool>b{font-size:10px;line-height:1.15}.pd-tool em{position:absolute;right:6px;top:5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#171513;color:#fff;font-size:9px;font-style:normal;display:grid;place-items:center}
.pd-upload-status{min-height:18px;margin:0 2px 6px;color:#6f6863;font-size:10px}

.pd-drawer{margin:8px 0 13px;padding:13px;border:1px solid #e8e0db;border-radius:13px;background:#fcfbfa}
.pd-drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.pd-drawer-head strong{font-size:13px}.pd-drawer-close{width:30px;height:30px;border:0!important;border-radius:8px!important;background:#eeeae7!important;color:#171513!important;font-size:19px!important;line-height:1!important}
.pd-drawer input[type=text],.pd-drawer input[type=number],.pd-drawer select{width:100%;height:40px;border:1px solid #d9d1cc;border-radius:8px;background:#fff;padding:0 10px;color:#171513}
.pd-text-options{display:grid;grid-template-columns:1.5fr .7fr .65fr;gap:8px;margin:9px 0}.pd-text-options label{display:flex;flex-direction:column;gap:4px;color:#716a65;font-size:9px;font-weight:850}.pd-text-options input[type=color]{width:100%;height:40px;border:1px solid #d9d1cc;border-radius:8px;background:#fff;padding:4px}
.pd-format{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}.pd-format button{min-width:42px;height:36px;padding:0 10px;border:1px solid #ddd5cf!important;border-radius:8px!important;background:#fff!important;color:#171513!important;font-size:10px!important;font-weight:800!important}.pd-format button.active{background:#171513!important;color:#fff!important;border-color:#171513!important}
.pd-primary{width:100%;height:42px;border:0!important;border-radius:9px!important;background:#171513!important;color:#fff!important;text-transform:uppercase;font-size:11px!important;font-weight:900!important;letter-spacing:.06em}

.pd-emojis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.pd-emoji{height:68px;border:1px solid #ddd5cf!important;border-radius:12px!important;background:#fff!important;color:#171513!important;font-size:32px!important;display:grid!important;place-items:center!important;padding:0!important}.pd-emoji:hover{border-color:var(--pd-accent)!important;transform:translateY(-1px)}
.pd-stickers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.pd-sticker{min-height:112px;border:1px solid #ddd5cf!important;border-radius:12px!important;background:#fff!important;padding:8px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:6px!important;color:#171513!important}.pd-sticker img{display:block;width:72px!important;height:72px!important;object-fit:contain}.pd-sticker span{font-size:9px!important;line-height:1.1!important;color:#66605c!important;text-align:center!important}.pd-sticker:hover{border-color:var(--pd-accent)!important;box-shadow:0 5px 16px rgba(0,0,0,.05)!important}

.pd-layers{display:flex;flex-direction:column;gap:6px}.pd-layer{display:grid;grid-template-columns:1fr 36px 36px 36px;gap:5px;padding:5px;border:1px solid #e2dad5;border-radius:9px;background:#fff}.pd-layer.active{border-color:var(--pd-accent);box-shadow:0 0 0 1px rgba(255,111,80,.14)}.pd-layer button{border:0!important;border-radius:7px!important;background:#f5f2f0!important;color:#171513!important;font-size:10px!important}.pd-layer-select{display:flex!important;align-items:center!important;gap:8px!important;text-align:left!important;padding:7px!important}.pd-layer-select i{display:grid;place-items:center;width:25px;height:25px;border-radius:6px;background:#fff;font-style:normal;font-weight:900}.pd-layer-select span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pd-empty{padding:18px;text-align:center;color:#817a75;font-size:11px}

.pd-canvas-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin:14px 0 8px}.pd-canvas-top p{margin:3px 0 0;color:#7b746e;font-size:10px}.pd-canvas-top>strong{font-size:12px;white-space:nowrap}
.pd-mug-map{display:grid;grid-template-columns:1fr 1fr 1fr;margin-bottom:5px;color:#9a8f88;font-size:8px;font-weight:900;letter-spacing:.04em;text-align:center}.pd-mug-map span:nth-child(2){color:#e75d40}
.pd-canvas-wrap{position:relative;width:100%;min-height:140px;padding:10px;border:1.5px dashed #bbb3ad;border-radius:13px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#f6f6f6 25%,transparent 25%),linear-gradient(-45deg,#f6f6f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f6f6f6 75%),linear-gradient(-45deg,transparent 75%,#f6f6f6 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.pd-canvas-wrap .canvas-container{display:block!important;margin:0 auto!important;max-width:100%!important;z-index:3}.pd-canvas-wrap canvas{display:block!important;max-width:100%!important}
.pd-safe-guide{position:absolute;z-index:6;border:1.5px dashed rgba(255,111,80,.95);border-radius:5px;pointer-events:none}.pd-safe-guide span{position:absolute;left:6px;top:5px;padding:2px 5px;border-radius:5px;background:rgba(255,255,255,.92);color:#e85c3e;font-size:8px;font-weight:900;letter-spacing:.06em}
.pd-center-v,.pd-center-h{position:absolute;z-index:5;pointer-events:none;opacity:.15}.pd-center-v{border-left:1px dashed #171513}.pd-center-h{border-top:1px dashed #171513}
.pd-canvas-help{margin:7px 2px 11px;color:#817974;font-size:10px;line-height:1.45}

.pd-selected{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px;border:1px solid #eee7e2;border-radius:11px;background:#faf8f6}.pd-selected>span{font-size:10px;font-weight:800;color:#6d6661;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pd-selected>div{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}.pd-selected button{min-height:34px;padding:0 9px;border:1px solid #ddd5cf!important;border-radius:8px!important;background:#fff!important;color:#171513!important;font-size:9px!important;font-weight:800!important}.pd-selected button.danger{color:#be3c2a!important}.pd-selected button:disabled{opacity:.35;cursor:not-allowed}

.pd-options-card{margin-top:20px}.pd-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pd-option{padding:12px;border:1px solid #e8e0db;border-radius:12px;background:#fcfbfa;min-width:0}.pd-option>label{display:block;margin-bottom:8px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.pd-option>small{display:block;margin-top:7px;color:#817974;font-size:9px;line-height:1.4}.pd-option select{width:100%;height:40px;border:1px solid #d9d1cc;border-radius:8px;background:#fff;padding:0 9px}
.pd-segment{display:grid;grid-template-columns:1fr 1fr;border:1px solid #ddd5cf;border-radius:8px;overflow:hidden}.pd-segment button{height:40px;border:0!important;background:#fff!important;color:#171513!important;font-size:10px!important;font-weight:850!important}.pd-segment button.active{background:#171513!important;color:#fff!important}
.pd-colors{display:flex;gap:8px;flex-wrap:wrap}.pd-product-color{height:38px;border:1px solid #ddd5cf!important;border-radius:9px!important;background:#fff!important;color:#171513!important;padding:4px 9px 4px 4px!important;display:flex!important;align-items:center!important;gap:6px!important;font-size:10px!important;font-weight:850!important}.pd-product-color i{width:27px;height:27px;border-radius:7px;background:var(--swatch);border:1px solid rgba(0,0,0,.13)}.pd-product-color.active{outline:2px solid var(--pd-accent);outline-offset:1px}
.pd-quality label{margin-bottom:4px}.pd-quality strong{display:block;font-size:13px}.pd-quality.good{background:#f2fbf5;border-color:#bee4ca}.pd-quality.good strong{color:var(--pd-ok)}.pd-quality.medium{background:#fff9e8;border-color:#e9d89a}.pd-quality.medium strong{color:var(--pd-warn)}.pd-quality.low{background:#fff0ed;border-color:#efb6aa}.pd-quality.low strong{color:var(--pd-bad)}

.pd-buybar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(250px,340px);gap:14px;align-items:center;margin-top:20px;padding:16px;border:1px solid #efdfd7;border-radius:16px;background:#fff7f3}.pd-buybar>div:first-child{display:flex;flex-direction:column;gap:3px}.pd-buybar>div:first-child strong{font-size:15px}.pd-buybar>div:first-child span{font-size:10px;color:#756e69;line-height:1.4}.pd-qty{display:grid;grid-template-columns:40px 58px 40px;height:46px;border:1px solid #ddd5cf;border-radius:9px;overflow:hidden;background:#fff}.pd-qty button,.pd-qty input{border:0!important;background:#fff!important;color:#171513!important;text-align:center;font-size:16px!important}.pd-qty input{width:58px;-moz-appearance:textfield}.pd-qty input::-webkit-outer-spin-button,.pd-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pd-buybar>button{height:48px;border:0!important;border-radius:10px!important;background:var(--pd-accent)!important;color:#fff!important;text-transform:uppercase;font-size:12px!important;font-weight:900!important;letter-spacing:.07em!important;padding:0 22px!important}.pd-buybar>button:hover{background:var(--pd-accent-dark)!important}.pd-buybar>button:disabled{opacity:.55;cursor:wait}

@media(max-width:1080px){.pd-main-grid{grid-template-columns:1fr}.pd-product-preview,.pd-mug-stage{max-width:860px;margin-inline:auto}.pd-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .pd-section{padding:0 8px;margin-top:24px}#pd-designer{padding:14px;border-radius:16px}.pd-heading{flex-direction:column;gap:12px}.pd-heading h2{font-size:24px!important}.pd-zone-pill{width:100%;text-align:left}.pd-card{padding:12px;border-radius:14px}.pd-card-title{align-items:flex-start;flex-direction:column}.pd-history{width:100%}.pd-history button{flex:1}.pd-tools{grid-template-columns:repeat(3,1fr)}.pd-tool{min-height:64px}.pd-text-options{grid-template-columns:1fr 1fr}.pd-text-options label:first-child{grid-column:1/-1}.pd-emojis{grid-template-columns:repeat(5,1fr)}.pd-stickers{grid-template-columns:repeat(3,1fr)}.pd-selected{align-items:flex-start;flex-direction:column}.pd-selected>div{justify-content:flex-start}.pd-options{grid-template-columns:1fr}.pd-buybar{grid-template-columns:1fr}.pd-qty{justify-self:start}.pd-buybar>button{width:100%}.pd-mug-stage{aspect-ratio:4/3}.pd-product-preview{aspect-ratio:16/9}.pd-mug-presets{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:480px){.pd-tools{grid-template-columns:repeat(2,1fr)}.pd-emojis{grid-template-columns:repeat(4,1fr)}.pd-stickers{grid-template-columns:repeat(2,1fr)}.pd-sticker{min-height:104px}.pd-canvas-top{align-items:flex-start;flex-direction:column}.pd-selected button{flex:1 1 30%}.pd-mug-presets{grid-template-columns:1fr}.pd-format button{flex:1 1 auto}}

/* 2.2 reliability / mockup layering */
.pd-load-error{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid #efb6aa;border-radius:12px;background:#fff0ed;color:#7b2d20}.pd-load-error strong{font-size:15px}.pd-load-error span{font-size:12px;line-height:1.45}
.pd-tools{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.pd-preview-overlay{position:absolute;inset:0;z-index:3;width:100%;height:100%;object-fit:contain;pointer-events:none}
.pd-side-badge{z-index:5}
.pd-selected>div{max-width:70%}
@media(max-width:760px){.pd-selected>div{max-width:100%}.pd-tools{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.pd-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pd-blend-multiply .pd-preview-canvas{mix-blend-mode:multiply}