/* ============ channel hero scenes ============
   One scene per sales-channel page, markup in _includes/heroes/<channel>.njk.
   Everything inside .chx-in is sized in em: its font-size follows the scene width
   (1em = 1/52 of it, 10px in the desktop column), so a scene scales down like a picture. */
.chx{container-type:inline-size;max-width:560px;margin:0 auto}
.chx-in{font-size:10px;font-size:min(10px,1.9231cqw);line-height:1.35;color:var(--ink);background:#fff;position:relative;overflow:hidden;text-align:left}
.chx-in b{font-weight:700}
.chx-in small{font-size:inherit}
.chx-in svg{width:1.6em;height:1.6em;flex:none;display:block}
.chx-ph{display:flex;justify-content:center}
.chx-ph .chx-in{font-size:10px}
/* float positions: bottom left over an empty panel, or pinned next to a detail */
.chx .float{z-index:5}
.chx .fl-l{left:-34px;right:auto;bottom:-18px}
.chx .fl-ig{right:-40px;top:150px}

/* product tile: the photo on a soft square, the print drawn over it */
.chx-tee{position:relative;background:var(--soft);border-radius:.8em;overflow:hidden;aspect-ratio:1;container-type:inline-size}
.chx-tee img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;mix-blend-mode:multiply}
.chx-pr{
  position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;
  font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:.8em;font-size:8.6cqw;letter-spacing:.1em;line-height:1.15;text-transform:uppercase;color:#111;
}
.chx-pr small{display:block;font-size:.62em;letter-spacing:.2em;color:var(--pink)}
.chx-tee.w .chx-pr{color:#fff}
.chx-tee.w .chx-pr small{color:var(--mint)}
.chx-tee.w img,.chx-tee.raw img{mix-blend-mode:normal}

/* the embedded Merch5 store as it renders inside somebody's page */
.m5s{padding:1.2em 1.4em 1.4em}
.m5s-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9em}
.m5s-h b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.5em;letter-spacing:-.01em}
.m5s-h span{background:var(--ink);color:#fff;font-size:1em;font-weight:600;padding:.35em .9em;border-radius:10em}
.m5s-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.m5s-p b{display:block;font-size:1.1em;margin-top:.5em;line-height:1.2}
.m5s-p>span{font-size:1.1em;color:var(--muted)}
.m5s.c2 .m5s-g{grid-template-columns:repeat(2,1fr)}
.m5s.c4 .m5s-g{grid-template-columns:repeat(4,1fr)}

/* the block being added in an editor */
.chx-sel{position:relative;border:.2em dashed var(--pink);border-radius:1em;background:#fff}
.chx-tag{position:absolute;z-index:2;left:1em;top:-1.15em;background:var(--pink);color:#fff;font-size:.95em;font-weight:700;letter-spacing:.06em;padding:.25em .8em;border-radius:.5em;display:flex;align-items:center;gap:.4em}
.chx-tag svg{width:1.2em;height:1.2em}
.chx-cur{position:absolute;z-index:3;width:2em!important;height:2em!important;fill:var(--ink);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.3))}

/* editor chrome shared by the builders */
.edx-top{display:flex;align-items:center;gap:1.4em;height:3.6em;padding:0 1.2em;border-bottom:1px solid var(--line);background:#fff;font-size:1em;font-weight:600;color:var(--muted);white-space:nowrap}
.edx-top .on{color:var(--ink)}
.edx-top .r{margin-left:auto;display:flex;align-items:center;gap:1.2em}
.edx-top .r b{background:var(--ink);color:#fff;padding:.5em 1.2em;border-radius:.5em;font-weight:600}
.edx-top svg{width:1.5em;height:1.5em}

/* the site being edited */
.st{background:#fff;position:relative}
.st-nav{display:flex;align-items:center;justify-content:space-between;padding:1em 1.4em;white-space:nowrap}
.st-nav b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.4em;letter-spacing:-.01em}
.st-nav span{display:flex;gap:1.2em;color:var(--muted);font-weight:500;font-size:1em}
.st-nav i{font-style:normal}
.st-hero{position:relative;height:12em;overflow:hidden;color:#fff}
.st-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-hero::after{content:"";position:absolute;inset:0;background:rgba(17,17,17,.38)}
.st-hero div{position:absolute;z-index:1;left:1.4em;right:1.4em;bottom:1.2em}
.st-hero b{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:2.3em;line-height:1.05;letter-spacing:-.02em}
.st-hero small{display:block;font-size:1.05em;margin-top:.3em;opacity:.92}

/* ---------- Instagram: profile, link in bio, the store sheet it opens ---------- */
.igp-top{display:flex;align-items:center;justify-content:space-between;padding:.8em 1.4em .4em}
.igp-top b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.6em}
.igp-top svg{width:2em;height:2em}
.igp-head{display:flex;align-items:center;gap:1.6em;padding:.6em 1.4em}
.igp-av{width:6.2em;height:6.2em;border-radius:50%;padding:.3em;background:linear-gradient(135deg,var(--pink),var(--purple));flex:none}
.igp-av img{width:100%;height:100%;border-radius:50%;border:.25em solid #fff;object-fit:cover}
.igp-st{display:flex;flex:1;justify-content:space-between;text-align:center;font-size:1.05em;color:var(--muted)}
.igp-st b{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.45em;color:var(--ink)}
.igp-bio{padding:.2em 1.4em .8em;font-size:1.15em;color:#333}
.igp-bio b{display:block;color:var(--ink)}
.igp-link{position:relative;display:inline-flex;align-items:center;gap:.4em;margin-top:.45em;font-weight:700;color:var(--ink);background:var(--mint);border-radius:.5em;padding:.3em .7em .3em .5em}
.igp-link svg{width:1.3em;height:1.3em}
.chx-tap{position:absolute;right:-1.5em;top:50%;width:2.6em;height:2.6em;margin-top:-.6em;border-radius:50%;border:.25em solid var(--pink);background:rgba(234,51,123,.18);animation:chx-tap 2.4s ease-in-out infinite}
@keyframes chx-tap{0%,100%{transform:scale(.8);opacity:.9}50%{transform:scale(1.1);opacity:.5}}
.igp-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:0 1.4em 1em}
.igp-btns span{background:var(--soft);border-radius:.7em;text-align:center;font-weight:600;font-size:1.15em;padding:.55em}
.igp-btns .on{background:var(--ink);color:#fff}
.igp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.2em}
.igp-grid>*{aspect-ratio:1;border-radius:0}
.igp-grid>img{width:100%;height:100%;object-fit:cover}
.igp-sheet{position:relative;margin-top:-6.4em;background:#fff;border-radius:1.8em 1.8em 0 0;box-shadow:0 -1em 3em rgba(0,0,0,.22);padding:.8em 1em 0}
.igp-grab{display:block;width:3.6em;height:.4em;border-radius:1em;background:#D9D9D9;margin:0 auto .8em}
.igp-url{display:flex;align-items:center;justify-content:center;gap:.4em;background:var(--soft);border-radius:10em;font-size:1.05em;font-weight:600;color:#555;padding:.45em;margin-bottom:.9em}
.igp-url svg{width:1.2em;height:1.2em}
.igp-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.igp-prods b{display:block;font-size:1.05em;margin-top:.4em;line-height:1.2}
.igp-prods span{font-size:1.05em;color:var(--muted)}
.igp-sheet .ph-bar{margin:12px 0 14px}

/* ---------- TikTok: full-screen video, comment reply, link in bio ---------- */
.ttv{height:50em;background:#111;color:#fff}
.ttv>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ttv::after{content:"";position:absolute;inset:auto 0 0 0;height:24em;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.ttv>*{z-index:1}
.ttv .ph-notch{position:absolute;left:50%;top:0;margin-left:-60px}
.ttv-tabs{position:absolute;top:3.2em;left:0;right:0;display:flex;justify-content:center;gap:1.6em;font-size:1.3em;font-weight:600;color:rgba(255,255,255,.7);text-shadow:0 1px 4px rgba(0,0,0,.4)}
.ttv-tabs b{color:#fff;border-bottom:.2em solid #fff;padding-bottom:.2em}
.ttv-reply{position:absolute;left:1.2em;top:9.6em;max-width:15em;background:#fff;color:var(--ink);border-radius:1em;padding:.7em 1em;font-size:1.2em;font-weight:700;line-height:1.25;box-shadow:0 .6em 1.6em rgba(0,0,0,.25);transform:rotate(-3deg)}
.ttv-reply small{display:block;font-size:.8em;font-weight:600;color:var(--muted);margin-bottom:.15em}
.ttv-rail{position:absolute;right:.9em;bottom:11em;display:grid;gap:1.3em;justify-items:center;font-size:1em;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ttv-rail span{display:grid;justify-items:center;gap:.2em}
.ttv-rail svg{width:2.8em;height:2.8em;fill:#fff;stroke:none}
.ttv-av{width:3.8em;height:3.8em;border-radius:50%;border:.2em solid #fff;background:linear-gradient(135deg,var(--pink),var(--purple));position:relative;margin-bottom:.6em}
.ttv-av::after{content:"+";position:absolute;left:50%;bottom:-.9em;width:1.7em;height:1.7em;margin-left:-.85em;border-radius:50%;background:var(--pink);font-size:1.1em;line-height:1.6;text-align:center;text-shadow:none}
.ttv-cap{position:absolute;left:1.2em;right:6em;bottom:5.6em;font-size:1.2em;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.ttv-cap b{display:block;font-size:1.1em;margin-bottom:.15em}
.ttv-link{display:inline-flex;align-items:center;gap:.4em;margin-top:.6em;background:var(--mint);color:#00332A;font-weight:700;text-shadow:none;border-radius:.5em;padding:.35em .7em .35em .5em;position:relative}
.ttv-link svg{width:1.2em;height:1.2em}
.ttv-nav{position:absolute;left:0;right:0;bottom:0;height:4.4em;background:#000;display:flex;align-items:center;justify-content:space-around;font-size:1em;font-weight:600;color:rgba(255,255,255,.65)}
.ttv-nav b{color:#fff}
.ttv-nav i{font-style:normal;background:#fff;color:#000;font-size:1.7em;line-height:1;font-weight:500;padding:.1em .75em .2em;border-radius:.45em}
.chx .fl-prod{left:-40px;bottom:214px;padding:10px 14px 10px 10px}
.fl-prod .chx-tee{width:54px;border-radius:8px;flex:none}
.fl-prod .chx-pr{font-size:26cqw;color:var(--mint)!important;top:42%}

/* ---------- YouTube: watch page, link in the description, pinned comment ---------- */
.ytw{display:grid;grid-template-columns:1fr 15.5em;gap:1.4em;padding:1.4em}
.ytw-player{position:relative;aspect-ratio:16/9;border-radius:1em;overflow:hidden;background:#111}
.ytw-player img{width:100%;height:100%;object-fit:cover}
.ytw-play{position:absolute;left:50%;top:50%;width:5em;height:5em;margin:-2.5em 0 0 -2.5em;border-radius:50%;background:rgba(17,17,17,.72);display:grid;place-items:center;color:#fff}
.ytw-play svg{width:2.2em;height:2.2em;fill:#fff;margin-left:.3em}
.ytw-bar{position:absolute;left:1em;right:1em;bottom:1em;height:.4em;border-radius:1em;background:rgba(255,255,255,.45)}
.ytw-bar i{display:block;width:34%;height:100%;border-radius:1em;background:var(--pink)}
.ytw-t{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.7em;line-height:1.15;letter-spacing:-.01em;margin:.6em 0 .5em}
.ytw-ch{display:flex;align-items:center;gap:.8em;font-size:1.15em}
.ytw-ch small{display:block;color:var(--muted);font-size:.9em}
.ytw-av{width:3em;height:3em;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--purple));flex:none}
.ytw-sub{margin-left:auto;background:var(--ink);color:#fff;font-weight:600;padding:.5em 1.2em;border-radius:10em}
.ytw-desc{background:var(--soft);border-radius:.9em;padding:.8em 1em;margin-top:.9em;font-size:1.15em;color:#333}
.ytw-desc b{display:block;font-size:.95em}
.ytw-link{font-weight:700;color:var(--ink);background:var(--mint);border-radius:.3em;padding:0 .3em;position:relative}
.ytw-pin{display:flex;gap:.8em;margin-top:.9em;font-size:1.1em;color:#333}
.ytw-pin .ytw-av{width:2.4em;height:2.4em}
.ytw-pin small{display:block;color:var(--muted);font-size:.9em;font-weight:600}
.ytw-side{border:1px solid var(--line);border-radius:1em;padding:1em;align-self:start}
.ytw-k{display:block;font-size:.9em!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-bottom:.7em}
.ytw-side .m5s-p+.m5s-p{margin-top:.9em}
.ytw-buy{display:block;background:var(--pink);color:#fff;text-align:center;font-size:1.15em;font-weight:600;padding:.6em;border-radius:.6em;margin-top:1em}

/* ---------- Shopify: store admin, orders handed to Merch5 ---------- */
.sha{display:grid;grid-template-columns:11.5em 1fr;min-height:38em}
.sha-side{background:var(--soft);border-right:1px solid var(--line);padding:1.2em .9em;display:grid;gap:.3em;align-content:start;font-size:1.15em;font-weight:600;color:#555}
.sha-side>*{display:flex;align-items:center;gap:.6em;padding:.5em .7em;border-radius:.6em}
.sha-side svg{width:1.4em;height:1.4em}
.sha-store{font-family:Roboto,Arial,sans-serif;font-weight:900!important;color:var(--ink);margin-bottom:.5em}
.sha-store i{width:1.6em;height:1.6em;border-radius:.4em;background:var(--ink);display:block}
.sha-side .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sha-side em{font-style:normal;margin-left:auto;background:var(--ink);color:#fff;font-size:.8em;padding:.05em .55em;border-radius:1em}
.sha-side small{font-size:.8em;letter-spacing:.12em;text-transform:uppercase;color:#999;margin-top:.8em;padding-bottom:.1em}
.sha-app{color:var(--ink)}
.sha-app i{width:.8em;height:.8em;border-radius:50%;background:var(--mint);box-shadow:0 0 0 .25em rgba(84,255,219,.35);display:block;margin:0 .3em}
.sha-main{padding:1.3em 1.4em}
.sha-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8em}
.sha-h b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.8em}
.sha-h span{font-size:1em;font-weight:600;color:var(--muted)}
.sha-row{display:grid;grid-template-columns:3.6em 1fr auto auto;align-items:center;gap:1em;padding:.7em 0;border-top:1px solid var(--line);font-size:1.15em}
.sha-row .chx-tee{border-radius:.5em}
.sha-row small{display:block;color:var(--muted);font-size:.9em}
.sha-st{font-size:.9em;font-weight:700;padding:.25em .8em;border-radius:10em;background:var(--soft);color:#555;white-space:nowrap}
.sha-st.m{background:var(--mint);color:#00332A}
.sha-card{display:grid;grid-template-columns:15em 1fr;gap:1.2em;border:1px solid var(--line);border-radius:1em;padding:.9em;margin-top:.6em;box-shadow:0 .8em 2em rgba(0,0,0,.06)}
.sha-card>img{width:100%;height:100%;object-fit:cover;border-radius:.7em;min-height:11em}
.sha-card b{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.3em;margin-bottom:.5em}
.sha-tl{display:grid;gap:.55em;font-size:1.1em;color:#444}
.sha-tl span{display:flex;align-items:center;gap:.6em}
.sha-tl i{width:1.5em;height:1.5em;border-radius:50%;background:var(--mint);color:#00332A;display:grid;place-items:center;flex:none}
.sha-tl i svg{width:.9em;height:.9em;stroke-width:4}
.sha-tl .now{font-weight:700;color:var(--ink)}
.sha-tl .now i{background:var(--pink);box-shadow:0 0 0 .3em rgba(234,51,123,.2)}
.sha-tl .next{color:#999}
.sha-tl .next i{background:#fff;border:.15em solid var(--line)}

/* ---------- Etsy: a handmade-marketplace listing with its production partner ---------- */
.etl-top{display:flex;align-items:center;gap:1.2em;padding:1em 1.4em;border-bottom:1px solid var(--line)}
.etl-top svg{width:1.9em;height:1.9em}
.etl-search{flex:1;display:flex;align-items:center;gap:.6em;border:.15em solid var(--ink);border-radius:10em;padding:.5em 1.1em;font-size:1.15em;color:#555}
.etl-search svg{width:1.4em;height:1.4em;margin-left:auto}
.etl-body{display:grid;grid-template-columns:4.6em 21em 1fr;gap:1em;padding:1.3em 1.4em 1.5em}
.etl-thumbs{display:grid;gap:.7em;align-content:start}
.etl-thumbs>*{border-radius:.6em;aspect-ratio:1;overflow:hidden}
.etl-thumbs img{width:100%;height:100%;object-fit:cover}
.etl-thumbs .on{outline:.2em solid var(--ink);outline-offset:.15em}
.etl-photo{position:relative;border-radius:1em;overflow:hidden;aspect-ratio:1}
.etl-photo img{width:100%;height:100%;object-fit:cover}
.etl-badge{position:absolute;left:.9em;top:.9em;background:var(--yellow);color:#3d3d1f;font-size:1em;font-weight:700;padding:.3em .9em;border-radius:10em}
.etl-fav{position:absolute;right:.9em;top:.9em;width:3em;height:3em;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 .3em 1em rgba(0,0,0,.15)}
.etl-info{font-size:1.15em;color:#444;min-width:0}
.etl-shop{display:block;font-weight:600;color:var(--ink)}
.etl-stars{display:flex;align-items:center;gap:.1em;color:var(--muted);font-size:.9em;margin:.2em 0 .6em}
.etl-stars svg{width:1.1em;height:1.1em;fill:var(--ink);stroke:none}
.etl-t{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.5em;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.etl-price{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:2em;color:var(--ink);margin:.25em 0}
.etl-sizes{display:flex;gap:.4em;margin-bottom:.8em}
.etl-sizes span{border:1px solid #ddd;border-radius:.5em;padding:.25em .7em;font-size:.9em;font-weight:600}
.etl-sizes .on{background:var(--ink);border-color:var(--ink);color:#fff}
.etl-buy{display:block;background:var(--ink);color:#fff;text-align:center;font-weight:600;padding:.7em;border-radius:10em}
.etl-partner{display:flex;gap:.7em;align-items:flex-start;background:rgba(84,255,219,.22);border:1px solid var(--mint);border-radius:.9em;padding:.8em;margin-top:1em;line-height:1.3;font-size:.95em;color:#00332A}
.etl-partner b{display:block;color:var(--ink)}
.etl-partner i{width:1.7em;height:1.7em;border-radius:50%;background:var(--mint);display:grid;place-items:center;flex:none}
.etl-partner svg{width:1em;height:1em;stroke-width:4}
.etl-ship{display:flex;align-items:center;gap:.6em;margin-top:.8em;font-size:.95em;color:var(--muted)}

/* ---------- GoDaddy: section list on the right, a coffee shop site ---------- */
.gdy-body{display:grid;grid-template-columns:1fr 14.5em}
.gdy-body .st{padding-bottom:1.4em}
.gdy-body .chx-sel{margin:1.8em 1em 0}
.gdy-panel{border-left:1px solid var(--line);background:var(--soft);padding:1.2em 1em;display:grid;gap:.6em;align-content:start}
.gdy-panel>b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.3em;margin-bottom:.2em}
.gdy-panel span{display:flex;align-items:center;gap:.7em;background:#fff;border:1px solid var(--line);border-radius:.7em;padding:.65em .8em;font-size:1.1em;font-weight:600;color:#555}
.gdy-panel span.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gdy-panel svg{width:1.4em;height:1.4em}
.gdy-panel small{display:block;font-size:1em;color:var(--muted);line-height:1.35;padding:0 .2em}

/* ---------- WordPress: block editor, Custom HTML block in a blog page ---------- */
.wpe-top{background:var(--ink);border:0;color:#bbb}
.wpe-top .r b{background:#fff;color:var(--ink)}
.wpe-plus{width:2.4em;height:2.4em;border-radius:.4em;background:#fff;color:var(--ink);display:grid;place-items:center}
.wpe-body{display:grid;grid-template-columns:1fr 13.5em}
.wpe-doc{padding:1.4em 2.2em 1.6em;min-width:0}
.wpe-feat{height:8.4em;border-radius:.8em;overflow:hidden}
.wpe-feat img{width:100%;height:100%;object-fit:cover}
.wpe-title{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:2.4em;letter-spacing:-.02em;line-height:1.1;margin:.5em 0 .25em}
.wpe-p{font-size:1.15em;color:var(--muted);line-height:1.45}
.wpe-doc .chx-sel{margin-top:3.4em;border:.15em solid var(--ink);border-radius:.3em}
.wpe-tb{position:absolute;left:-.15em;top:-3em;display:flex;align-items:center;background:#fff;border:.15em solid var(--ink);border-radius:.3em;font-size:1.05em;font-weight:600;white-space:nowrap}
.wpe-tb>*{padding:.45em .8em;display:flex;align-items:center;gap:.5em;border-right:1px solid var(--line)}
.wpe-tb>:last-child{border:0}
.wpe-tb svg{width:1.3em;height:1.3em}
.wpe-tb i{font-style:normal;color:var(--muted)}
.wpe-tb i.on{color:var(--ink);box-shadow:inset 0 -.2em 0 var(--ink)}
.wpe-side{border-left:1px solid var(--line);font-size:1.05em;color:var(--muted)}
.wpe-tabs{display:flex;border-bottom:1px solid var(--line);font-weight:600}
.wpe-tabs>*{padding:.8em 1em}
.wpe-tabs b{color:var(--ink);box-shadow:inset 0 -.2em 0 var(--ink)}
.wpe-bi{display:flex;gap:.7em;padding:1em;line-height:1.35}
.wpe-bi b{display:block;color:var(--ink)}
.wpe-code{margin:0 1em;background:#1B1B1B;color:#EAEAEA;border-radius:.6em;padding:.8em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;line-height:1.5;word-break:break-all}
.wpe-code u{text-decoration:none;color:var(--yellow)}
.wpe-zero{display:flex;justify-content:space-between;align-items:baseline;margin:1em;padding-top:.8em;border-top:1px solid var(--line);font-weight:600}
.wpe-zero b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.8em;color:var(--ink)}

/* ---------- Wix: free-form canvas, an element with handles, a bar site ---------- */
.wxe-body{display:grid;grid-template-columns:4em 12.5em 1fr;background:#EDEDED}
.wxe-rail{background:#fff;border-right:1px solid var(--line);display:grid;gap:.7em;align-content:start;justify-items:center;padding:1em 0}
.wxe-rail span{width:2.8em;height:2.8em;border-radius:50%;display:grid;place-items:center;color:#555}
.wxe-rail .on{background:var(--ink);color:#fff}
.wxe-fly{background:#fff;border-right:1px solid var(--line);padding:1.1em .8em;display:grid;gap:.25em;align-content:start;font-size:1.1em;font-weight:600;color:#555}
.wxe-fly>b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.15em;color:var(--ink);padding:0 .6em .5em}
.wxe-fly span{display:flex;align-items:center;gap:.5em;padding:.5em .6em;border-radius:.6em}
.wxe-fly .on{background:var(--soft);color:var(--ink)}
.wxe-sub{margin:.3em 0 0 .6em;padding-left:.6em;border-left:.15em solid var(--line);display:grid;gap:.25em}
.wxe-sub .on{background:var(--ink);color:#fff}
.wxe-sub svg{width:1.3em;height:1.3em}
.wxe-canvas{margin:1em 1.6em 0 1.2em;box-shadow:0 .4em 1.6em rgba(0,0,0,.12);background:#141414;color:#fff;padding-bottom:1.8em}
.wxe-canvas .st-nav span{color:rgba(255,255,255,.7)}
.wxe-canvas .st-hero{height:11em}
.wxe-el{position:relative;margin:1.6em 1.3em 0;border:.15em solid var(--pink);background:#fff;color:var(--ink)}
.wxe-el>i{position:absolute;z-index:2;width:.9em;height:.9em;background:#fff;border:.15em solid var(--pink);border-radius:50%;margin:-.45em}
.wxe-el .chx-tag{border-radius:.4em .4em 0 0;left:-.15em;top:-2em;padding:.35em .8em}
.wxe-el .m5s{padding:1em}
.wxe-el .chx-cur{right:-1.7em;top:50%}

/* ---------- Tilda: stacked blocks with ids, the block library, a conference page ---------- */
.tld-body{display:grid;grid-template-columns:13em 1fr}
.tld-lib{background:var(--ink);color:#bbb;padding:1.2em 1em;display:grid;gap:.15em;align-content:start;font-size:1.1em;font-weight:600}
.tld-lib>b{font-family:Roboto,Arial,sans-serif;font-weight:900;color:#fff;font-size:1.15em;padding:0 .6em .6em}
.tld-lib span{padding:.42em .6em;border-radius:.5em}
.tld-lib .on{background:#2B2B2B;color:#fff}
.tld-pick{margin-top:.5em;background:#fff;color:var(--ink);border-radius:.7em;padding:.7em .8em;line-height:1.3;box-shadow:0 0 0 .2em var(--pink)}
.tld-pick small{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.3em;color:var(--pink)}
.tld-page{min-width:0}
.tld-blk{position:relative}
.tld-id{position:absolute;z-index:2;left:.8em;top:.8em;background:#fff;color:var(--ink);font-size:.95em;font-weight:700;padding:.2em .7em;border-radius:.4em;box-shadow:0 .2em .8em rgba(0,0,0,.2)}
.tld-cover{position:relative;height:16.5em;color:#fff;overflow:hidden;text-align:center}
.tld-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tld-cover::after{content:"";position:absolute;inset:0;background:rgba(17,17,17,.45)}
.tld-cover div{position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-50%)}
.tld-cover small{display:block;font-size:1.05em;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.tld-cover b{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:4.6em;line-height:1;letter-spacing:-.03em;margin:.1em 0 .2em}
.tld-cover span{display:inline-block;border:.15em solid #fff;border-radius:10em;font-size:1.1em;font-weight:600;padding:.4em 1.3em}
.tld-add{position:relative;height:0;z-index:3}
.tld-add i{position:absolute;left:50%;top:-1.3em;width:2.6em;height:2.6em;margin-left:-1.3em;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;box-shadow:0 .4em 1em rgba(234,51,123,.4)}
.tld-blk.on{box-shadow:inset 0 0 0 .2em var(--pink)}
.tld-blk.on .tld-id{background:var(--pink);color:#fff;box-shadow:none}
.tld-blk.on .m5s{padding:3.4em 1.6em 1.6em}

/* ---------- Squarespace: black and white portfolio, the block picker ---------- */
.sqs-top{background:var(--ink);border:0;color:#bbb}
.sqs-top .on{color:#fff}
.sqs-top .r b{background:#fff;color:var(--ink);border-radius:0}
.sqs-page{padding:0 2em 3.8em}
.sqs-nav{display:flex;align-items:baseline;justify-content:space-between;padding:1.4em 0 1.3em}
.sqs-nav b{font-size:1.25em;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.sqs-nav span{display:flex;gap:1.6em;font-size:1em;color:var(--muted)}
.sqs-nav u{color:var(--ink);text-underline-offset:.35em}
.sqs-nav i{font-style:normal}
.sqs-cols{display:grid;grid-template-columns:17em 1fr;gap:2em;align-items:start}
.sqs-photo{height:29em;overflow:hidden}
.sqs-photo img{width:100%;height:100%;object-fit:cover}
.sqs-t{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:2.5em;letter-spacing:-.02em;line-height:1.05}
.sqs-p{font-size:1.15em;color:var(--muted);margin:.5em 0 0;max-width:22em}
.sqs-ins{position:relative;height:.2em;background:var(--ink);margin:1.5em 0 1.6em}
.sqs-ins i{position:absolute;left:-.2em;top:-1.1em;width:2.4em;height:2.4em;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.sqs-pop{position:absolute;z-index:4;left:-18.4em;top:-5.4em;width:17em;background:#fff;border:1px solid var(--line);box-shadow:0 1.2em 3em rgba(0,0,0,.2);padding:.8em;display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
.sqs-pop span{display:grid;justify-items:center;gap:.3em;padding:.7em 0 .5em;font-size:.95em;font-weight:600;color:#555;background:var(--soft)}
.sqs-pop .on{background:var(--ink);color:#fff}
.sqs-cols .chx-sel{border-radius:0;border-style:solid;border-width:.15em}
.sqs-cols .chx-tag{border-radius:0}
.sqs-cols .chx-tee{border-radius:0}
.sqs-cols .m5s{padding:1.2em}

/* ---------- Weebly: element tiles dragged from the Build panel, a youth club site ---------- */
.wbl-top{background:#2B2B2B;border:0;color:#aaa}
.wbl-top .on{color:#fff;box-shadow:inset 0 -.25em 0 var(--mint);align-self:stretch;display:flex;align-items:center}
.wbl-top .r b{background:var(--mint);color:#00332A}
.wbl-body{display:grid;grid-template-columns:14.5em 1fr}
.wbl-panel{background:#3A3A3A;color:#aaa;padding:1em .9em;font-size:.95em;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.wbl-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin:.7em 0 1.1em}
.wbl-tiles span,.wbl-ghost{display:grid;justify-items:center;align-content:center;gap:.35em;aspect-ratio:1;border-radius:.5em;background:#4A4A4A;color:#eee;font-size:.82em;font-weight:600;letter-spacing:0;text-transform:none;text-align:center;line-height:1.1}
.wbl-tiles svg{width:1.9em;height:1.9em}
.wbl-tiles .on{background:transparent;border:.15em dashed #777;color:#777}
.wbl-canvas{min-width:0;padding-bottom:1.6em}
.wbl-canvas .st-hero{height:11.5em}
.wbl-canvas .chx-sel{margin:1.8em 1.2em 0}
.wbl-ghost{position:absolute;z-index:3;left:-4.4em;top:-3.4em;width:5.4em;font-size:1em;background:var(--ink);color:#fff;box-shadow:0 1em 2.4em rgba(0,0,0,.35);transform:rotate(-6deg)}
.wbl-ghost svg{width:1.9em;height:1.9em}
.wbl-ghost .chx-cur{right:-.9em;bottom:-.9em}

/* ---------- SITE123: the page list with a custom code page, a band site ---------- */
.s123-top{gap:0;padding:0}
.s123-top>span{padding:0 1.4em;height:100%;display:flex;align-items:center;border-right:1px solid var(--line)}
.s123-top .on{background:var(--ink);color:#fff}
.s123-top .r{padding-right:1.2em}
.s123-body{display:grid;grid-template-columns:16em 1fr}
.s123-list{border-right:1px solid var(--line);padding:1.2em 1em;display:grid;gap:.5em;align-content:start}
.s123-list>b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.3em;margin-bottom:.2em}
.s123-list span{display:flex;align-items:center;gap:.5em;border:1px solid var(--line);border-radius:.6em;padding:.6em .7em .6em .4em;font-size:1.1em;font-weight:600;color:#555}
.s123-list span svg{width:1.3em;height:1.3em;color:#bbb}
.s123-list em{font-style:normal;margin-left:auto;width:2.2em;height:1.2em;border-radius:1em;background:var(--mint);position:relative}
.s123-list em::after{content:"";position:absolute;right:.15em;top:.15em;width:.9em;height:.9em;border-radius:50%;background:#fff}
.s123-list .on{border:.15em solid var(--pink);color:var(--ink);display:grid;grid-template-columns:auto 1fr auto;row-gap:.1em}
.s123-list .on small{grid-column:2/4;font-size:.85em;font-weight:700;letter-spacing:.06em;color:var(--pink);display:flex;align-items:center;gap:.4em}
.s123-list .on small svg{color:var(--pink);width:1.2em;height:1.2em}
.s123-new{border-style:dashed!important;justify-content:center;color:var(--muted)!important}
.s123-canvas{min-width:0;padding-bottom:1.4em}
.s123-canvas .st-hero{height:13em}
.s123-dates{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);font-size:1.05em;color:var(--muted)}
.s123-dates span{padding:.7em 1.4em;border-right:1px solid var(--line)}
.s123-dates b{display:block;color:var(--ink)}

/* ---------- Mozello: toolbar with the locked catalog, module menu, a guesthouse in three languages ---------- */
.mzl-lock{display:flex;align-items:center;gap:.4em;color:#aaa}
.mzl-lock svg{width:1.2em;height:1.2em}
.mzl-lock em{font-style:normal;font-size:.85em;font-weight:700;background:var(--yellow);color:#3d3d1f;padding:.1em .6em;border-radius:1em}
.mzl-lang{gap:.2em!important;font-weight:600}
.mzl-lang i{font-style:normal;padding:.15em .5em;border-radius:.4em}
.mzl-lang .on{background:var(--ink);color:#fff}
.mzl .st-hero{height:12.5em}
.mzl-row{display:grid;grid-template-columns:13em 1fr;gap:1.2em;padding:1.6em 1.4em 3.6em}
.mzl-menu{align-self:start;border:1px solid var(--line);border-radius:.9em;box-shadow:0 1em 2.6em rgba(0,0,0,.14);padding:.7em;display:grid;gap:.2em;font-size:1.1em;font-weight:600;color:#555}
.mzl-menu>b{font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.1em;color:var(--ink);padding:.2em .6em .5em}
.mzl-menu span{display:flex;align-items:center;gap:.6em;padding:.5em .6em;border-radius:.6em}
.mzl-menu svg{width:1.4em;height:1.4em}
.mzl-menu .on{background:var(--ink);color:#fff}
.mzl-row .m5s{padding:1.1em}

/* ---------- Weblium: a startup landing with the same store in the phone preview ---------- */
.wbm-top .dev{display:flex;gap:.3em;margin:0 auto}
.wbm-top .dev span{padding:.4em .7em;border-radius:.5em;display:block}
.wbm-top .dev .on{background:var(--soft);color:var(--ink)}
.wbm-top .r{margin-left:0}
.wbm-nav>i{font-style:normal;background:var(--ink);color:#fff;font-weight:600;font-size:1em;padding:.4em 1em;border-radius:10em}
.wbm-hero{display:grid;grid-template-columns:1fr 21em;align-items:stretch;background:#D7EFE2}
.wbm-hero>div{padding:1.8em 0 1.8em 1.6em;align-self:center}
.wbm-hero b{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:2.5em;line-height:1.05;letter-spacing:-.02em}
.wbm-hero small{display:block;font-size:1.1em;color:#3c5a4c;margin:.5em 0 .9em}
.wbm-hero i{display:inline-block;font-style:normal;background:var(--ink);color:#fff;font-weight:600;font-size:1.1em;padding:.5em 1.2em;border-radius:10em}
.wbm-hero img{width:100%;height:13em;object-fit:cover;object-position:78% 50%}
.wbm-store{position:relative;padding:1.8em 15em 4.6em 1.4em}
.wbm-store .m5s{padding:1em}
.wbm-phone{position:absolute;z-index:3;right:1.4em;bottom:0;width:12em;border:.5em solid #1B1B1B;border-bottom:0;border-radius:1.6em 1.6em 0 0;background:#fff;box-shadow:0 1em 3em rgba(0,0,0,.25);padding:.9em .7em 0}
.wbm-phone::before{content:"";display:block;width:3.4em;height:.45em;border-radius:1em;background:#1B1B1B;margin:0 auto .7em}
.wbm-phone b{display:block;font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.1em;margin-bottom:.4em}
.wbm-phone .chx-tee{aspect-ratio:1.25}
.wbm-phone span{display:block;font-size:.95em;font-weight:600;padding:.35em 0 .5em}
.wbm-phone u{display:block;text-decoration:none;background:var(--pink);color:#fff;text-align:center;font-size:.95em;font-weight:600;padding:.45em;border-radius:.5em .5em 0 0}

@media(max-width:980px){
  .chx .fl-prod{left:-8px}
}
@media(prefers-reduced-motion:reduce){.chx-tap{animation:none}}

/* ============ phone layout ============
   Under 500px of scene width a scaled-down desktop window is unreadable, so the scene is re-cut:
   1em grows to about 11px (1/29 of the width), editor side panels go, and the part the page is
   about (the code block with the store, the link, the order) takes the full width. Phones only:
   the two-column desktop hero also has a narrow scene and keeps the full window. */
@media (max-width:640px){
@container (max-width:500px){
  .chx-in{font-size:min(3.4cqw,13px)}
  .chx-ph .chx-in{font-size:min(3.7cqw,11px)}
  .chx-ph .phone-lg{width:min(100%,320px)}

  /* shared pieces */
  .edx-top{gap:1.1em;padding:0 1em}
  .edx-top>span:nth-child(n+3):not(.r):not(.mzl-lock){display:none}
  .m5s{padding:1em}
  .m5s-g{gap:.8em}
  .m5s-h b{font-size:1.35em}
  .chx-tag{font-size:1em}
  .st-hero{height:9.5em}
  .st-hero b{font-size:2em}

  /* Instagram, TikTok: the phone only gets a larger base */
  .ttv{height:46em}
  .ttv-reply small{font-size:.85em}

  /* YouTube: the video and its description, the store behind the link as one row */
  .ytw{display:block;padding:1em}
  .ytw-t{font-size:1.5em}
  .ytw-pin{display:none}
  .ytw-side{display:grid;grid-template-columns:7.5em 7.5em 1fr;gap:0 .9em;align-items:center;margin-top:1em;padding:.9em}
  .ytw-k{grid-column:1/-1;font-size:1em!important}
  .ytw-side .m5s-p+.m5s-p{margin-top:0}
  .ytw-buy{margin-top:0}

  /* Shopify: the orders list and the order being printed */
  .sha{display:block;min-height:0}
  .sha-side{display:none}
  .sha-main{padding:1.1em 1em 1.2em}
  .sha-h b{font-size:1.6em}
  .sha-row{grid-template-columns:3.4em 1fr auto;gap:.8em}
  .sha-row .sha-st:not(.m){display:none}
  .sha-card{grid-template-columns:8.5em 1fr;gap:1em}
  .sha-card>img{min-height:0}

  /* Etsy: photo beside the title and price, the production partner note full width */
  .etl-top{padding:.9em 1em}
  .etl-body{display:block;padding:1.1em 1em 1.2em}
  .etl-body::after{content:"";display:block;clear:both}
  .etl-thumbs,.etl-fav{display:none}
  .etl-photo{float:left;width:12em;margin:0 1em .9em 0}
  .etl-stars{flex-wrap:wrap}
  .etl-t{font-size:1.3em}
  .etl-price{font-size:1.7em}
  .etl-sizes{clear:left}

  /* builders: the site and the block that holds the store */
  .wxe-body,.wpe-body,.gdy-body,.tld-body,.wbl-body,.s123-body{display:block}
  .wxe-rail,.wxe-fly,.gdy-panel,.tld-lib,.wbl-panel,.mzl-menu,.sqs-pop,.wbm-phone{display:none}

  .wxe-canvas{margin:1em 1em 0}
  .wxe-canvas .st-hero{height:9em}
  .wxe-el{margin:2.2em 1em 0}
  .wxe-el .chx-cur{right:-1.2em}

  .wpe-doc{padding:1.2em 1.2em 1.4em}
  .wpe-feat{height:7em}
  .wpe-title{font-size:2em}
  .wpe-side{border-left:0;border-top:1px solid var(--line)}
  .wpe-side>*:not(.wpe-zero){display:none}
  .wpe-zero{margin:.7em 1.2em;padding:0;border:0}

  .gdy-body .chx-sel{margin:1.8em 1em 0}

  .tld-cover{height:11em}
  .tld-cover b{font-size:3.4em}
  .tld-id{font-size:1em}
  .tld-blk.on .tld-id::after{content:" \00B7  HTML code"}
  .tld-blk.on .m5s{padding:3.2em 1.2em 1.2em}

  .sqs-page{padding:0 1.2em 1.6em}
  .sqs-nav{padding:1.1em 0}
  .sqs-nav b{font-size:1.1em;letter-spacing:.2em}
  .sqs-nav span{gap:1.1em}
  .sqs-cols{display:block}
  .sqs-photo{height:9em;margin-bottom:1.2em}
  .sqs-t{font-size:2em}
  .sqs-ins{margin:1.4em 0 2em}
  .sqs-cols .m5s-g{grid-template-columns:repeat(2,9.5em)}

  .wbl-canvas .chx-sel{margin:1.8em 1em 0}
  .wbl-ghost{left:auto;right:1.6em;top:-6.4em;width:5.8em}

  .s123-list{display:block;border-right:0;border-bottom:1px solid var(--line);padding:.8em 1em}
  .s123-list>*:not(.on){display:none}
  .s123-list .on small{font-size:1em}
  .s123-canvas .st-hero{height:9.5em}
  .s123-dates span{padding:.6em 1em}

  .mzl .edx-top>span:nth-child(2){display:none}
  .mzl .edx-top .r{font-size:0;gap:0}
  .mzl .edx-top .r b{font-size:min(3.4cqw,13px)}
  .mzl-lock em{font-size:1em}
  .mzl .st-nav>span:not(.mzl-lang){display:none}
  .mzl-row{display:block;padding:2em 1em 1.4em}

  .wbm-nav>span{display:none}
  .wbm-hero{grid-template-columns:1fr 10em}
  .wbm-hero>div{padding:1.4em 0 1.4em 1.2em}
  .wbm-hero b{font-size:1.9em}
  .wbm-hero img{height:100%;min-height:11em}
  .wbm-store{padding:2em 1em 1.4em}
}
}