/* Product workshop: explicit choices, quiet controls, a stable product stage. */
.personal-section { background:#f0f1eb; overflow:visible; }
.personal-grid { grid-template-columns:1.08fr .92fr; column-gap:64px; }
.personal-intro { padding-top:0; }
.personal-intro h2 { margin-top:16px; }
.personal-intro>p { max-width:none; }
.personal-config { padding-top:24px; min-width:0; }
.product-stage { background:#ecebe7; border-color:#d8dcd5; position:sticky; top:24px; align-self:start; box-shadow:0 16px 55px #173f4907; }
.product-canvas-wrap { height:590px; background:#ecebe7; }
.product-poster { object-fit:contain; padding:0 0 56px; mix-blend-mode:normal; }
.product-stage:not(.is-3d) .stage-top { text-shadow:none; }
.stage-top { position:relative; padding:20px 22px 0; height:47px; color:#21464c; }
.stage-top .eyebrow { color:#21464c; }
.stage-mode { color:#687770; font-size:8px; }
.product-stage:not(.is-3d) .stage-mode { color:#687770; }
.stage-controls { background:transparent; padding:10px 20px; min-height:60px; }
.stage-view-label { font-size:10px; color:#64736b; }
.stage-disclaimer { background:transparent; padding:8px 20px 15px; font-size:11px; color:#596a63; line-height:1.6; }
.viewer-status { margin:0 20px 4px; padding:12px 14px; border:1px solid #c3cfc5; background:#f7f8f4; border-radius:4px; color:#3f574b; font-size:12px; line-height:1.6; }
.activate-3d { bottom:22px; background:#fcfdf9f2; border:1px solid #d1d9d0; box-shadow:0 4px 18px #173f4910; font-size:12px; }
.drag-hint { bottom:20px; font-size:11px; background:#ecebe7c9; padding:6px; left:12%; right:12%; border-radius:4px; }
.viewer-tools { gap:15px; }
.stage-reset { font-size:11px; }
.workshop-fieldset { border:0; margin:0 0 24px; padding:0; min-width:0; }
.workshop-fieldset legend { width:100%; font-size:13px; font-weight:650; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.workshop-fieldset legend>span { font-size:9px; font-weight:500; letter-spacing:.06em; color:#718175; }
.workshop-fieldset legend>small { margin-left:auto; color:#64766a; font-size:10px; font-weight:500; }
.workshop-colors { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin:0 0 10px; }
.workshop-colors .swatch { width:36px; height:36px; padding:5px; }
.workshop-colors .swatch>span { width:25px; height:25px; }
.workshop-colors .swatch.is-selected { border-color:#3e6253; }
.workshop-colors #color-name { font-size:11px; margin-left:7px; color:#4c6558; }
.custom-swatch { position:relative; width:36px; height:36px; display:grid; place-items:center; border:1px solid #b9c7b8; border-radius:50%; overflow:hidden; cursor:pointer; }
.custom-swatch input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.custom-swatch span { pointer-events:none; font-size:23px; font-weight:300; color:#526c5a; }
.custom-swatch:focus-within { outline:2px solid #173f49; outline-offset:3px; }
.workshop-label { display:block; font-size:11px; font-weight:600; margin:13px 0 7px; }
.workshop-label>span { font-weight:400; color:#788477; }
.workshop-input { display:block; width:100%; min-width:0; min-height:42px; border:1px solid #cbd5c8; border-radius:5px; background:#fafbf6; color:#193f44; font:inherit; font-size:12px; padding:10px 12px; }
.workshop-input::placeholder { color:#7e897d; opacity:1; }
.workshop-input:focus { outline:2px solid #71917d; outline-offset:2px; border-color:#71917d; }
.workshop-input[rows] { resize:vertical; line-height:1.7; }
.workshop-marks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.workshop-choice { display:flex; align-items:center; gap:10px; min-height:66px; padding:11px 12px; border:1px solid #cbd5c8; border-radius:5px; background:#f8f9f3; cursor:pointer; }
.workshop-choice:has(input:checked) { border-color:#547861; background:#e4ece0; }
.workshop-choice:has(input:focus-visible) { outline:2px solid #173f49; outline-offset:3px; }
.workshop-choice input { appearance:none; width:15px; height:15px; border:1px solid #a7b6a5; border-radius:3px; flex:0 0 auto; margin:0; display:grid; place-items:center; background:#fff; }
.workshop-choice input:checked { background:#254f3f; border-color:#254f3f; }
.workshop-choice input:checked::after { content:""; width:7px; height:4px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:translateY(-1px) rotate(-45deg); }
.workshop-choice strong { font-size:12px; font-weight:650; line-height:1.4; display:block; }
.workshop-choice small { font-size:10px; color:#647461; display:block; margin-top:3px; line-height:1.4; }
.workshop-clear { background:transparent; font-size:10px; color:#526b58; min-height:32px; margin:4px 0 0; padding:0; text-decoration:underline; text-underline-offset:3px; }
.workshop-upload { display:flex; align-items:center; justify-content:space-between; min-height:63px; padding:13px 15px; border:1px dashed #9dad98; border-radius:5px; cursor:pointer; background:#f8faf3; font-size:12px; font-weight:600; }
.workshop-upload small { display:block; margin-top:5px; font-weight:400; color:#6c7c66; font-size:10px; }
.workshop-upload>span:last-child { font-size:24px; font-weight:400; }
.workshop-file-block:focus-within .workshop-upload { outline:2px solid #71917d; outline-offset:3px; }
#workshop-artwork { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.workshop-file-info { display:flex; align-items:flex-start; gap:10px; margin-top:9px; }
.workshop-file-info p { font-size:10px; color:#647461; margin:0; overflow-wrap:anywhere; }
.workshop-file-info button { flex-shrink:0; padding:0; background:transparent; font-size:10px; text-decoration:underline; color:#315741; }
.workshop-note { font-size:10px; color:#6b7a65; line-height:1.65; margin:7px 0 0; }
.workshop-details { border-top:1px solid #c9d4c3; border-bottom:1px solid #c9d4c3; }
.workshop-details summary { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; font-weight:600; min-height:50px; cursor:pointer; list-style:none; }
.workshop-details summary::-webkit-details-marker { display:none; }
.workshop-details summary span { font-size:21px; font-weight:400; }
.workshop-details[open] summary span { transform:rotate(45deg); }
.workshop-details-body { padding:0 0 18px; }
.workshop-inline-fields { display:grid; grid-template-columns:1fr 1.6fr; gap:16px; }
#workshop-ink { width:100%; height:42px; border:1px solid #cbd5c8; border-radius:4px; padding:5px; background:#fafbf6; cursor:pointer; }
.workshop-range-label { display:flex; justify-content:space-between; }
#workshop-scale { width:100%; margin:5px 0 10px; accent-color:#295a44; cursor:pointer; }
.personal-config .bat-note { margin-top:19px; font-size:11px; align-items:flex-start; }
.personal-selection { border-left:2px solid #78917c; padding-left:11px; font-size:12px; line-height:1.7; margin:18px 0 14px; }
.personal-config>.button { width:100%; justify-content:space-between; min-height:54px; font-size:12px; gap:14px; }
@media(max-width:1190px) { .personal-grid { column-gap:38px; } .product-canvas-wrap { height:550px; } .workshop-colors #color-name { flex-basis:100%; margin-left:4px; margin-top:5px; } }
@media(max-width:980px) { .personal-grid { column-gap:25px; } .product-canvas-wrap { height:490px; } .stage-top { padding-inline:16px; } .stage-view-label { font-size:9px; } .workshop-choice { padding:10px 8px; gap:7px; } .workshop-choice strong { font-size:11px; } .workshop-fieldset legend { font-size:12px; } }
@media(max-width:740px) { .personal-grid { grid-template-columns:1fr; gap:0; } .product-stage { position:relative; top:auto; grid-row:2; margin-bottom:26px; } .personal-intro { grid-row:1; } .personal-config { grid-row:3; padding-top:0; } .product-canvas-wrap { height:420px; } .stage-top { height:42px; padding-top:16px; } .stage-top .eyebrow,.stage-mode { font-size:8px; } .stage-controls { min-height:50px; padding:8px 15px; } .stage-disclaimer { padding:6px 15px 12px; font-size:10px; } .viewer-status { margin-inline:15px; font-size:11px; } .workshop-colors #color-name { flex-basis:auto; margin:0 0 0 8px; } .workshop-choice { padding:12px; min-height:68px; } .workshop-choice strong { font-size:12px; } .workshop-fieldset legend { font-size:13px; } .workshop-label { font-size:12px; } .workshop-input { font-size:16px; min-height:45px; } .workshop-details summary { font-size:12px; } .workshop-note { font-size:11px; } .workshop-upload { font-size:13px; } .workshop-upload small { font-size:11px; } .personal-config>.button { font-size:12px; } }
@media(max-width:360px) { .product-canvas-wrap { height:360px; } .workshop-colors #color-name { flex-basis:100%; margin:6px 0 0 4px; } .workshop-choice { padding:10px 8px; } .workshop-choice strong { font-size:11px; } .workshop-choice small { font-size:9px; } .stage-view-label { max-width:155px; line-height:1.6; } .workshop-inline-fields { grid-template-columns:1fr; gap:0; } }

.artwork-thumb { display:block; width:128px; height:96px; margin-top:12px; padding:8px; object-fit:contain; background:#fff; border:1px solid #dce3dd; border-radius:6px; }