/* Hometown builder on the Shopify page; uses the theme's fonts and the plateapparel.com palette (pa.css). */
.pab { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"stage inputs" "stage form"; grid-template-rows:auto 1fr; column-gap:4rem; padding:3rem 0 5rem; }
.pab__inputs { grid-area:inputs; } .pab__stage { grid-area:stage; } .pab__form { grid-area:form; }
/* phones: type first, then see it, then choose color and size */
@media screen and (max-width: 989px) { .pab { grid-template-columns:1fr; grid-template-areas:"inputs" "stage" "form"; row-gap:2rem; padding-top:1.6rem; } }
.pab__stage canvas { display:block; width:100%; height:auto; }
.pab__tee { background:var(--pa-paper-2, #E8E2D4); }
.pab__flat { margin-top:1.2rem; background:#fff; border:1px solid var(--pa-rule, #CFC9BC); padding:1rem; }
.pab__pick { margin-top:1.4rem; }
.pab__pickhead { display:flex; justify-content:space-between; align-items:baseline; font-weight:600; font-size:1.4rem; letter-spacing:.04em; }
.pab__opt { font-weight:400; color:var(--pa-mute, #5E6470); }
.pab__link { font:inherit; font-weight:400; color:inherit; background:none; border:0; text-decoration:underline; text-underline-offset:.4rem; cursor:pointer; padding:0; }
.pab__letters { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.pab__br { flex-basis:100%; height:0; }
.pab__letters button { min-width:4rem; height:4.4rem; font:700 2rem/1 var(--font-heading-family); color:var(--pa-ink, #1B2230); background:#fff; border:1px solid var(--pa-rule, #CFC9BC); cursor:pointer; position:relative; }
.pab__letters .pab__gap { visibility:hidden; min-width:1.4rem; }
.pab__letters button[aria-expanded=true] { border:2px solid var(--pa-ink, #1B2230); }
.pab__letters button.is-locked::after { content:""; position:absolute; top:.4rem; right:.4rem; width:.6rem; height:.6rem; border-radius:50%; background:var(--pa-yellow, #E9B531); box-shadow:0 0 0 1px var(--pa-ink, #1B2230); }
.pab__letters button:disabled { color:#B23A2E; cursor:not-allowed; }
.pab__chooser { margin-top:1rem; background:#fff; border:1px solid var(--pa-rule, #CFC9BC); padding:1.2rem; }
.pab__chooser p { margin:0 0 1rem; font-size:1.4rem; color:var(--pa-mute, #5E6470); }
.pab__grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(5.2rem, 1fr)); gap:.8rem; }
.pab__grid button { padding:.3rem; background:var(--pa-paper-2, #E8E2D4); border:2px solid transparent; cursor:pointer; line-height:0; }
.pab__grid button[aria-pressed=true] { border-color:var(--pa-ink, #1B2230); }
.pab__grid img { width:100%; height:auto; display:block; }
.pab__grid button.is-used img { opacity:.45; }
.pab__grid .pab__auto { line-height:1.2; font:600 1.2rem var(--font-body-family); color:var(--pa-ink, #1B2230); padding:.6rem; background:#fff; border:1px dashed var(--pa-ink, #1B2230); }
.pab__grid .pab__auto[aria-pressed=true] { border-style:solid; }
.pab__label { display:block; font-weight:600; font-size:1.4rem; letter-spacing:.04em; margin:1.8rem 0 .6rem; }
.pab__label:first-child { margin-top:0; }
.pab__form .pab__label:first-child { margin-top:1.8rem; }
@media screen and (max-width: 989px) { .pab__form .pab__label:first-child, .pab__form .pab__shuffle:first-child { margin-top:0; } }
.pab__input { width:100%; font:600 2.2rem/1.2 var(--font-heading-family); letter-spacing:.08em; text-transform:uppercase; padding:1.2rem; border:1px solid var(--pa-ink, #1B2230); background:#fff; color:var(--pa-ink, #1B2230); border-radius:0; }
.pab__hint { margin:.6rem 0 0; font-size:1.3rem; color:var(--pa-mute, #5E6470); }
.pab__msg { min-height:2.2rem; margin:.6rem 0 0; font-size:1.4rem; color:var(--pa-mute, #5E6470); }
.pab__msg.is-err { color:#B23A2E; }
.pab__msg a { color:inherit; }
.pab__swatches { display:flex; gap:.8rem; flex-wrap:wrap; }
.pab__swatches button { width:4rem; height:4rem; border-radius:50%; border:1px solid var(--pa-rule, #CFC9BC); cursor:pointer; padding:0; }
.pab__swatches button[aria-pressed=true] { outline:2px solid var(--pa-ink, #1B2230); outline-offset:3px; }
.pab__shuffle { width:100%; margin-top:1.8rem; }
.pab__form .pab__shuffle + .pab__label { margin-top:1.8rem; }
.pab__check { display:flex; gap:1rem; align-items:flex-start; font-size:1.5rem; margin-top:2rem; }
.pab__check input { margin-top:.3rem; width:1.8rem; height:1.8rem; accent-color:var(--pa-ink, #1B2230); flex:none; }
.pab__add { width:100%; margin-top:1.4rem; }
.pab__fine { font-size:1.3rem; color:var(--pa-mute, #5E6470); margin-top:1.4rem; }
.pab .select { width:100%; }
.pab .select__select { width:100%; height:4.8rem; font:400 1.6rem/1.2 var(--font-body-family); letter-spacing:0; color:var(--pa-ink, #1B2230); padding:0 4rem 0 1.4rem; border-radius:0; }
.pab__flat[hidden] { display:none; }
.pab__grid button { position:relative; }
.pab__grid canvas { width:100%; height:auto; display:block; }
.pab__yr { display:block; font:600 1.1rem/1.2 var(--font-body-family); color:var(--pa-ink, #1B2230); padding-top:.3rem; line-height:1.2; }
.pab__era[hidden] { display:none; }
.pab__design[hidden] { display:none; }
/* several states (2026-10-26) */
.pab__states { display:grid; gap:.6rem; }
.pab__strow { display:flex; align-items:center; gap:1rem; }
.pab__strow .select { flex:1; }
.pab__addstate { justify-self:start; margin:.6rem 0 1.4rem; font-size:1.4rem; }
/* letter picker: colour filter and state tabs (2026-10-26) */
.pab__hues { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.pab__hues button { display:inline-flex; align-items:center; gap:.5rem; font:400 1.3rem/1 var(--font-body-family); color:var(--pa-ink, #1B2230); background:#fff; border:1px solid var(--pa-rule, #CFC9BC); border-radius:2rem; padding:.6rem 1rem; cursor:pointer; }
.pab__hues button[aria-pressed=true] { border-color:var(--pa-ink, #1B2230); box-shadow:inset 0 0 0 1px var(--pa-ink, #1B2230); font-weight:600; }
.pab__dot { width:1.2rem; height:1.2rem; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.pab__tabs { display:flex; gap:0; overflow-x:auto; border-bottom:1px solid var(--pa-rule, #CFC9BC); margin:0 0 1rem; }
.pab__tabs button { flex:none; font:600 1.3rem/1 var(--font-body-family); color:var(--pa-mute, #5E6470); background:none; border:0; border-bottom:3px solid transparent; padding:1rem 1.2rem .8rem; cursor:pointer; white-space:nowrap; }
.pab__tabs button[aria-selected=true] { color:var(--pa-ink, #1B2230); border-bottom-color:var(--pa-ink, #1B2230); }
.pab__chooser .pab__none { margin:1rem 0 0; }
/* line break chooser (2026-10-26) */
.pab__lines[hidden] { display:none; }
.pab__linebtns { display:flex; flex-wrap:wrap; gap:.6rem; }
.pab__linebtns button { display:flex; flex-direction:column; align-items:center; gap:.2rem; min-width:7rem; font:600 1.3rem/1.2 var(--font-heading-family); letter-spacing:.06em; color:var(--pa-ink, #1B2230); background:#fff; border:1px solid var(--pa-rule, #CFC9BC); padding:.7rem 1rem; cursor:pointer; }
.pab__linebtns button[aria-checked=true] { border-color:var(--pa-ink, #1B2230); box-shadow:inset 0 0 0 1px var(--pa-ink, #1B2230); }
.pab__colors[hidden] { display:none; }
.pab__colors .pab__hues { margin:0; }
.pab__size[hidden] { display:none; }
/* product switcher: tee / sweatshirt / tote */
.pab__kinds { display:flex; flex-wrap:wrap; gap:.6rem; }
.pab__kinds a { font:600 1.3rem/1.2 var(--font-heading-family); letter-spacing:.06em; color:var(--pa-ink, #1B2230); background:#fff; border:1px solid var(--pa-rule, #CFC9BC); padding:.9rem 1.4rem; text-decoration:none; min-height:4.4rem; display:inline-flex; align-items:center; }
.pab__kinds a:hover { border-color:var(--pa-ink, #1B2230); }
.pab__kinds a[aria-current=page] { border-color:var(--pa-ink, #1B2230); box-shadow:inset 0 0 0 1px var(--pa-ink, #1B2230); }