/* Toan Personalize v2 */
.tp-card{--tp-accent:#f06724;--tp-line:#e3ddd5;--tp-muted:#6f6a63;margin:14px 0 16px;border-radius:14px;overflow:hidden;background:#f7f3ee}
/* JR/MA band: 40px, radius 8, orange fading to nothing on the right, 16px/600, sparkle at 24px */
.tp-band{display:flex;align-items:center;gap:8px;height:40px;padding:8px;border-radius:8px;margin:0 0 12px;color:#fff;font-size:16px;font-weight:600;line-height:24px;letter-spacing:.2px;background:linear-gradient(270deg,rgba(242,238,231,0),rgb(240,103,36))}
.tp-spark{flex:none;width:24px;height:24px;display:block}
.tp-spark path{fill:#fff;transform-origin:center;transform-box:fill-box;animation:tp-twinkle 1.6s ease-in-out infinite}
.tp-spark path:nth-child(2){animation-delay:.5s}.tp-spark path:nth-child(3){animation-delay:1s}
@keyframes tp-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.tp-spark path{animation:none}}
.tp-body{padding:0 16px 16px}
@media (max-width:600px){.tp-body{padding:0 12px 12px}}
.tp-sub{font-size:13.5px;color:#3b3631;margin:0 0 10px}
.tp-sub b{font-weight:600}
.tp-restore{font-size:13px;background:#fff;border:1px solid var(--tp-line);border-radius:8px;padding:8px 10px;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.tp-restore[hidden]{display:none!important}
.tp-restore button{border:0;background:none;color:var(--tp-accent);font-weight:600;padding:0;margin:0;cursor:pointer;text-decoration:underline;min-height:0;line-height:1.3;text-transform:none;font-size:13px}
.tp-lab{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:13.5px;margin:12px 0 6px}
.tp-lab small{font-weight:400;color:var(--tp-muted)}
.tp-row-name{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--tp-line);border-radius:10px;padding:4px 6px 4px 8px;margin:0 0 8px}
.tp-row-name.is-active{border-color:var(--tp-accent);box-shadow:0 0 0 3px rgba(240,103,36,.14)}
.tp-num{flex:none;width:22px;height:22px;border-radius:50%;background:#efe9e1;color:#3b3631;font:600 12px/22px system-ui,sans-serif;text-align:center}
.tp-row-name.is-active .tp-num{background:var(--tp-accent);color:#fff}
.tp-card .tp-name{flex:1;min-width:0;font-size:16px;margin:0;height:38px;padding:6px 4px;border:0;box-shadow:none;background:transparent;outline:none}
.tp-cnt{flex:none;font-size:12px;color:var(--tp-muted)}
.tp-cnt.is-over{color:#a3291c;font-weight:700}
.tp-card .tp-del{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#8a837b;font-size:20px;line-height:1;padding:0;margin:0;cursor:pointer;min-height:0}
.tp-card .tp-del:hover{background:#f2ece5;color:#1d1b19}
.tp-card .tp-add{display:inline-flex;align-items:center;gap:6px;border:1px dashed #cfc5b9;background:transparent;border-radius:10px;padding:8px 12px;font-size:14px;color:#3b3631;cursor:pointer;margin:0 0 4px;min-height:0;line-height:1.3;text-transform:none;font-weight:600}
.tp-card .tp-add[hidden]{display:none}
.tp-card .tp-add:hover{border-color:var(--tp-accent);color:var(--tp-accent)}
.tp-warn{color:#a3291c;font-size:12.5px;min-height:15px;margin:0 0 2px}
.tp-more[hidden]{display:none!important}
.tp-editing{font-weight:700;font-size:14px;margin:10px 0 0}
.tp-fonts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
@media (max-width:420px){.tp-fonts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tp-card button{margin:0;min-height:0;line-height:1.3;text-transform:none;letter-spacing:0}
.tp-fonts button{border:1px solid var(--tp-line);background:#fff;border-radius:8px;padding:7px 3px 5px;cursor:pointer;overflow:hidden;color:#1d1b19;font-weight:400}
.tp-fonts button span{display:block;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-fonts button em{display:block;font:11px/1.3 system-ui,sans-serif;color:var(--tp-muted);margin-top:2px;font-style:normal}
.tp-fonts button[aria-pressed=true],.tp-seg button[aria-pressed=true],.tp-zseg button[aria-pressed=true]{border-color:var(--tp-accent);box-shadow:0 0 0 2px var(--tp-accent) inset}
.tp-colors{display:flex;flex-wrap:wrap;gap:8px}
.tp-colors button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(0,0,0,.25);cursor:pointer;padding:0}
.tp-colors button[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--tp-accent)}
.tp-seg,.tp-zseg{display:flex;gap:6px}
.tp-zseg{margin:0 0 12px}
.tp-zseg button{flex:1;border:1px solid var(--tp-line);background:#fff;border-radius:8px;padding:9px 7px;cursor:pointer;font-size:14px;color:#1d1b19;font-weight:600}
.tp-zseg small{font-weight:400;color:#6b6b6b;font-size:12px}
.tp-seg button{flex:1;border:1px solid var(--tp-line);background:#fff;border-radius:8px;padding:7px;cursor:pointer;font-size:13.5px;color:#1d1b19;font-weight:400}
.tp-row{display:grid;grid-template-columns:60px 1fr;gap:10px;align-items:center;font-size:13px;color:var(--tp-muted);margin:2px 0}
.tp-row input{width:100%;accent-color:var(--tp-accent);margin:0;border:0;box-shadow:none;padding:0;height:24px;background:transparent}
.tp-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tp-btns button{border:1px solid var(--tp-line);background:#fff;border-radius:8px;padding:7px 11px;cursor:pointer;font-size:13.5px;color:#1d1b19;font-weight:400}
.tp-btns .tp-see{display:none;background:#1d1b19;color:#fff;border-color:#1d1b19}
@media (max-width:999px){.tp-btns .tp-see{display:inline-block}}
.tp-hint{font-size:12.5px;color:var(--tp-muted);margin:8px 0 0}
.tp-card .tp-preview-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:11px;border:1.5px solid #1b1b1b;border-radius:10px;background:#fff;color:#1b1b1b;font-size:15px;font-weight:600;cursor:pointer}
.tp-card .tp-preview-btn:hover{background:#1b1b1b;color:#fff}

/* overlay on the product photo */
.tp-stage{position:absolute;z-index:6;pointer-events:none;user-select:none;-webkit-user-select:none}
.tp-stage.tp-active{pointer-events:auto;touch-action:none}
.tp-plane{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;max-width:none!important}
.tp-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tp-box,.tp-line{fill:none;stroke:#f06724;stroke-width:2;vector-effect:non-scaling-stroke}
.tp-hit{position:absolute;pointer-events:auto;touch-action:none;cursor:move}
@media (pointer:coarse){.tp-hit::before{content:"";position:absolute;inset:-14px}}
.tp-h{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;border:2px solid #f06724;box-shadow:0 1px 5px rgba(0,0,0,.4);pointer-events:auto;touch-action:none;cursor:nwse-resize;z-index:3}
.tp-h.tp-rot{background:#f06724;color:#fff;display:grid;place-items:center;font-size:14px;line-height:1;cursor:grab}
.tp-done{display:none;position:absolute;right:10px;bottom:10px;z-index:4;pointer-events:auto;border:0;border-radius:20px;background:#1d1b19;color:#fff;padding:7px 16px;font-size:14px;margin:0;min-height:0;line-height:1.3}
@media (max-width:999px){.tp-stage.tp-sel .tp-done{display:block}}
body.tp-on .woocommerce-product-gallery .zoomImg{display:none!important}
.tp-cart-thumb{object-fit:cover}

/* shared view: product photo + warped name layer */
.tp-view{position:relative;flex:none;overflow:hidden;background:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tp-view>img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;object-fit:fill}
.tp-view>.tp-plane{z-index:1}

/* phone/tablet drawer — parked above the viewport and slid down (JR/MA) */
.tp-mini{position:fixed;left:0;right:0;top:-280px;z-index:9990;display:flex;transition:top .3s ease-out;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 4px 16px rgba(0,0,0,.1);cursor:pointer;font:inherit}
.tp-mini.is-on{top:0}
.tp-mini .tp-view{border-radius:8px}
.tp-mini-label{font-size:13px;font-weight:600;color:#181818;line-height:1.25}
.tp-mini-label small{display:block;font-weight:400;color:#6b6b6b;font-size:12px}
.tp-mini--big{padding:0;height:260px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:zoom-in}
.tp-mini--big .tp-mini-stage{flex:1;height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;-webkit-overflow-scrolling:touch}
.tp-mini--big .tp-view{border-radius:0;margin:auto}
.tp-mini--big .tp-mini-label{display:none}
.tp-mini-hint{display:none;position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;white-space:nowrap;padding:4px 10px;border-radius:12px;background:rgba(29,27,25,.72);color:#fff;font-size:12px;line-height:1.3;pointer-events:none;transition:opacity .6s}
.tp-mini-hint.is-gone{opacity:0}
.tp-mini--big .tp-mini-hint{display:block}
.tp-mini-zooms{display:none;position:absolute;right:10px;bottom:12px;flex-direction:column;gap:12px}
.tp-mini--big .tp-mini-zooms{display:flex}
.tp-mini-zbtn{width:44px;height:44px;border:1px solid rgba(0,0,0,.15);border-radius:10px;background:#fff;font-size:20px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);margin:0;padding:0;color:#181818;min-height:0}
.tp-mini-close{display:none;position:absolute;right:10px;top:8px;width:44px;height:44px;border:0;background:transparent;font-size:26px;line-height:1;color:#181818;cursor:pointer;margin:0;padding:0;min-height:0}
.tp-mini--big .tp-mini-close{display:block}
@media (min-width:1000px){.tp-mini{display:none!important}}
html.tp-mini-on{scroll-padding-top:272px}
html.tp-mini-slim{scroll-padding-top:84px}

/* preview popup */
.tp-lb{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:16px}
.tp-lb-card{position:relative;background:#fff;border-radius:16px;padding:18px 20px 16px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.tp-lb-head{display:flex;align-items:center;gap:8px;color:#1b1b1b}
.tp-lb-head h3{margin:0;font-size:19px;font-weight:700}
.tp-lb-sub{margin:4px 0 12px;font-size:13.5px;color:#5c5650}
.tp-lb-stage{overflow:auto;border-radius:10px;background:#f4f1ec;display:flex;max-height:62vh}
.tp-lb-stage .tp-view{margin:auto}
.tp-lb-zoom{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 4px}
.tp-lb-zoom button{width:36px;height:36px;border-radius:50%;border:1px solid #ddd;background:#fff;font-size:18px;cursor:pointer;margin:0;padding:0;line-height:1;color:#1b1b1b;min-height:0}
.tp-lb-zoom span{font-size:12px;color:#6b6b6b;min-width:44px;text-align:center}
.tp-lb-note{display:flex;align-items:center;gap:6px;font-size:13px;color:#2f2b27;margin:6px 0}
.tp-lb-actions{display:flex;gap:10px;margin-top:12px}
.tp-lb-actions button{flex:1;border-radius:10px;padding:12px;font-size:15px;font-weight:700;cursor:pointer;margin:0;min-height:0;line-height:1.3;text-transform:none}
.tp-lb-buy{background:#ff4d00;color:#fff;border:0}
.tp-lb-close{background:#fff;color:#1b1b1b;border:1.5px solid #1b1b1b}

/* Stan Smith: two shoes + stripe/heel colours */
.tp-pairbox{margin:4px 0 10px}
.tp-pairbox .tp-zseg{margin:8px 0 0}
.tp-check{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.35;cursor:pointer;margin:6px 0}
.tp-check input{margin:3px 0 0;flex:none;width:18px;height:18px;accent-color:var(--tp-accent)}
.tp-check small{display:block;color:#6b6b6b;font-size:12px}
.tp-shoecol{border-top:1px solid var(--tp-line);margin:14px 0 6px;padding-top:12px}
.tp-lab--big{font-size:15px}
.tp-parts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tp-parts button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--tp-line);background:#fff;border-radius:18px;padding:6px 11px;font-size:13px;color:#1d1b19;cursor:pointer;margin:0;min-height:0;line-height:1.2;font-weight:500}
.tp-parts button[aria-pressed=true]{border-color:var(--tp-accent);box-shadow:0 0 0 2px var(--tp-accent) inset}
.tp-parts i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.25);display:inline-block}
.tp-parts i.is-orig{background:linear-gradient(135deg,#fff 45%,#d33 46%,#d33 54%,#fff 55%)!important}
.tp-scolors{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px}
.tp-scolors button{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);cursor:pointer;padding:0;margin:0;min-height:0}
.tp-scolors button[aria-pressed=true]{box-shadow:0 0 0 2px var(--tp-accent)}
.tp-scolors .tp-orig{width:auto;border-radius:15px;padding:0 10px;font-size:12px;background:#fff;color:#1d1b19;border:1px solid var(--tp-line);box-shadow:none}
.tp-sseg{display:flex;gap:6px;margin:6px 0 8px}
.tp-sseg button{flex:1;border:1px solid var(--tp-line);background:#fff;border-radius:8px;padding:8px;font-size:13.5px;cursor:pointer;margin:0;min-height:0;color:#1d1b19}
.tp-sseg button[aria-pressed=true]{border-color:var(--tp-accent);box-shadow:0 0 0 2px var(--tp-accent) inset}
.tp-creset{background:none;border:0;color:#6b6b6b;text-decoration:underline;font-size:13px;padding:2px 0;margin:2px 0 0;min-height:0;cursor:pointer}
.tp-rc{position:absolute;z-index:5;pointer-events:none;max-width:none!important}
.tp-plane2{pointer-events:none}
.tp-zseg[hidden],.tp-sseg[hidden],.tp-pairbox[hidden],.tp-shoecol[hidden]{display:none!important}

/* fine-tune buttons */
.tp-nudge{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:4px 0 12px}
.tp-nudge button{display:flex;align-items:center;justify-content:center;height:40px;margin:0;padding:0;min-height:0;border:1px solid var(--tp-line);border-radius:8px;background:#fff;color:#1d1b19;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.tp-nudge button:hover{border-color:var(--tp-accent);color:var(--tp-accent)}
.tp-nudge button:active{background:#fdf0e8;transform:scale(.96)}
@media (max-width:380px){.tp-nudge{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* phones & tablets: touch-sized controls (15/10) */
@media (max-width:999px){
	.tp-nudge{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
	.tp-nudge button{height:46px;border-radius:10px}
	.tp-nudge svg{width:22px;height:22px}
	.tp-btns{display:flex;flex-wrap:wrap;gap:8px}
	.tp-btns button{min-height:42px;padding:8px 14px}
	.tp-colors{gap:9px}
	.tp-colors button{width:34px;height:34px}
	.tp-seg button,.tp-zseg button{min-height:42px}
}

/* Stan Smith 15/10: designer note, name area outline, free colour picker */
.tp-dnote{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#fff7f1;border:1px solid #f6d3bf;color:#5a4636;font-size:12.5px;line-height:1.45}
.tp-dnote svg{flex:none;margin-top:1px;color:var(--tp-accent)}
.tp-scolors .tp-cpick,.tp-colors .tp-cpick{position:relative;background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.tp-scolors .tp-cpick i,.tp-colors .tp-cpick i{position:absolute;inset:6px;border-radius:50%;background:var(--tp-cpick,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.tp-scolors .tp-cpick:not([aria-pressed=true]) i,.tp-colors .tp-cpick:not([aria-pressed=true]) i{background:#fff}
.tp-scolors .tp-cpick:not([aria-pressed=true]) i::before,.tp-scolors .tp-cpick:not([aria-pressed=true]) i::after,.tp-colors .tp-cpick:not([aria-pressed=true]) i::before,.tp-colors .tp-cpick:not([aria-pressed=true]) i::after{content:"";position:absolute;left:50%;top:50%;background:#1d1b19;transform:translate(-50%,-50%);border-radius:1px}
.tp-scolors .tp-cpick:not([aria-pressed=true]) i::before,.tp-colors .tp-cpick:not([aria-pressed=true]) i::before{width:9px;height:2px}
.tp-scolors .tp-cpick:not([aria-pressed=true]) i::after,.tp-colors .tp-cpick:not([aria-pressed=true]) i::after{width:2px;height:9px}
.tp-colors + .tp-picker{margin-top:10px}
.tp-picker{background:#fff;border:1px solid var(--tp-line);border-radius:10px;padding:10px;margin:2px 0 10px}
.tp-picker[hidden]{display:none!important}
.tp-sv{position:relative;height:150px;border-radius:8px;cursor:crosshair;touch-action:none;background-image:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0))}
.tp-hue{position:relative;height:18px;margin:12px 0 10px;border-radius:9px;cursor:pointer;touch-action:none;background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}
.tp-sv i,.tp-hue i{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.3);pointer-events:none}
.tp-hue i{top:50%;background:transparent}
.tp-pick-row{display:flex;align-items:center;gap:10px}
.tp-pick-chip{width:28px;height:28px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.tp-pick-hex{font:600 13px/1 ui-monospace,Menlo,Consolas,monospace;color:#3b3631}
.tp-pick-done{margin:0 0 0 auto;border:1px solid var(--tp-line);background:#1d1b19;color:#fff;border-radius:8px;padding:7px 16px;font-size:13.5px;cursor:pointer;min-height:0}
@media (max-width:999px){.tp-sv{height:170px}.tp-hue{height:24px}.tp-pick-done{min-height:42px}.tp-scolors button{width:34px;height:34px}.tp-scolors .tp-cpick i,.tp-colors .tp-cpick i{inset:7px}}

/* desktop, 2 columns: the photo stays in view while the panel scrolls (owner 15/10) */
@media (min-width:850px){.product-gallery.tp-gsticky{position:sticky;top:var(--tp-gtop,12px);align-self:flex-start;transition:top .25s ease}}