/* 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}
/* after adding to the cart: a small bar with what to do next */
.logobox .field{width:100%}.logobox textarea{width:100%;box-sizing:border-box}
.tmix{display:grid;gap:8px;margin-top:12px}.tmix .hint{margin:0}
.added{position:fixed;z-index:40;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(560px,calc(100% - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.14);padding:14px 44px 14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;animation:addin .25s ease-out}
.added p{margin:0;flex:1 1 220px;min-width:0;line-height:1.4}
.added .tick{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--brand-ink);font-size:13px;margin-right:4px}
.addedbtns{display:flex;gap:8px;flex-wrap:wrap}.addedbtns .btn{min-height:42px;padding:0 16px}
.added .x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:6px}
@keyframes addin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.added{animation:none}}

.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;padding:6px 2px}   /* every color shows, no scroll box */
.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.multi{display:grid;gap:8px;grid-template-columns:minmax(0,1fr);justify-content:stretch}
.addon .choices{max-width:420px}
.addon .choices{display:grid;gap:6px}
.addon .choice{display:flex;align-items:center;gap:10px;font-size:14.5px}
.addon .choice span:not(.qty){flex:1;min-width:0}
.addon .choice .qty{margin-left:auto}
.addon .choice .cdot,.addon .choice .cimg{margin-right:0}
.addon .cdot.clear{background:radial-gradient(circle at 35% 30%,#fff,rgba(214,224,233,.55) 60%,rgba(160,176,192,.7));border:1px solid #A9B8C6}
.addon .cnote{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.addon .cdot.disc{background:radial-gradient(circle at 35% 30%,#fff,#C9CEDB 60%,#8E95A6);border:2px dotted #A8AFBF}
.addon .cdot{width:18px;height:18px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.15);background-image:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,0) 55%)}
.addon .cimg{width:34px;height:34px;object-fit:contain;flex:none}
.addon .txt{display:flex;gap:8px;flex-wrap:wrap}
.addon select{border:1px solid var(--line);border-radius:8px;padding:7px 8px;background:var(--surface)}
.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}
.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}
.two>*{min-width:0}.two input,.two select{min-width:0;width:100%;box-sizing:border-box}
@media (max-width:520px){.two{grid-template-columns:1fr}}
/* more colors below: a soft fade and a nudge to scroll */
.swatches.more{-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
.swatches.more+.scrollnote{display:block}
.field textarea{min-height:92px;line-height:1.4}
.scrollnote{display:none;margin:-4px 0 0;font-size:13px;color:var(--muted);text-align:center}
.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}.added{bottom:calc(88px + env(safe-area-inset-bottom,0px))}}

.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 .added{position:absolute;bottom:auto;animation:none;transform:translateX(-50%)}
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}}

/* Desktop: the preview stays in place (only the order panel stays pinned) */
/* 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)}
}

/* inside a website the pinned parts glide into place instead of jumping as the page scrolls */
html.embed .builder>.preview,html.embed .pvart,html.embed aside.cart{transition:transform .18s cubic-bezier(.2,.7,.3,1);will-change:transform}
@media (prefers-reduced-motion:reduce){html.embed .builder>.preview,html.embed .pvart,html.embed aside.cart{transition:none}}
 /* inside a website on phones: a shorter pinned preview so customers can still see what they're tapping */
@media (max-width:900px){html.embed .builder>.preview svg{height:180px}html.embed .builder>.preview.pinned .tag{display:none}}
@media (max-width:700px){html.embed .pvart{height:190px}}
.testnote{margin:0;font-size:13px;line-height:1.45;background:#FFF6DA;color:#5B4A12;border-radius:10px;padding:9px 12px}

.privnote{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* demo shops: a strip across the top, in the shop's own colors (edge to edge: undoes the page's 8px margin and 16px side padding) */
.demobar{position:relative;z-index:30;margin:-8px -24px 8px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;background:var(--brand);color:var(--brand-ink);
  padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));font:500 14.5px/1.45 var(--body,system-ui,sans-serif);text-align:center}
.demobar p{margin:0;max-width:72ch}
.demobar a{color:inherit;font-weight:700;white-space:nowrap}
.colornote{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--muted);font-style:italic}

/* themed foils: photo grid, theme tabs, sets */
.fgridwrap{display:grid;gap:12px}
.ftabs{display:flex;flex-wrap:wrap;gap:6px}
.ftabs button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 13px;font:500 13px var(--sub,system-ui,sans-serif);cursor:pointer;min-height:36px}
.ftabs button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.ftile{display:grid;gap:6px;justify-items:center;align-content:start}
.fpick{position:relative;width:100%;display:grid;justify-items:center;gap:4px;padding:10px 6px 8px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;text-align:center}
.ftile.on .fpick{border-color:var(--brand);background:var(--brand-soft)}
.fart{width:72px;height:72px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fart>img{display:block;max-width:72px;max-height:72px;width:auto;height:auto;object-fit:contain}
.fart .cdot.disc{width:44px;height:44px}
.fset{display:grid;grid-template-columns:35px 35px;grid-template-rows:35px 35px;gap:2px;width:72px;height:72px}
.fset img{display:block;width:35px;height:35px;object-fit:contain}
.fl{font-size:13px;line-height:1.25}
.fl em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.fpick small{font-size:12px;color:var(--muted)}
.fbadge{position:absolute;top:-8px;right:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font:700 13px/24px var(--sub,system-ui,sans-serif)}
.fmore{justify-self:start;border:0;background:none;color:var(--ink);text-decoration:underline;font:600 14px var(--sub,system-ui,sans-serif);cursor:pointer;padding:6px 0;min-height:44px}

/* Shop front grid: one tile per thing the shop sells (shown when there are 2 or more) */
.shopgrid{display:grid;gap:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;text-align:left;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s}
.tile:hover{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(0,0,0,.4)}
.tart{aspect-ratio:1/1;max-width:100%;display:grid;place-items:center;padding:14px;background:var(--surface);border-bottom:1px solid var(--line)}
.tart svg{width:100%;height:100%;display:block}
.tart.photo{padding:0;background:var(--sunk);position:relative;overflow:hidden}
/* the photo sets its own square size (some browsers, like Safari, collapse a box whose only child is absolutely placed) */
.tart.photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.tart.photo svg.nophoto{width:46%;height:auto}
.tbody{display:grid;gap:4px;padding:14px 16px 16px;flex:1;align-content:start}
.tbody b{font-family:var(--display);font-size:19px;line-height:1.2}
.tdesc{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tfrom{margin-top:6px;font-weight:700;color:var(--brand)}
@media (max-width:520px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tart{padding:8px}.tbody{padding:10px 12px 12px}.tbody b{font-size:16px}.tdesc{font-size:13px}}
.card .art.photo{padding:0;overflow:hidden;background:var(--sunk)}
.card .art.photo img{width:100%;height:100%;object-fit:cover;display:block}
.card .art.photo svg.nophoto{width:40%;height:auto}

/* Custom items: the artist's photos instead of a drawn preview */
.pvart.photo{padding:0;overflow:hidden;background:var(--sunk);height:auto;aspect-ratio:4/5;max-width:100%}
.pvphoto{display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.pvphoto img{width:100%;height:100%;object-fit:cover;display:block}
.pvphoto svg.nophoto{width:40%;height:auto}
div.pvphoto{cursor:default}
.pvthumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.pvthumbs button{flex:0 0 auto;width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--sunk)}
.pvthumbs button[aria-pressed="true"]{border-color:var(--brand)}
.pvthumbs img{width:100%;height:100%;object-fit:cover;display:block}
.step h3 .opt{font-family:var(--body);font-size:14px;font-weight:400;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.pvart.photo{position:static;height:auto;aspect-ratio:1/1;box-shadow:none}.pvthumbs{margin-top:-8px}}

/* DIY kits and shipping */
.kitinc{display:grid;gap:6px;background:var(--sunk);border-radius:12px;padding:14px 16px;font-size:14.5px}
.kitinc b{font-family:var(--display);font-size:16px}
.kitinc ul{margin:0;padding-left:20px;display:grid;gap:2px}
.kitinc p{margin:0;color:var(--muted);font-size:13.5px}
.tart{position:relative}
.tship{position:absolute;top:10px;left:10px;background:var(--brand);color:var(--brand-ink);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.shipnote{margin:0 0 4px;font-size:13.5px;font-weight:600;color:var(--brand)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.field .opt{font-weight:400;color:var(--muted)}
#fulfil{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
#gBack{justify-self:start}
@media (max-width:400px){#fulfil button{padding:9px 4px;font-size:14px}}

/* Jumbo balloons: tassel choices and vinyl */
.tassels{display:flex;flex-wrap:wrap;gap:8px}
.tas,.vchip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px 8px 8px;cursor:pointer;font-weight:600;font-size:14px}
.tas[aria-pressed="true"],.vchip[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}
.tsw{display:inline-flex;width:34px;height:22px;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.tsw i{flex:1}
.tsw.none{background:repeating-linear-gradient(45deg,var(--sunk) 0 4px,var(--surface) 4px 8px)}
.vchip i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.vchip.vfont{padding:8px 16px;font-size:17px;font-weight:600}
.vrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.vlab{font-size:13px;color:var(--muted);min-width:70px}
.vseg{margin-bottom:12px;grid-template-columns:1fr 1fr}
.logobox{display:grid;gap:10px;justify-items:start}
.logobox img{max-width:180px;max-height:120px;object-fit:contain;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface)}
.logobox .upl{cursor:pointer}
.pvart.tall{height:600px}
@media (max-width:700px){.pvart.tall{height:min(46vh,380px)}}

/* jumbo vinyl: letters left */
.vcount{margin:-4px 0 0;font-size:13px;color:var(--muted)}
.vcount.full{color:var(--brand);font-weight:600}
/* DIY kit: vinyl message preview, and the artist's recommended supplies */
.kvprev{margin-top:12px;border-radius:14px;padding:16px 18px;text-align:center;font-size:24px;line-height:1.25;overflow-wrap:anywhere;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.kitinc .suphead{display:block;margin-top:12px}
.kitinc .supplies{margin:6px 0 0;padding-left:18px}
.kitinc .supplies a{color:var(--brand);text-underline-offset:3px}