/* Merch Studio: coat-of-arms designer. Uses the store tokens from store.v4.css. */
.studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:48px;align-items:start;padding-top:12px;padding-bottom:64px}
@media(max-width:900px){.studio{grid-template-columns:1fr;gap:28px}}
.studio .preview{position:sticky;top:20px}@media(max-width:900px){.studio .preview{position:static}}
.studio .stage{border-radius:var(--r-md);padding:32px 40px;background:#fff;transition:background .25s}
.studio .card{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);color:var(--mist);font-size:14px;line-height:1.55}
.studio .card h4{margin:0 0 4px;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.studio .card .bz{font-family:"Almendra SC",serif;font-size:18px;color:var(--brass-2);line-height:1.35}
.studio .card small{display:block;margin-top:6px;font-size:12px;opacity:.8}
.studio h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 8px}.studio .lede{margin:0 0 8px}
.studio section{padding:18px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:14px}
.studio section:last-of-type{border-bottom:0}
.studio h3{margin:0;font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.studio label{font-size:13px;color:var(--mist);display:flex;flex-direction:column;gap:6px}
.studio .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.studio .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.studio input,.studio select{font:inherit;font-size:16px;width:100%;padding:10px;border-radius:8px;border:1px solid var(--rule);background:var(--felt-2);color:var(--chalk)}
.studio input:focus,.studio select:focus{outline:2px solid var(--brass);outline-offset:1px}
.studio .sw{display:flex;gap:8px;flex-wrap:wrap}.studio .sw button{width:44px;height:44px;border-radius:50%;border:2px solid var(--rule);cursor:pointer;padding:0}
.studio .sw button.on{outline:2px solid var(--brass);outline-offset:2px}.studio .sw button:disabled{opacity:.22;cursor:not-allowed;position:relative;filter:grayscale(.7)}
.studio .sw button:disabled::after{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 45%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.55) 55%,transparent 55%)}
.studio .sw-hint{margin:-4px 0 14px;font-size:.82rem;line-height:1.45;color:var(--mist);max-width:52ch}
.studio .note{font-size:12px;color:var(--mist);line-height:1.5;margin:0}
.studio .seg{display:flex;gap:8px}.studio .seg button{flex:1;padding:12px;border-radius:8px;border:1px solid var(--rule);background:var(--felt-2);color:var(--chalk);font:inherit;cursor:pointer;text-align:left}
.studio .seg button b{display:block;font-weight:600}.studio .seg button span{font-size:13px;color:var(--mist)}
.studio .seg button.on{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.studio .buy{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.studio .total{font-family:var(--display);font-size:28px}.studio .total small{display:block;font:400 12px var(--body);color:var(--mist)}
.studio .msg{font-size:13px;color:var(--brass-2);min-height:1em;margin:0}
.studio .views{display:flex;gap:6px;margin-bottom:10px}
.studio .views button{flex:0 0 auto;padding:8px 16px;border-radius:999px;border:1px solid var(--rule);background:var(--felt-2);color:var(--chalk);font:inherit;font-size:13px;cursor:pointer}
.studio .views button.on{background:var(--brass);color:var(--brass-ink);border-color:var(--brass)}
.studio .stage.photo{padding:0;background:#fff;overflow:hidden}
.studio .mockwrap{position:relative}.studio .mockwrap img{display:block;width:100%;height:auto}
.studio #overlay{position:absolute;pointer-events:none}.studio #overlay svg{display:block;width:100%;height:auto}

/* Marriage studio: which coat you are editing */
.studio .sides{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 20px}
.studio .sides a{text-decoration:none;display:block;text-align:center}
.studio .switch{margin:0 0 26px}
.studio .switch .on{padding:11px 10px;border-radius:var(--r-sm);border:1px solid var(--brass);
  color:var(--brass-2);background:rgba(209,171,105,.09);font:600 .9rem/1.2 var(--body);text-align:center}
.studio .sides button,.studio .sides a{padding:11px 10px;border-radius:var(--r-sm);border:1px solid var(--rule);background:transparent;
  color:var(--mist);font:600 .9rem/1.2 var(--body);cursor:pointer;transition:.2s}
.studio .sides button.on{border-color:var(--brass);color:var(--brass-2);background:rgba(209,171,105,.09)}
.studio .sides button:hover{color:var(--ink-inv,inherit)}

.studio .incl2{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.studio .incl2 li{position:relative;padding-left:24px;color:var(--mist);font-size:.94rem;line-height:1.45}
.studio .incl2 li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg)}

.studio .download{border-top:1px solid var(--rule);padding-top:24px}
.studio .download .total{font-size:1.5rem}

/* 2026-10-15 hub: 44px fields */
.studio input,.studio select{min-height:44px}
.studio .views button{min-height:44px}
.studio input:not([type=checkbox]):not([type=radio]){min-height:44px}