:root{--preview-resize-duration:300ms;--preview-resize-ease:cubic-bezier(.22,1,.36,1);--picker-open-duration:250ms;--picker-close-duration:150ms;--picker-motion-ease:cubic-bezier(.22,1,.36,1)}
/* Keep the same controls mounted when a group collapses. */
main>aside{padding:20px 24px;overscroll-behavior:contain}
.design-panel{padding-bottom:18px;margin-bottom:0;border-bottom:0}
.design-panel h2{font-size:17px}
.design-actions{gap:6px;margin-top:10px}
.design-actions button{min-height:64px;padding:8px 4px;gap:5px}
.design-actions button svg{width:20px;height:20px}
#design-status:empty{display:none}
#design-empty{margin:10px 0 0}
.panel-disclosure{border-top:1px solid #e1e5dc}
.panel-disclosure>h2{margin:0;font-size:14px}
.panel-disclosure-trigger{position:relative;width:100%;padding:15px 28px 15px 0;display:grid;gap:3px;text-align:left;border-radius:0;font-weight:600}
.panel-disclosure-trigger small{font-size:12px;font-weight:400;color:#697064;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-disclosure-trigger:after{content:'';position:absolute;right:4px;top:22px;width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);transition:transform 220ms var(--motion-ease)}
.is-open>.panel-disclosure-trigger:after,.is-open>h2>.panel-disclosure-trigger:after{transform:rotate(225deg)}
.panel-disclosure-content{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows 240ms var(--motion-ease),opacity 180ms ease,visibility 240ms}
.is-open>.panel-disclosure-content{grid-template-rows:1fr;opacity:1;visibility:visible}
.panel-disclosure-inner{min-height:0;overflow:hidden}
.panel-disclosure-inner>.option-group,.panel-disclosure-inner>.colors{margin:0 0 16px}
.panel-disclosure-inner label{margin:8px 0}
.panel-disclosure-inner>.material{margin-bottom:16px}
.panel-disclosure-inner>#reset-cloth{margin:8px 0 18px!important}
.stage>.status{inset:0;display:grid;place-content:center;justify-items:center;gap:12px;z-index:10;margin:0;padding:24px;background:#f0f0e9;color:#535c50;text-align:center;pointer-events:none;transition:opacity 220ms ease,visibility 220ms}
.stage>.status:empty{opacity:0;visibility:hidden}
.loading-spinner{width:32px;height:32px;border:2px solid #d4d9cf;border-top-color:#364b3c;border-radius:50%;animation:preview-spin .85s linear infinite}
.loading-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes preview-spin{to{transform:rotate(360deg)}}
@media(min-width:761px){main>aside{height:100svh}}
@media(max-width:760px){main>aside{padding:16px 20px}.panel-disclosure-trigger{padding-block:13px}.design-actions button{min-height:60px}}
@media(prefers-reduced-motion:reduce){.panel-disclosure-content,.panel-disclosure-trigger:after,.stage>.status{transition:none}.loading-spinner{animation:none;border-style:dotted}}
.panel-disclosure-inner .color-picker-trigger{margin:0}
.panel-disclosure-inner fieldset>legend{margin-bottom:6px}
.panel-disclosure-inner{padding-inline:3px;margin-inline:-3px}
.color-picker-popover,.color-picker-popover[data-side]{transform:translateY(var(--picker-enter-y,8px)) scale(.96);transform-origin:bottom center;opacity:0;pointer-events:none;transition:opacity var(--picker-close-duration) var(--picker-motion-ease),transform var(--picker-close-duration) var(--picker-motion-ease),display var(--picker-close-duration) allow-discrete,overlay var(--picker-close-duration) allow-discrete}
.color-picker-popover:popover-open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;transition-duration:var(--picker-open-duration)}
@starting-style{.color-picker-popover:popover-open{opacity:0;transform:translateY(var(--picker-enter-y,8px)) scale(.96)}}
.color-picker-trigger:after{transition:transform 200ms var(--motion-ease)}
.color-picker-trigger[aria-expanded=true]:after{transform:rotate(225deg)}
@media(prefers-reduced-motion:reduce){.color-picker-popover{transform:none!important;transition:none!important}.color-picker-trigger:after{transition:none}}
/* A thin visible track with a comfortable pointer target. */
input[type="range"]{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:40px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:2px;border:0;border-radius:1px;background:#c3cbbf;box-shadow:none}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-7px;border:0;border-radius:50%;background:#364b3c;box-shadow:none}
input[type="range"]::-moz-range-track{height:2px;border:0;border-radius:1px;background:#c3cbbf;box-shadow:none}
input[type="range"]::-moz-range-progress{height:2px;border:0;background:#364b3c}
input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#364b3c;box-shadow:none}
input[type="range"]:focus-visible{outline:2px solid #315346;outline-offset:2px;border-radius:4px}
@media(pointer:coarse){input[type="range"]{height:44px}}
input[type="range"][hidden]{display:none}
.color-picker-popover>.font-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.font-picker-grid button{min-height:54px;padding:10px 6px;font-size:16px;line-height:1.25;border:1px solid #d8dcd3;border-radius:8px;box-shadow:none;overflow-wrap:anywhere;position:relative}
.font-picker-grid button[aria-pressed=true]{border-color:#364b3c;background:#f0f3ec}
.font-picker-grid button[aria-pressed=true]:after{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:#364b3c}
.drawer-body label[hidden]{display:none!important}
@media(max-width:760px){body.editor-open main>aside *{visibility:hidden!important}}
.product-heading{margin:0 0 22px}.product-heading h1{font-size:23px;line-height:1.2;margin:0 0 8px;letter-spacing:-.025em}.product-base-price{font-size:16px;color:#364b3c;margin:0;font-variant-numeric:tabular-nums}
.design-actions button{gap:4px;min-height:82px}.design-fee{font:500 11px/1.4 system-ui,sans-serif;color:#626b5d}
.added-designs,.order-summary{border-top:1px solid #e1e5dc;padding:18px 0}.added-designs h2,.order-summary h2{font-size:16px;margin:0 0 12px}.design-layers h3{font-size:12px;font-weight:500;color:#697064;margin:10px 0 2px}
.design-item{display:flex;border:1px solid #d8dcd3;border-radius:10px;overflow:hidden}.design-item>button{border:0;border-radius:0;box-shadow:none}.design-item>button:first-child{display:grid;gap:4px;flex:1;min-width:0;padding:11px 12px}.design-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.design-item small{font-size:11px;color:#68715f}.design-item .remove-design{flex:0 0 44px;padding:10px}.remove-design svg{width:18px;height:18px}.remove-design:hover{background:#f7eeeb;color:#963d2b}.design-item:focus-within{outline:2px solid #315346;outline-offset:2px}
.order-summary label{margin:0 0 8px}.quantity-control{display:flex;width:152px;border:1px solid #d8dcd3;border-radius:10px;overflow:hidden}.quantity-control button{width:44px;padding:8px;border-radius:0}.quantity-control button:disabled{opacity:.35;cursor:default}.quantity-control input{width:64px;min-width:0;border:0;background:transparent;text-align:center;font:inherit;appearance:textfield;-moz-appearance:textfield}.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#quantity-note,.estimate-note{font-size:12px;line-height:1.5;color:#697064;margin:8px 0 0}#quantity-error{font-size:12px;color:#963d2b}#quantity-error[hidden]{display:none}.order-summary dl{margin:20px 0 0;font-size:13px}.order-summary dl>div{display:flex;justify-content:space-between;gap:12px;margin:9px 0}.order-summary dd{margin:0;font-variant-numeric:tabular-nums}.order-summary .estimate-total{border-top:1px solid #e1e5dc;padding-top:14px;margin-top:14px;font-size:18px;font-weight:600}.estimate-total dt small{display:block;font-size:11px;font-weight:400;color:#697064}
@media(max-width:760px){
 body:not(.editor-open) .stage:not(.expanded):not(:fullscreen){--preview-full:max(400px,50svh);height:var(--preview-full);min-height:0;margin-bottom:0;transition:height var(--preview-resize-duration) var(--preview-resize-ease),margin-bottom var(--preview-resize-duration) var(--preview-resize-ease);overflow-anchor:none}
 body.preview-compact:not(.editor-open) .stage:not(.expanded):not(:fullscreen){--preview-small:clamp(180px,30svh,240px);height:var(--preview-small);margin-bottom:calc(var(--preview-full) - var(--preview-small))}
 body:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .tools{top:auto;bottom:28px;right:8px;transform:none;display:flex;gap:0;padding:2px;transition:bottom var(--preview-resize-duration) var(--preview-resize-ease)}
 body.preview-compact:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .tools{bottom:8px}
 body:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .tools button{width:40px;height:40px;min-width:40px;min-height:40px;padding:8px}
 body:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .hint{opacity:1;transition:opacity 180ms ease}
 body.preview-compact:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .hint{opacity:0}
 body:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .views{top:12px;padding:2px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){body:not(.editor-open) .stage:not(.expanded):not(:fullscreen){transition:none}}

@media(prefers-reduced-motion:reduce){body:not(.editor-open) .stage .tools,body:not(.editor-open) .stage .hint{transition:none!important}}
.stage>.views{left:16px;transform:none}
@media(max-width:760px){
 body.editor-open main:before{content:'';display:block;height:max(400px,50svh)}
 body.editor-open .stage{transition:height var(--preview-resize-duration) var(--preview-resize-ease);margin-bottom:0}
 .stage>.views,body.editor-open .stage>.views{left:8px;top:8px;padding:2px;gap:0;border-radius:10px}
 .stage>.views button{font-size:11px;min-height:32px;padding:6px 10px}
 body .stage .tools button,body:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .tools button{width:34px;height:34px;min-width:34px;min-height:34px;padding:8px}
 .stage .tools button svg{width:17px;height:17px}
 body.editor-open .stage .tools #zoom-in,body.editor-open .stage .tools #zoom-out,body.editor-open .stage .tools #fit{min-width:34px;min-height:34px}
}
@media(prefers-reduced-motion:reduce){body.editor-open .stage{transition:none}}
@media(max-width:760px){main{overflow-anchor:none}}
.stole-measurements{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;display:none}
.stole-measurements path{stroke:#425347;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.stole-measurements rect{fill:#fffffff2;stroke:#d8dfd5;stroke-width:1}
.stole-measurements text{fill:#283b2e;font:500 12px system-ui,sans-serif;text-anchor:middle;dominant-baseline:middle}
.hide-measurements{position:absolute;top:78px;left:16px;min-height:32px;padding:6px 10px;background:#ffffffdf;border:1px solid #d8dfd5;font-size:11px}
.hide-measurements[hidden]{display:none}
body.editor-open .stole-measurements,body.editor-open .hide-measurements{display:none}
@media(max-width:760px){.hide-measurements{top:48px;left:8px;min-height:28px;padding:4px 8px;font-size:10px}.stole-measurements text{font-size:11px}}
body.editor-open .stole-measurements{visibility:hidden}
.design-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.design-actions button{align-items:flex-start;text-align:left;padding:12px;gap:3px;min-height:104px;transition:transform 180ms var(--motion-ease),background-color 180ms ease,border-color 180ms ease}
.design-actions .design-icon-row{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:8px}
.design-actions .design-add-mark{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:#364b3c;color:#fff;transition:transform 200ms var(--motion-ease)}
.design-actions .design-add-mark svg{width:15px;height:15px;stroke:currentColor}
.design-action-help>.help-trigger{top:auto;bottom:5px;right:5px}
.design-actions button:focus-visible{outline:2px solid #315346;outline-offset:3px;background:#f0f3ec}
.design-actions button:focus-visible .design-add-mark{transform:rotate(90deg)}
@media(hover:hover){.design-actions button:hover{transform:scale(.98);background:#f0f3ec;border-color:#7e907d}.design-actions button:hover .design-add-mark{transform:rotate(90deg)}}
.design-actions button:active{transform:scale(.98);background:#e7ece3}
@media(prefers-reduced-motion:reduce){.design-actions button,.design-actions .design-add-mark{transition:none;transform:none!important}}
.panel-disclosure+.design-panel{border-top:1px solid #e1e5dc;padding-top:18px}

/* Compact canvas controls keep the garment as the focal point. */
.stage>.views{top:24px;left:24px;padding:3px;gap:1px;border-radius:10px}
.stage>.views button{min-height:30px;padding:5px 11px;font-size:12px;border-radius:7px}
.stage>.tools{top:24px;right:24px;bottom:auto;transform:none}
.tools .control-group{display:flex;flex-direction:column;gap:2px}
.tools .control-group+.control-group{border-top:1px solid #e5e8e0;padding-top:5px;margin-top:3px}
.stage>.hint{left:24px;right:auto;bottom:24px;text-align:left;font-size:11px}
@media(max-width:760px){
 .stage>.views button{min-height:28px;padding:4px 7px;font-size:10px}
 .stage>.views,body.editor-open .stage>.views{top:12px;left:12px;padding:2px;border-radius:8px}
 body .stage .tools,body:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .tools,body.preview-compact:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .tools{display:flex;flex-direction:row;top:12px;bottom:auto;right:12px;transform:none;padding:2px}
 .tools .control-group{flex-direction:row;gap:0}
 .tools .control-group+.control-group{border-top:0;border-left:1px solid #e5e8e0;padding:0 0 0 3px;margin:0 0 0 3px}
 body .stage .tools button,body:not(.editor-open) .stage:not(.expanded):not(:fullscreen) .tools button{width:28px;height:28px;min-width:28px;min-height:28px;padding:6px}
 body.editor-open .tools .control-group[aria-label="Measurements"]{display:none}
 body.editor-open .tools .control-group[aria-label="Zoom"]{border:0;margin:0;padding:0}
 .stage>.hint{left:12px;bottom:12px;font-size:10px}
}