/* Grab & Go storefront (from the approved shop prototype) */
/* Layout: storefront column (builder → more items) beside a sticky cart; stacks on phones with a bottom cart bar */
:root{
  --bg:#FBF8FB; --surface:#FFFFFF; --sunk:#F3EDF3; --line:#E6DCE6;
  --ink:#2B1D2E; --muted:#76667A;
  --brand:#D9466F;            /* the artist's brand color, set in setup */
  --brand-ink:#FFFFFF; --brand-soft:#FBE3EA;
  --ok:#2F7D5B; --warn:#B5651D; --err:#B3261E;
  --display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --r:14px;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 96px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.1}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

.proto-unused{max-width:1180px;margin:12px auto 0;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--muted);background:var(--sunk);border:1px dashed var(--line);border-radius:10px;padding:8px 12px}
.proto label{display:flex;gap:6px;align-items:center;cursor:pointer}

header.shop{max-width:1180px;margin:0 auto;padding-block:28px 20px;display:flex;flex-wrap:wrap;gap:12px;align-items:end;justify-content:space-between}
.shop .eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:700}
.shop h1{font-size:clamp(30px,5vw,48px);font-weight:800;letter-spacing:-.02em}
.shop p{margin:6px 0 0;color:var(--muted);max-width:52ch}
.pill{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--brand-soft);color:var(--ink)}

.wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
@media (max-width:900px){.wrap{grid-template-columns:minmax(0,1fr)}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.builder{display:grid;gap:22px}
.preview{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 8px 28px;position:relative}
.preview svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
#garland3d{width:100%;min-height:240px;cursor:grab;touch-action:pan-y}
#garland3d canvas{display:block}
.preview .drag{position:absolute;left:12px;top:10px;font-size:12px;color:var(--muted);background:var(--surface);border-radius:999px;padding:3px 10px}
.foilword{position:absolute;right:16px;bottom:30px;font-family:var(--display);font-weight:800;font-size:clamp(20px,4vw,34px);letter-spacing:.12em;color:#C9A04A;-webkit-text-stroke:1px #8E6F2B;pointer-events:none}
.preview .tag{position:absolute;right:12px;bottom:10px;font-size:12px;color:var(--muted)}

.step{display:grid;gap:12px}
.step h3{font-size:18px;display:flex;gap:10px;align-items:baseline}
.step h3 .n{font-family:var(--body);font-size:12px;font-weight:700;color:var(--brand);letter-spacing:.06em}
.step .hint{font-size:14px;color:var(--muted);margin:-6px 0 0}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.tier{border:1.5px solid var(--line);background:var(--surface);border-radius:12px;padding:14px;text-align:left;cursor:pointer;display:grid;gap:2px}
.tier b{font-family:var(--display);font-size:22px}
.tier span{font-size:13.5px;color:var(--muted);line-height:1.35}
.tier .tp{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.tier[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}

.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font-size:14px;font-weight:600}
.slot .d{width:26px;height:26px;border-radius:50%;border:1.5px dashed var(--line);flex:none}
.slot .d.on{border:1px solid rgba(0,0,0,.12)}
.slot small{font-weight:400;color:var(--muted);font-size:12px;display:block;line-height:1.1}
.slot[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:14px 6px;max-height:330px;overflow-y:auto;padding:6px 2px}
.swc{display:grid;justify-items:center;gap:5px;font-size:11.5px;line-height:1.2;color:var(--muted);text-align:center;background:none;border:0;padding:0;cursor:pointer}
.swc[aria-pressed="true"]{color:var(--ink);font-weight:700}
.sw{width:38px;height:38px;display:block;border-radius:50%;border:1px solid rgba(0,0,0,.1);cursor:pointer;padding:0;justify-self:center;transition:transform .12s}
.swc:hover .sw{transform:scale(1.08)}
.swc[aria-pressed="true"] .sw{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--brand)}
.swname{font-size:14px;color:var(--muted);min-height:21px}
.swname b{color:var(--ink)}
.chosen{font-size:14px;color:var(--muted)}

.addons{display:grid;gap:8px}
.addon{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:10px 12px;flex-wrap:wrap}
.addon .t{display:grid;min-width:0}
.addon .t small{color:var(--muted);font-size:13px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:34px;height:34px;border:0;background:var(--sunk);cursor:pointer;font-size:18px;line-height:1}
.qty output{min-width:30px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.addon input[type=text]{width:120px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--surface);text-transform:uppercase;letter-spacing:.08em}

.addbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px}
.addbar .price{font-family:var(--display);font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.btn{border:0;border-radius:999px;padding:12px 22px;font-weight:700;cursor:pointer;background:var(--brand);color:var(--brand-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.more{margin-top:28px;display:grid;gap:14px}
.more h2{font-size:24px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:10px;align-content:start}
.card .art{height:220px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;padding:10px}
.card .art svg{height:100%;width:100%;display:block}
.back{background:none;border:0;padding:0 0 14px;color:var(--brand);font-weight:600;cursor:pointer}
.pv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
@media (max-width:700px){.pv{grid-template-columns:minmax(0,1fr)}}
.pvleft{display:grid;gap:16px;min-width:0;position:sticky;top:16px}
.pvart{border:1px solid var(--line);border-radius:12px;padding:16px;height:420px}
.pvart svg{width:100%;height:100%;display:block}
@media (max-width:700px){.pvleft{position:static}.pvart{height:300px}}
.gallery{display:grid;gap:8px;min-width:0}
.ghead{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.ghead span{color:var(--muted);font-size:13px}
.gstrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.gtile{flex:0 0 auto;width:112px;height:112px;border-radius:10px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:zoom-in;background:var(--sunk);scroll-snap-align:start}
.gtile img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox{position:fixed;inset:0;z-index:30;background:rgba(20,10,22,.86);display:flex;align-items:center;justify-content:center;gap:10px;padding:16px}
.lightbox img{max-width:min(900px,80vw);max-height:84vh;border-radius:10px;object-fit:contain}
.lbx{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));background:#fff;color:#2B1D2E;border:0;border-radius:50%;width:40px;height:40px;font-size:24px;cursor:pointer}
.lbnav{background:rgba(255,255,255,.9);color:#2B1D2E;border:0;border-radius:50%;width:42px;height:42px;font-size:26px;cursor:pointer;flex:none}
.pvbody{display:grid;gap:22px;min-width:0}
.card .row .btn{padding:10px 18px}
.card{display:flex;flex-direction:column}
.card p{flex:1}
.minilabel{font-size:13px;color:var(--muted);margin:10px 0 6px}
.cpick summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;cursor:pointer;list-style:none;font-size:13.5px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.cpick summary::-webkit-details-marker{display:none}
.cpick .cnames{flex:1;min-width:0;color:var(--ink)}
.cpick .chg{color:var(--brand);font-weight:600;font-size:13px}
.cpick .dots i{width:16px;height:16px}
.card h3{font-size:18px}
.card p{margin:0;font-size:14px;color:var(--muted)}
.card select{border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface);width:100%}
.card .row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mini{display:flex;flex-wrap:wrap;gap:6px}
.mini button{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.mini button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--brand)}

aside.cart{position:sticky;top:16px;display:grid;gap:16px}
.cart h2{font-size:22px}
.lines{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;font-size:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.lines li b{font-weight:600}
.lines li small{color:var(--muted);grid-column:1}
.lines li .amt{font-variant-numeric:tabular-nums;font-weight:600}
.lines li .rm{grid-column:2;justify-self:end;background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0}
.dots{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}
.dots i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:block}
.empty{font-size:14px;color:var(--muted);background:var(--sunk);border-radius:10px;padding:14px}

.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--sunk);border-radius:999px;padding:4px}
.seg button{border:0;background:none;border-radius:999px;padding:9px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg.single{grid-template-columns:1fr}
.box{background:var(--sunk);border-radius:10px;padding:12px;font-size:14px;display:grid;gap:4px}
.box b{font-size:14px}
.field{display:grid;gap:4px;font-size:13px;font-weight:600}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--surface);font-weight:400;font-size:15px;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.totals{display:grid;gap:6px;font-size:14px;font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between}
.totals .grand{font-family:var(--display);font-size:22px;font-weight:700;padding-top:6px;border-top:1px solid var(--line)}
.note{font-size:13px;color:var(--warn)}
.msg{font-size:13.5px;border-radius:8px;padding:9px 11px;line-height:1.4}
.msg.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);font-weight:600}
.msg.err{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err)}
.help{margin:-4px 0 0;font-size:12.5px;color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;color:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

.tmnote{max-width:1180px;margin:28px auto 0;font-size:12px;color:var(--muted)}
.bar{position:fixed;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:center;gap:12px;
  background:var(--surface);border-top:1px solid var(--line);
  padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@media (max-width:900px){.bar{display:flex}aside.cart{position:static}}

.done{position:fixed;inset:0;background:rgba(20,10,22,.55);display:grid;place-items:center;padding:16px;z-index:20}
.done .panel{max-width:460px;width:100%;display:grid;gap:12px}
.done h2{font-size:26px}
.done p{margin:0;color:var(--muted);font-size:15px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Live shop additions ===== */
:root{--sub:var(--body);color-scheme:light}
.btn,.tier b,.eyebrow,.step h3 .n,.seg button,.field,.pill{font-family:var(--sub)}
.shop .logo{display:block;max-height:72px;max-width:min(260px,70vw);width:auto;margin:0 0 14px}
.state{max-width:560px;margin:12vh auto;text-align:center;display:grid;gap:12px;padding:0 8px}
.state h1{font-family:var(--display);font-size:clamp(28px,5vw,40px)}
.state p{color:var(--muted);margin:0}
.loading{display:grid;place-items:center;min-height:60vh;color:var(--muted)}
.shopfoot{max-width:1180px;margin:28px auto 0;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}
/* inside someone's website: no fixed bottom bar; pop-ups open beside what was tapped */
html.embed body{padding-bottom:16px}
html.embed .bar{display:none!important}
html.embed .lightbox,html.embed .done{position:absolute;inset:auto 0 auto 0;height:600px;min-height:0}
html.embed .lightbox img{max-height:520px;max-width:min(900px,80vw)}
.closedmsg{background:var(--sunk);border-radius:12px;padding:12px 14px;font-size:14.5px}

@media (max-width:620px){.preview .tag{position:static;display:block;text-align:center;padding:0 10px 10px}}

/* Phones: keep the preview pinned at the top while customers scroll through sizes and colors,
   so they can watch each color pick change the garland. It lets go once they reach Add to cart. */
@media (max-width:900px){
  .builder>.preview{position:sticky;top:0;z-index:6;padding:6px 6px 8px;box-shadow:0 10px 18px -12px rgba(0,0,0,.35)}
  .builder>.preview svg{height:min(30vh,240px);width:100%}
  .builder>.preview .tag{position:static;display:block;text-align:center;padding:2px 8px 0;font-size:11px}
}
@media (max-width:700px){
  .pvleft{display:contents}
  .pvart{position:sticky;top:0;z-index:6;height:min(32vh,250px);padding:8px;background:var(--surface);box-shadow:0 10px 18px -12px rgba(0,0,0,.35)}
}