/* The Family Collection builder. Structural only, on guide.css tokens; the
   look of the shop belongs to the design owner (docs/HANDOFF-CHATGPT.md). */
.fam-builder{padding:24px 0 56px;border-top:1px solid var(--line)}
.fam-builder h2{font:400 40px/1.1 var(--serif);margin:24px 0 8px}
.fam-builder .hint{color:var(--dim);margin:0 0 20px;max-width:62ch}
.fam-sizes{border:0;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;gap:10px}
.fam-sizes legend{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.fam-sizes label{cursor:pointer}
.fam-sizes input{position:absolute;opacity:0}
.fam-sizes span{display:flex;flex-direction:column;padding:10px 16px;border:1px solid var(--line);min-width:120px}
.fam-sizes b{font-weight:500}
.fam-sizes input:checked+span{border-color:var(--paper)}
.fam-sizes input:focus-visible+span{outline:2px solid var(--acid)}
.fam-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fam-card{border:1px solid var(--line);padding:20px;min-width:0}
.fam-card.ready{border-color:#ffffff55}
.fam-n{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.fam-form .fi{display:flex;flex-direction:column;margin:0 0 12px;position:relative}
.fam-form label{font-size:14px;color:var(--dim);margin-bottom:4px}
.fam-form input{font:inherit;color:var(--paper);background:transparent;border:1px solid var(--line);padding:10px;min-height:44px;width:100%;color-scheme:dark}
.fam-form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fam-form .fam-go{width:100%;justify-content:center;border:0;cursor:pointer;font:inherit}
.fam-form .fam-go:disabled{opacity:.5;cursor:progress}
.fam-sugg{list-style:none;margin:0;padding:0;position:absolute;top:100%;left:0;right:0;z-index:5;background:var(--ink);border:1px solid var(--line)}
.fam-sugg li{padding:10px;cursor:pointer;font-size:14px}
.fam-sugg li:hover,.fam-sugg li:focus{background:#ffffff14}
.fam-fold p{margin:0 0 6px;font-size:14px}
.fam-fold label{display:block;font-size:14px}
.fam-msg{min-height:1.7em;margin:10px 0 0;font-size:14px;color:var(--dim)}
.fam-msg.bad{color:#ffb4a8}
.fam-proof{margin:0}
.fam-proof figcaption{font-size:14px;color:var(--dim);margin:10px 0}
.fam-proof .fam-edit{cursor:pointer;font:inherit;font-size:14px}
/* the one black box frame, no mount: the plate fills it */
.fam-frame{background:#050505;padding:5%;box-shadow:0 0 0 1px #ffffff1f,0 18px 40px #0009}
.fam-frame img{width:100%;height:auto}
.fam-wall{margin:48px 0 0}
.fam-wall-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.fam-layout button{font:inherit;font-size:14px;color:var(--paper);background:none;border:1px solid var(--line);padding:8px 14px;min-height:44px;cursor:pointer}
.fam-layout button[aria-pressed=true]{border-color:var(--paper)}
.fam-wall-art{display:grid;gap:4%;padding:48px 6%;margin:20px 0 12px;background:#d9d6cf;align-items:start}
.fam-wall-art[data-layout=row]{grid-template-columns:repeat(4,minmax(0,1fr))}
.fam-wall-art[data-layout=grid]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-left:auto;margin-right:auto}
.fam-wall-art figure{margin:0}
.fam-wall-art figcaption{color:#3a3a3a;font-size:14px;text-align:center;margin-top:10px}
.fam-summary{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:36px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.fam-summary p{margin:0}
.fam-summary s{color:var(--dim);margin-left:8px}
.fam-summary .cta{border:0;cursor:pointer;font:inherit}
.fam-summary .cta:disabled{opacity:.45;cursor:not-allowed}
.fam-summary .fam-msg{flex-basis:100%;margin:0}
.fam-prices{border-collapse:collapse;width:100%;margin:12px 0 24px}
.fam-prices th,.fam-prices td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
@media (max-width:1100px){.fam-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .fam-cards{grid-template-columns:minmax(0,1fr)}
  .fam-wall-art[data-layout=row]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fam-wall-art{padding:24px 6%}
  .fam-builder h2{font-size:30px}
  .fam-prices{font-size:14px}
}
.fam-proof .fam-frame{cursor:zoom-in}
.fam-proof .fam-zoom{cursor:pointer;font:inherit;font-size:14px;margin:0 8px 8px 0}
.fam-detail{margin:0 0 10px;border:1px solid var(--line)}
.fam-detail img{width:100%;height:auto}