/* Designer page */
.site-header .back{justify-self:start;text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.site-header .brand{justify-self:center}
.cart-toggle{text-decoration:none}
.designer{padding-top:clamp(36px,6vw,64px);padding-bottom:96px}
.designer-head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.designer-head h1{font-size:clamp(36px,5vw,58px);margin:14px 0 14px}
.designer-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
.stage-col{position:sticky;top:96px}
.stage{position:relative;aspect-ratio:1;background:#16261f center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.stage.studio{background:radial-gradient(circle at 50% 40%,#fbf8f2,#e7dfcf)}
.stage-art{width:68%;height:100%;display:grid;place-items:center}
.stage-art svg{width:100%;height:auto;max-height:100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.stage.studio .stage-art svg{filter:drop-shadow(0 18px 24px rgba(21,36,30,.25))}
.stage-status{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#e9e2d2;text-shadow:0 1px 6px rgba(0,0,0,.6);margin:0}
.stage.studio .stage-status{color:var(--muted);text-shadow:none}
.scene-picker{display:flex;gap:18px;margin-top:16px;justify-content:center}
.scene-picker label{display:grid;justify-items:center;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;position:relative}
.scene-picker input{position:absolute;opacity:0}
.scene-picker span{width:44px;height:44px;border-radius:50%;background:center/cover;border:1px solid var(--line-strong)}
.scene-picker span.studio{background:#f1ebdf}
.scene-picker input:checked+span{outline:1px solid var(--ink);outline-offset:3px}
.scene-picker input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.stage-note{text-align:center;font-size:12px;color:var(--muted);margin-top:12px}

.controls{min-width:0}
.step{border:0;margin:0 0 30px;padding:0 0 30px;border-bottom:1px solid var(--line);min-width:0}
.step legend{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-size:22px;margin-bottom:16px;padding:0}
.step legend>span:first-child{font-size:14px;color:var(--gold);font-family:var(--serif)}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.model{position:relative;cursor:pointer}
.model input{position:absolute;opacity:0}
.model>span{display:grid;justify-items:center;gap:8px;padding:16px 10px 12px;border:1px solid var(--line-strong);background:var(--paper);height:100%}
.model svg{width:70%;max-width:90px}
.model b{font-weight:500;font-size:13px;text-align:center;line-height:1.3}
.model input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.model input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:block;border:1px solid var(--line-strong);padding:12px 12px;font-size:14px;background:var(--paper);height:100%;text-align:center}
.seg span small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;line-height:1.35}
.seg input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
#name{font-family:var(--sans);font-variant-ligatures:none;font-size:24px;padding:14px 16px}
.help{font-size:13px;color:var(--muted);margin:-6px 0 12px}
.examples{display:flex;flex-wrap:wrap;gap:6px}
.examples button{border:1px solid var(--line-strong);background:none;border-radius:30px;padding:6px 14px;font-size:13px;cursor:pointer}
.examples button:hover{border-color:var(--ink)}
.fonts{margin-top:22px}
.option-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 10px;display:flex;justify-content:space-between;gap:10px}
.option-label span{text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink)}
.buy{background:var(--paper);border:1px solid var(--line);padding:24px}
.buy-line{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;gap:12px}
.buy .price{font-family:var(--serif);font-size:28px}
.spec{font-size:12px;color:var(--muted)}
.add-row{display:flex;gap:12px}
.add-row .btn{flex:1}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);background:var(--paper)}
.qty button{width:42px;height:48px;border:0;background:none;cursor:pointer;font-size:18px}
.qty input{width:40px;height:48px;border:0;text-align:center;background:none;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.form-status{font-size:14px;color:#a33a2f;margin-top:10px;min-height:0}
.form-status:empty{display:none}
.added{margin-top:14px;font-size:14px;padding:12px 14px;background:var(--sand)}
.added a{font-weight:600}

@media (max-width:900px){
 .designer-grid{grid-template-columns:1fr}
 .stage-col{position:static}
 .stage{aspect-ratio:1.1}
 .site-header .back{font-size:11px}
 .menu-toggle{display:none}
}
@media (max-width:520px){
 .seg.three{grid-template-columns:1fr 1fr 1fr;gap:6px}
 .seg span{padding:10px 6px;font-size:13px}
 .seg span small{display:none}
 .models{gap:6px}
 .model b{font-size:12px}
 .buy{padding:18px}
 .scene-picker{gap:12px}
}

/* Shared with the name ring; retain the shop typography and controls. */
[hidden]{display:none!important}.name-area-note{text-align:center;font-size:12px;color:var(--muted);padding:12px 8px;border-top:1px solid var(--line);margin-top:12px}.price-tiers{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}.price-tiers li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}.price-tiers li.active{font-weight:600;color:var(--ink)}.tier-note{font-size:12px;color:var(--muted);margin-top:15px}.tier-note a{color:var(--ink)}.old-design-note{color:#a33a2f;font-size:12px;margin-top:6px}

.field textarea#name{min-height:0;line-height:1.4;resize:vertical}