:root{color-scheme:only light}  /* Oct 12: stop phone browsers' forced dark mode (Samsung Internet / Chrome) repainting the store */
/* Pentatonics 4 The People, design v2 (Oct 10 2026). Dark frame JC picked (look C); the merch is the only loud thing.
   Type: Holtwood One SC (the logo's wood type) for the one big headline, IBM Plex Mono for catalogue-style labels, system sans for reading.
   Motion: transform/opacity only, custom curves, < 300 ms, hover gated to real pointers, reduced-motion respected. */
@font-face{font-family:Holtwood;src:url(/fonts/HoltwoodOneSC-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/IBMPlexMono-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
:root{--on:#141418;--hdr:rgba(20,20,24,.86);--bg:#141418;--ink:#F3F0EA;--muted:#8F8C99;--line:#26262D;--tile:#EFEBE3;--card:#1B1B21;--accent:#F0509A;--cobalt:#2E57C8;
  --radius:12px;--ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--mono:Plex,ui-monospace,Menlo,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column}
body.locked{overflow:hidden}
main{flex:1;outline:none}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:20}.skip:focus{left:8px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em}

/* header */
header{position:sticky;top:0;z-index:10;background:var(--hdr);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.logo img{height:24px;width:auto}
nav{display:flex;align-items:center;gap:26px;font-family:var(--mono);font-size:13px;color:var(--muted)}
nav a{transition:color .15s ease}
nav a.on{color:var(--ink)}
.cartbtn{display:flex;align-items:center;gap:8px;color:var(--ink);font-family:var(--mono);font-size:13px;padding:6px 4px;transition:transform .16s var(--ease-out)}
.cartbtn:active{transform:scale(.96)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--line);color:var(--ink);font-size:11px;display:inline-grid;place-items:center;
  transition:background-color .2s ease,color .2s ease}
.badge.full{background:var(--accent);color:#fff}
.badge.bump{animation:bump .32s var(--ease-out)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}

/* home */
.hero{padding:76px 0 52px}
.hero h1{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:clamp(40px,8.2vw,112px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;max-width:11ch}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px;padding-top:18px;border-top:1px solid var(--line)}
.seg{position:relative;display:inline-flex;padding:3px;border-radius:99px;background:var(--card);border:1px solid var(--line)}
.seg a{position:relative;z-index:1;font-family:var(--mono);font-size:12.5px;padding:7px 16px;border-radius:99px;color:var(--muted);transition:color .2s ease}
.seg a.on{color:#141418}
.seg .pill{position:absolute;top:3px;bottom:3px;left:0;border-radius:99px;background:var(--ink);transition:transform .28s var(--ease-out),width .28s var(--ease-out)}
.bar .mono{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 24px}
.card{display:block}
.card .ph{position:relative;background:var(--tile);border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .22s ease,transform .45s var(--ease-out)}
.card .ph img.b{opacity:0}
.card .no{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:11px;color:#6E6A63;z-index:1}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px}
.card .t{font-size:15px;line-height:1.3}
.card .p{font-family:var(--mono);font-size:13px;color:var(--ink);white-space:nowrap}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;min-height:22px}
.dots{display:flex;gap:2px;margin-left:-4px}
/* 26px tap target, 16px visible dot */
.dot{width:26px;height:26px;display:grid;place-items:center;padding:0;transition:transform .16s var(--ease-out)}
.dot i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:block}
.dot.on i{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.dot:active{transform:scale(.88)}
.card .pn{font-family:var(--mono);font-size:11px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  nav a:hover{color:var(--ink)}
  .card:hover .ph img.a{transform:scale(1.025)}
  .card.has-b:hover .ph img.b{opacity:1}
  .card.has-b:hover .ph img.a{opacity:0}
  .dot:hover{transform:scale(1.12)}
}
.reveal{animation:rise .5s var(--ease-out) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* product */
.prod{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;padding:44px 0 20px}
.gallery{position:sticky;top:88px;align-self:start}
.gallery .main{position:relative;background:var(--tile);border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1}
.gallery .main img{width:100%;height:100%;object-fit:cover;transition:opacity .2s ease,filter .2s ease}
.gallery .main img.swap{opacity:.35;filter:blur(6px)}
.gallery .no{position:absolute;left:16px;top:14px;font-family:var(--mono);font-size:12px;color:#6E6A63}
.thumbs{display:flex;gap:10px;margin-top:12px}
.thumbs button{width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--tile);padding:0;opacity:.55;transition:opacity .15s ease,transform .16s var(--ease-out)}
.thumbs button.on{opacity:1;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--ink)}
.thumbs button:active{transform:scale(.95)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.info .crumb{font-family:var(--mono);font-size:12px;color:var(--muted)}
.info .crumb a{transition:color .15s ease}
.info h1{font-size:clamp(28px,3.2vw,40px);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin:14px 0 10px}
.info .price{font-family:var(--mono);font-size:18px}
.info .desc{color:var(--muted);margin:16px 0 30px;max-width:44ch;font-size:16px}
.opt{margin-bottom:24px}
.opt .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:10px}
.opt .lab b{color:var(--ink);font-weight:500}
.opt .lab a,.opt .lab button{text-decoration:underline;text-underline-offset:3px;color:var(--muted);font-size:12px;font-family:var(--mono)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--line);font-size:14px;display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease,transform .16s var(--ease-out)}
.chip:active{transform:scale(.96)}
.chip.on{border-color:var(--ink);background:var(--ink);color:var(--on)}
.chip .ink{display:flex;gap:2px}.chip .ink i{width:8px;height:8px;border-radius:50%;display:block}
.chip.size{min-width:52px;justify-content:center;font-family:var(--mono);font-size:13px}
.sw{width:36px;height:36px;border-radius:50%;padding:0;border:1px solid rgba(255,255,255,.18);transition:transform .16s var(--ease-out)}
.sw.on{box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px var(--ink)}
.sw:active{transform:scale(.92)}
.buy{display:flex;gap:10px;margin-top:6px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:99px;height:52px}
.qty button{width:42px;height:100%;font-size:18px;color:var(--muted);transition:color .15s ease}
.qty span{min-width:22px;text-align:center;font-family:var(--mono)}
.btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:99px;
  background:var(--ink);color:var(--on);font-size:16px;font-weight:600;transition:transform .16s var(--ease-out),opacity .2s ease}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.35;cursor:default;transform:none}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--line)}
.btn .lbl{transition:filter .2s ease,opacity .2s ease}
.btn.done .lbl{filter:blur(2px);opacity:.6}
.specs{margin-top:34px;border-top:1px solid var(--line)}
.specs details{border-bottom:1px solid var(--line)}
.specs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:16px 0;font-family:var(--mono);font-size:13px}
.specs summary::-webkit-details-marker{display:none}
.specs summary::after{content:"+";color:var(--muted);transition:transform .2s var(--ease-out)}
.specs details[open] summary::after{transform:rotate(45deg)}
.specs .in{padding:0 0 18px;color:var(--muted);font-size:14px}
.specs ul{list-style:none}.specs li{padding:3px 0 3px 1.1em;text-indent:-1.1em}.specs li::before{content:"— ";color:var(--line)}
.sizes{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.sizes th,.sizes td{text-align:left;padding:7px 0;border-bottom:1px solid var(--line)}
.sizes th{color:var(--muted);font-weight:400}
.more{padding:56px 0 0}
.more h2{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted);margin-bottom:18px}

/* drawer */
.drawer{position:fixed;inset:0;z-index:30;pointer-events:none}
.drawer .scrim{position:absolute;inset:0;background:rgba(8,8,10,.55);opacity:0;transition:opacity .3s ease}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--card);border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s var(--ease-drawer)}
.drawer.open{pointer-events:auto}
.drawer.open .scrim{opacity:1}
.drawer.open .panel{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
.dhead h2{font-family:var(--mono);font-size:13px;font-weight:500}
.x{width:34px;height:34px;border-radius:99px;color:var(--muted);transition:transform .16s var(--ease-out),color .15s ease}.x:active{transform:scale(.9)}
.dbody{flex:1;overflow:auto;padding:6px 22px 22px;display:flex;flex-direction:column}
.dbody .lines{flex:1}
.dfoot{border-top:1px solid var(--line);padding-top:16px;margin-top:10px}
.dfoot .r{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;margin-bottom:6px}
.dfoot .n{font-size:12px;color:var(--muted);margin-bottom:14px}

/* cart lines (drawer + cart page) */
.line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.line .ph{width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--tile)}
.line .ph img{width:100%;height:100%;object-fit:cover}
.line .t{font-size:14.5px;line-height:1.3}.line .o{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:3px}
.line .r{text-align:right;font-family:var(--mono);font-size:13px}
.line .q{display:inline-flex;align-items:center;gap:2px;margin-top:6px;border:1px solid var(--line);border-radius:99px}
.line .q button{width:26px;height:26px;color:var(--muted)}.line .q span{min-width:16px;text-align:center;font-size:12px}

/* cart page + about */
.page{padding-top:48px;padding-bottom:48px;max-width:860px}   /* s65: top/bottom only, so .wrap keeps its side margin on tablets */
.page h1{font-family:Holtwood,Georgia,serif;font-weight:400;text-transform:uppercase;font-size:clamp(30px,4.4vw,52px);line-height:1;margin-bottom:28px}
.sum{margin-top:26px;display:grid;gap:9px;max-width:400px;margin-left:auto;font-family:var(--mono);font-size:13px}
.sum div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sum .tot{font-size:16px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.sum select{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit}
#pay{margin-top:22px;max-width:400px;margin-left:auto}
.sum .promo{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sum .pci{flex:1;min-width:0;height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;text-transform:uppercase}
.sum .pci::placeholder{text-transform:none;color:#5F5C68}.sum .pci:focus{outline:none;border-color:var(--ink)}
.sum .lnk{font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:6px 2px;transition:transform .16s var(--ease-out)}
.sum .lnk:active{transform:scale(.97)}.sum .lnk[disabled]{color:var(--muted);text-decoration:none}
.sum .pnote{font-size:11.5px;color:var(--muted);margin-top:-4px}.sum .pnote.bad{color:#FF8A8A}
.note{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:12px;text-align:right}
.empty{color:var(--muted);padding:20px 0;font-size:15px}
.empty a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.err{color:#FF8A8A;font-size:14px;margin-top:10px;text-align:right}
.about .lead{font-size:clamp(19px,2vw,23px);line-height:1.5;max-width:44ch;margin-bottom:46px}
.about .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line);padding-top:26px}
.about h2{font-family:var(--mono);font-size:13px;font-weight:500;margin-bottom:10px}
.about .cols p{font-size:14.5px;color:var(--muted)}

/* about v2 */
.aboutv2{padding-top:48px;padding-bottom:48px}
.ab{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:64px;align-items:center}
.abph img{width:100%;height:auto;border-radius:var(--radius);aspect-ratio:1/1;object-fit:cover}
.abph figcaption{color:var(--muted);margin-top:10px}
.abtx .kick{color:var(--muted);margin-bottom:14px}
.abtx h1{font-family:Holtwood,Georgia,serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,4.6vw,60px);line-height:.98;margin-bottom:26px}
.abtx .lead{font-size:clamp(22px,2.2vw,28px);line-height:1.35;max-width:24ch}
.abtx .lead2{color:var(--muted);font-size:17px;line-height:1.6;max-width:40ch;margin-top:12px}
.spec{margin:30px 0 28px;border-top:1px solid var(--line);max-width:460px}
.spec div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px}
.spec dt{color:var(--muted)}.spec dd{color:var(--ink)}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.links a{height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;
  transition:border-color .15s ease,transform .16s var(--ease-out)}
.links a:active{transform:scale(.96)}
.links a span{color:var(--muted)}
@media (hover:hover) and (pointer:fine){.links a:hover{border-color:var(--ink)}}
.aboutv2 .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line);padding-top:26px;margin-top:72px}
.aboutv2 h2{font-family:var(--mono);font-size:13px;font-weight:500;margin-bottom:10px}
.aboutv2 .cols p{font-size:14.5px;color:var(--muted)}
@media (max-width:980px){.ab{grid-template-columns:1fr;gap:28px}.aboutv2 .cols{grid-template-columns:1fr}.abph{max-width:520px}}

/* footer + test bar */
footer{border-top:1px solid var(--line);padding:40px 0 80px;margin-top:110px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.flogo{height:18px;width:auto;opacity:.75;margin-bottom:14px}
footer p{font-family:var(--mono);font-size:12px;line-height:1.7}
.fr{display:flex;gap:24px;font-family:var(--mono);font-size:12.5px}
.fr a{transition:color .15s ease}
@media (hover:hover) and (pointer:fine){.fr a:hover,.info .crumb a:hover,.qty button:hover,.x:hover{color:var(--ink)}}
#testbar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:#FFC83D;color:#141418;font:600 11.5px/1 var(--mono);
  padding:8px 14px;border-radius:99px;box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:25;white-space:nowrap}

@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}.prod{grid-template-columns:1fr;gap:28px}.gallery{position:static}.about .cols{grid-template-columns:1fr}}
@media (max-width:560px){.wrap{padding:0 16px}header .wrap{height:56px}.logo img{height:18px}nav{gap:16px}nav a[data-nav=tee],nav a[data-nav=mug]{display:none}
  .hero{padding:44px 0 34px}.grid{gap:28px 14px}.card .t{font-size:13.5px}.card .p{font-size:12px}.card .meta{flex-direction:column;gap:2px}
  .dot{width:28px;height:28px}.dots{gap:0}.card .pn{display:none}.bar .mono{display:none}#testbar{font-size:10.5px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color!important}
  .drawer .panel{transition:none}}
@media (max-width:560px){.aboutv2{padding-top:28px}}


/* ---- design v3 (Oct 11 2026): three looks to pick from (html[data-look]), real Printify photos, shelves by passion ----
   Printify's photos are on pure white: they sit in a tinted tile with multiply, so the white melts into the tile in every look. */
.card .ph img,.gallery .main img,.line .ph img,.thumbs img{mix-blend-mode:multiply}
.lgl{display:none}
html[data-look=a],html[data-look=b]{--bg:#F4F1EA;--ink:#17171C;--muted:#6E6A72;--line:#E1DCD1;--tile:#ECE7DD;--card:#FFFFFF;--on:#F4F1EA;--hdr:rgba(244,241,234,.86)}
html[data-look=a] .lgd,html[data-look=b] .lgd{display:none}
html[data-look=a] .lgl,html[data-look=b] .lgl{display:block}
html[data-look=a] .card .no,html[data-look=b] .card .no,html[data-look=a] .gallery .no,html[data-look=b] .gallery .no{display:none}
html[data-look=a] .dot i,html[data-look=b] .dot i{border-color:rgba(0,0,0,.12)}
html[data-look=a] .sw,html[data-look=b] .sw{border-color:rgba(0,0,0,.14)}
.kick{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;margin-bottom:12px}
.kick a{transition:color .15s ease}
.strip{background:var(--ink);color:var(--bg);text-align:center;padding:9px 16px;font-size:12px}

/* shelves */
.shelf{padding:56px 0 8px}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;padding-top:22px;border-top:1px solid var(--line)}
.shead h2{font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.02em;font-weight:600}
.shead p{color:var(--muted);margin-top:8px;max-width:52ch}
.seeall{color:var(--muted);white-space:nowrap;transition:color .15s ease}
.card.fam .ph{background:var(--tile)}
.famtag{position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--on);border-radius:99px;padding:5px 10px;font-size:11px}
.card .pn{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* instrument picker */
.picker{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.itile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);
  transition:transform .2s var(--ease-out),border-color .15s ease}
.itile img{width:100%;max-width:120px;height:auto;aspect-ratio:1/1;object-fit:contain}
.itile span{font-size:14px;font-weight:500;text-align:center;line-height:1.2}
.itile:active{transform:scale(.97)}
html[data-look=c] .itile{background:var(--tile);color:#141418;border-color:transparent}

/* look a: gift-first */
.heroA{padding:64px 0 24px}
.heroA h1{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:clamp(34px,5.6vw,76px);line-height:1;text-transform:uppercase;max-width:16ch;letter-spacing:-.01em}
.heroA .sub{font-size:clamp(17px,1.6vw,20px);color:var(--muted);margin:16px 0 32px}
/* look b: Jemma-first */
.heroB{padding:48px 0 16px}
.hb{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.hbph{border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--tile)}
.hbph img{width:100%;height:100%;object-fit:cover}
.hbtx h1{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:clamp(36px,5vw,72px);line-height:1;text-transform:uppercase;max-width:11ch}
.hbtx .sub{font-size:clamp(17px,1.6vw,20px);color:var(--muted);margin:18px 0 30px;max-width:40ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}.cta .btn{flex:none}
/* look c: the dark catalogue, tighter headline */
html[data-look=c] .hero{padding:56px 0 8px}
html[data-look=c] .hero h1{font-size:clamp(36px,6vw,84px)}
/* listing pages */
.lhead{padding:52px 0 0}
.lhead h1{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.025em;font-weight:600;line-height:1.05}
.lhead p{color:var(--muted);margin-top:10px}
.lhead+.shelf{padding-top:28px}.lhead+.shelf .grid{margin-top:0}

/* trust line */
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:12px;margin-top:18px}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
main>.wrap>.trust{justify-content:center;margin:56px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.chip.size.off{opacity:.38;text-decoration:line-through;cursor:default}
.chips.inst .chip{height:34px;font-size:13.5px}

/* design preview only: look switcher */
.lookbar{position:fixed;left:14px;bottom:14px;z-index:30;display:flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:99px;
  background:#141418;color:#F3F0EA;font-size:11.5px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.lookbar a{min-width:28px;height:28px;display:grid;place-items:center;border-radius:99px;color:#8F8C99}
.lookbar a.on{background:#F3F0EA;color:#141418}

@media (hover:hover) and (pointer:fine){
  .itile:hover{transform:translateY(-2px);border-color:var(--ink)}
  .seeall:hover,.kick a:hover{color:var(--ink)}
}
@media (max-width:980px){.picker{grid-template-columns:repeat(4,1fr)}.hb{grid-template-columns:1fr;gap:28px}.hbph{max-width:520px}}
@media (max-width:560px){.picker{grid-template-columns:repeat(3,1fr);gap:10px}.itile{padding:12px 6px 10px}.itile span{font-size:12.5px}
  nav a[data-nav=jazz]{display:none}.heroA{padding:36px 0 8px}.shelf{padding-top:40px}.shead{flex-direction:column;align-items:flex-start}}

/* Oct 11 audit fixes (Impeccable /audit): every tap area at least 44 px (looks unchanged), Cart sits outside the menu,
   and on phones the menu gets its own row so Tees / Gifts / Jazz / Mugs / About are all one tap away. */
header .wrap nav{margin-left:auto}
.logo{display:inline-flex;align-items:center;min-height:44px}
nav a{display:inline-flex;align-items:center;min-height:44px}
.cartbtn{min-height:44px;padding:0 4px}
.x{width:44px;height:44px}
.qty button{width:44px}
.info .crumb a,.fr a,#sg,.seeall{display:inline-block;padding:13px 0;margin:-13px 0}
@media (max-width:560px){
  header .wrap{height:auto;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding-top:4px}
  header .logo{grid-column:1;grid-row:1}
  header .cartbtn{grid-column:2;grid-row:1}
  header .wrap nav{grid-column:1/-1;grid-row:2;margin:0 -10px;justify-content:space-between;gap:0}
  header nav a{padding:0 10px}
  .info .crumb a{padding:13px 8px;margin:-13px -8px}
  nav a[data-nav]{display:inline-flex}
  .dots{margin-left:0}.dot{width:32px;height:44px}
  .sw{width:44px;height:44px}
  .chip,.chips.inst .chip{height:44px}
}

/* ---- Oct 11 "bolder" options (Impeccable critique + bolder): ?style=1|2|3, cumulative classes on <html> (st1 ⊂ st2 ⊂ st3).
   Only the store's own inks (DENIM: navy / pink / cobalt / cream) and fonts. Default visitors (no ?style) see the old page. */
:root{--navy:#17204A;--pink:#F0509A;--cobalt:#2E57C8;--cream:#F3EBDD}
/* 1 · INK: the wood type and the inks come into the page itself */
.st1 .shead h2,.st1 .lhead h1,.st1 .info h1{font-family:Holtwood,Georgia,serif;font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:1.02}
.st1 .shead h2{font-size:clamp(24px,3.2vw,40px)}.st1 .lhead h1{font-size:clamp(30px,4.4vw,56px)}.st1 .info h1{font-size:clamp(24px,2.8vw,36px)}
.st1 .heroA h1,.st1 .shead h2,.st1 .lhead h1,.st1 .info h1{color:var(--navy);text-shadow:.05em .05em 0 var(--pink)}
.st1 .strip{background:var(--pink);color:var(--navy);font-weight:600}
.st1 .btn:not(.ghost){background:var(--navy);color:var(--cream)}
.st1 nav a.on{color:var(--navy);box-shadow:inset 0 -2px 0 var(--pink)}
.st1 .kick{color:var(--cobalt)}
@media (hover:hover) and (pointer:fine){.st1 .itile:hover{border-color:var(--pink)}}
@media (max-width:560px){   /* phones: the instrument picker becomes one swipeable row, so products show up on the first screen */
  .st1 .heroA .picker{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:0 16px 10px;scrollbar-width:none}
  .st1 .heroA .picker::-webkit-scrollbar{display:none}
  .st1 .heroA .itile{flex:0 0 30%;scroll-snap-align:start}
  .st1 .heroA{padding-bottom:0}}
/* 2 · PRINT: + paper grain, halftone behind the hero, the Tees shelf on a navy band, the ii–V–I mug as a big feature */
.st2 body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .13 0 0 0 0 .29 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.st2 .heroA{position:relative;isolation:isolate}
.st2 .heroA::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(46,87,200,.17) 1.3px,transparent 1.7px) 0 0/10px 10px;
  -webkit-mask:linear-gradient(180deg,#000 40%,transparent 85%);mask:linear-gradient(180deg,#000 40%,transparent 85%)}
.st2 #s-tee .kick,.st3 #s-jazz .kick{color:var(--muted)}
@media (min-width:981px){.st2 #s-jazz .card[data-pid="F-tee"]{display:none}}   /* the tee is on the Tees shelf; here it broke the feature grid */
.st2 #s-tee{--bg:var(--navy);--ink:var(--cream);--muted:#B9BEDA;--line:rgba(243,235,221,.18);background:var(--bg);color:var(--ink);margin-top:64px;padding:64px 0 56px}
.st2 #s-tee .shead{border-top:0;padding-top:0}
.st2 #s-tee .shead h2{color:var(--cream);text-shadow:.05em .05em 0 var(--pink)}
@media (min-width:981px){.st2 #s-jazz .grid>.card:first-child{grid-column:span 2;grid-row:span 2}
  .st2 #s-jazz .grid>.card:first-child .t{font-size:20px}}
/* 3 · POSTER: + a pink poster hero with a big turning badge, the jazz shelf on a cobalt band */
.st3 .heroA{background:var(--pink);padding-bottom:56px}
.st3 .heroA::before{display:none}
.st3 .heroA .wrap{position:relative}
.st3 .heroA h1{color:var(--navy);text-shadow:.05em .05em 0 var(--cobalt)}
.st3 .heroA .sub,.st3 .heroA .kick{color:var(--navy)}
.st3 .heroA .itile{border-color:transparent}
.st3 .strip{background:var(--navy);color:var(--cream)}
.heroBadge{display:none}
@media (min-width:981px){.st3 .heroBadge{display:block;position:absolute;right:28px;top:-28px;width:300px;height:300px;pointer-events:none}
  .st3 .heroBadge img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease-out),opacity .25s ease}
  .st3 .heroBadge img.swap{opacity:0;transform:rotate(-10deg) scale(.9)}
  .st3 .heroA h1{max-width:12ch}}
.st3 #s-jazz{--bg:var(--cobalt);--ink:var(--cream);--muted:#D5DDF5;--line:rgba(243,235,221,.22);background:var(--bg);color:var(--ink);padding:64px 0 56px}
.st3 #s-jazz .shead{border-top:0;padding-top:0}
.st3 #s-jazz .shead h2{color:var(--cream);text-shadow:.05em .05em 0 var(--navy)}
.st3 #s-tee{margin-top:0}
/* the style switcher (only for whoever opened a ?style link) */
.stylebar{position:fixed;left:14px;bottom:62px;z-index:30;display:flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:99px;
  background:#141418;color:#F3F0EA;font:11.5px var(--mono);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.stylebar a{min-width:36px;height:36px;display:grid;place-items:center;border-radius:99px;color:#8F8C99}
.stylebar a.on{background:#F3F0EA;color:#141418}
@media (prefers-reduced-motion:reduce){.st3 .heroBadge img{transition:none}}

/* Oct 11 add-ons (gift-items session): single-colour items hide the colour pickers; the gift-set link on the World's Best mug pages */
.opt[hidden] { display: none !important; }
.xsell { margin: -6px 0 18px; }
.xsell a { display: inline-block; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: #F0509A; }
.xsell a:hover { color: #F0509A; }

/* Oct 11 reorg (gift-items session): the instrument KNOB hero (JC picked "turn the knob"). Ticks round the dial on desktop/tablet,
   a scrolling chip row under it on phones. Results panel beside it (desktop) or under it. */
.kwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
.kh h1{max-width:13ch}
.kb{margin-top:4px;max-width:520px}
.kring{position:relative;width:100%;aspect-ratio:1/1;margin:0 auto}
.kdial{position:absolute;inset:21%;border-radius:50%;cursor:grab;touch-action:none;outline-offset:8px}
.kdial.grab{cursor:grabbing}
.kbody{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2b3874,var(--navy) 62%);
  box-shadow:0 0 0 12px #0f1636,0 18px 36px rgba(23,32,74,.35);transition:transform .35s var(--ease-out)}
.kmark{position:absolute;left:50%;top:4%;width:12px;height:17%;margin-left:-6px;border-radius:6px;background:var(--pink);box-shadow:0 0 0 3px #0f1636}
.kcap{position:absolute;inset:25%;border-radius:50%;background:#FFFDF8;display:grid;place-items:center;pointer-events:none;box-shadow:inset 0 0 0 5px rgba(23,32,74,.12)}
.kcap img{width:88%;height:88%;object-fit:contain;transition:opacity .12s ease,transform .3s var(--ease-out)}
.kcap img.swap{opacity:0;transform:scale(.9)}
.ktick{position:absolute;font-family:var(--mono);font-size:12.5px;line-height:1.1;color:var(--navy);padding:5px 9px;border-radius:99px;white-space:nowrap;
  transition:background .15s ease,color .15s ease}
.ktick.tc{transform:translate(-50%,-50%)}.ktick.tl{transform:translate(0,-50%)}.ktick.tr{transform:translate(-100%,-50%)}
.ktick.on{background:var(--navy);color:#FFFDF8}
@media (hover:hover) and (pointer:fine){.ktick:hover:not(.on){background:rgba(23,32,74,.1)}}
.kbtns{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:2px}
.kstep{width:44px;height:44px;border-radius:50%;border:2px solid var(--navy);color:var(--navy);font-size:24px;line-height:1;display:grid;place-items:center;transition:transform .16s var(--ease-out)}
.kstep:active{transform:scale(.94)}
#kname{font-size:14px;color:var(--navy);min-width:15ch;text-align:center}
.kchips{display:none}
.kchips.static{display:flex;flex-wrap:wrap;gap:8px}
.kr{background:#FFFDF8;color:var(--navy);border-radius:18px;padding:24px;transition:opacity .2s ease;--ink:var(--navy);--muted:#5B6080}
.kr.fade{opacity:.3}
.khead h2{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:clamp(22px,2.3vw,32px);text-transform:uppercase;line-height:1.05;margin:6px 0 18px;color:var(--navy)}
.kr .kgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kall{display:inline-block;margin-top:16px;color:var(--navy)}
.forrow{display:flex;gap:24px;align-items:center;margin-top:8px}.forrow img{width:140px;height:140px;object-fit:contain;flex:none}
@media (max-width:980px){.kwrap{grid-template-columns:1fr;gap:28px}.kb{max-width:460px;margin:4px auto 0}}
@media (max-width:640px){.ktick{display:none}.kdial{inset:9%}.kring{max-width:300px}
  .kchips{display:flex;overflow-x:auto;gap:8px;padding:12px 0 4px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
  .kchips::-webkit-scrollbar{display:none}.kchips .chip{flex:0 0 auto}
  .kchips .chip.on{background:var(--navy);color:#FFFDF8;border-color:var(--navy)}.kr{padding:18px}.forrow img{width:96px;height:96px}}
@media (prefers-reduced-motion:reduce){.kbody,.kcap img{transition:none}}
.kh h1{max-width:none;font-size:clamp(30px,4.4vw,60px)}.kh .sub{margin:12px 0 18px}
.kwrap{align-items:center}
.heroA.kh{padding-top:36px;padding-bottom:40px}.kh h1{font-size:clamp(28px,3.6vw,50px)}.kh .sub{margin:10px 0 6px}.kb{max-width:450px}
.kdial{inset:17%}.kcap{inset:22%}
.kb{max-width:600px;margin-left:auto;margin-right:auto}.kring{width:calc(100% - 220px);min-width:260px}
@media (max-width:640px){.kring{width:100%}}
@media (max-width:980px){.kwrap{grid-template-columns:minmax(0,1fr)}}
nav a{white-space:nowrap}
@media (max-width:420px){nav{gap:14px}}
.st3 .kh h1,.kh h1{max-width:none}.kwrap{align-items:start}.kl{position:sticky;top:90px}
@media (max-width:980px){.kl{position:static}}

/* Oct 11 (JC: the hero title is hard to read): no offset shadow on the big title, a touch more tracking and line height, solid navy */
.st1 .kh h1,.st3 .kh h1,.kh h1{text-shadow:none;color:var(--navy);letter-spacing:.015em;line-height:1.08}
.kcap{background:#FFFDF8}.kcap img{width:82%;height:82%}

/* ---- Oct 11 PODIUM home (JC picked proposal 1 of 5, store/proposals-oct11/p1) + "Musician gift shop" line under the logo + depth ---- */
.logo{flex-direction:column;align-items:stretch;justify-content:center;gap:4px}
.tagl{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;font-size:9.5px;line-height:1;letter-spacing:.36em;padding-left:.36em;color:var(--navy);white-space:nowrap}
.tagl::before,.tagl::after{content:"";flex:1;height:1px;background:var(--navy)}
html:not([data-look=a]):not([data-look=b]) .tagl{color:var(--ink)}
html:not([data-look=a]):not([data-look=b]) .tagl::before,html:not([data-look=a]):not([data-look=b]) .tagl::after{background:var(--ink)}
@media (max-width:560px){.logo img{height:19px}.tagl{font-size:8.5px;gap:6px;letter-spacing:.3em;padding-left:.3em}}

.pdh{--wall:#F6D9E4;background:var(--wall);padding:clamp(28px,4vw,56px) 0 0;overflow:hidden}
.pdg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,3vw,48px);align-items:end}
.pdh h1{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:clamp(34px,4.6vw,64px);line-height:1.02;text-transform:uppercase;color:var(--navy);text-shadow:.05em .05em 0 var(--pink)}
.pdh .sub{font-size:18px;margin:14px 0 22px;max-width:36ch;color:#4D5170}
.pdseals{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;padding-bottom:clamp(24px,4vw,56px)}
.pdseal{display:grid;justify-items:center;gap:5px;font-family:var(--mono);font-size:11px;line-height:1.15;text-align:center;color:var(--navy);padding:6px 2px 8px;border-radius:14px;
  transition:transform .16s var(--ease-out),background-color .16s ease}
.pdseal img{width:54px;height:54px;border-radius:50%;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 #D9C9CF,0 6px 10px -4px rgba(23,32,74,.35);
  transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.pdseal:active{transform:scale(.96)}
.pdseal[aria-pressed=true]{background:rgba(255,255,255,.7)}
.pdseal[aria-pressed=true] img{transform:translateY(2px);box-shadow:0 0 0 3px var(--pink),0 1px 2px rgba(23,32,74,.3)}
@media (hover:hover) and (pointer:fine){.pdseal:hover img{transform:translateY(-2px)}}
/* Hero stage v2 (JC Oct 11, picked hero 6 of proposals-oct11b): no table, no box. The light belongs to the whole pink section; a real tee lies
   behind, the mug, button, ornament and die-cut sticker big and layered in front. Photos are cut-out webps (img/hero/), shadows follow their shape. */
.pdh{position:relative;isolation:isolate}
.pdh::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 70% at 74% 38%,rgba(255,255,255,.62),rgba(255,255,255,0) 72%)}
.pdh>.wrap{position:relative;z-index:1}
.pdh .pdseals{padding-bottom:clamp(24px,4vw,48px)}
.pdstage{position:relative;aspect-ratio:6/5;max-height:620px}
.pdo{position:absolute;display:block;transition:transform .42s var(--ease-out),opacity .3s ease}
.pdo img{width:100%;height:auto;display:block;transform-origin:50% 100%}
@media (hover:hover) and (pointer:fine){.pdo img{transition:translate .35s var(--ease-out)}.pdo:hover img{translate:0 -4px}}
.pd-tee{right:-17%;top:-3%;width:72%;z-index:0}
.pd-tee img{transform:rotate(5deg);transform-origin:50% 30%;filter:drop-shadow(0 2px 3px rgba(40,15,35,.25)) drop-shadow(6px 18px 22px rgba(40,15,35,.28))}
.pd-orn{left:1%;top:-1%;width:23%;z-index:1}
.pd-orn img{transform:rotate(-10deg);filter:drop-shadow(0 6px 6px rgba(60,25,35,.18)) drop-shadow(10px 18px 16px rgba(60,25,35,.16))}
.pd-mug{left:4%;width:52%;bottom:4%;z-index:2}
/* Oct 13 (JC: mug edge uneven in Safari): the shadow is baked into the padded webp (tools/bake_mug_shadow.py, 180 px pad on 814 px) - no CSS filter */
.pd-mug img{width:calc(100% * 1174 / 814);max-width:none;margin:calc(-100% * 180 / 814);pointer-events:none}
.pd-btn{left:50%;bottom:1%;width:25%;z-index:3}
.pd-btn img{transform:rotate(9deg);filter:drop-shadow(0 4px 4px rgba(60,25,35,.22)) drop-shadow(22px 34px 26px rgba(60,25,35,.34))}
.pd-stk{right:-3%;bottom:4%;width:21%;z-index:3}
.pd-stk img{transform:rotate(-8deg);filter:drop-shadow(0 4px 4px rgba(60,25,35,.2)) drop-shadow(10px 18px 14px rgba(60,25,35,.2))}
.pdstage.swap .pdo{opacity:0;transform:translateY(10px)}

.pdw{background:var(--navy);color:var(--cream);padding:clamp(40px,6vw,80px) 0 0;position:relative;overflow:hidden}
.pdw::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 0,rgba(240,80,154,.22),transparent 70%);pointer-events:none}
.pdw h2{position:relative;font-family:Holtwood,Georgia,serif;font-weight:400;font-size:clamp(26px,3.4vw,44px);line-height:1.05;text-transform:uppercase;max-width:22ch}
.pdw .lede{position:relative;color:#C9CBE0;margin:12px 0 0;max-width:52ch}
.pdpod{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);align-items:end;max-width:1100px;margin:36px auto 0}
.pdstep{display:grid;justify-items:center;text-align:center;color:inherit;text-decoration:none}
.pdprod{width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#F3EBDD 70%);display:grid;place-items:center;overflow:hidden;
  box-shadow:0 30px 40px -24px rgba(0,0,0,.6);transition:transform .24s var(--ease-out);margin-bottom:-6%;position:relative;z-index:1}
.pdprod img{width:84%;mix-blend-mode:multiply}
@media (hover:hover) and (pointer:fine){.pdstep:hover .pdprod{transform:translateY(-8px)}}
.pdstep:active .pdprod{transform:scale(.97)}
.pdblock{width:100%;position:relative}
.pdtop{height:38px;background:linear-gradient(180deg,#FFF6EA,#E7D9C2);transform:perspective(600px) rotateX(62deg);transform-origin:bottom;margin-bottom:-1px}
.pdface{background:linear-gradient(180deg,#F3EBDD,#D8C8AC);color:var(--navy);display:grid;align-content:start;justify-items:center;padding:16px 10px;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.5),inset -1px 0 0 rgba(0,0,0,.08)}
.pdface .pl{font-family:Holtwood,Georgia,serif;font-size:clamp(30px,4vw,54px);line-height:1;color:var(--pink);text-shadow:2px 2px 0 var(--navy)}
.pdface .nm{font-family:var(--mono);font-size:13px;line-height:1.3;margin-top:8px;max-width:22ch}
.pdface .pr{font-family:Holtwood,Georgia,serif;font-size:24px;margin-top:6px}
.pdface .why{font-size:13px;color:#5B5F7A;margin-top:4px;max-width:24ch}
.s1 .pdface{min-height:clamp(200px,22vw,260px);background:linear-gradient(180deg,#FFF3F8,#F2C6D9)}
.s2 .pdface{min-height:clamp(170px,17vw,210px)}
.s3 .pdface{min-height:clamp(140px,13vw,170px)}
.s1 .pdtop{background:linear-gradient(180deg,#fff,#F7D6E4)}
@media (max-width:860px){
  .pdg{grid-template-columns:minmax(0,1fr)}
  .pdh h1{font-size:34px}.pdh .sub{font-size:16px;margin:10px 0 16px}
  .pdseals{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76px;overflow-x:auto;margin:0 -16px;padding:0 16px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .pdseals::-webkit-scrollbar{display:none}
  .pdseal{scroll-snap-align:start}
  .pdh .pdseals{padding-bottom:6px}
  .pdstage{aspect-ratio:1/1;max-height:none;margin-top:4px;clip-path:inset(0 -100vw -100vw -100vw)}
  .pd-stk{right:0;width:20%}
  .pdface .why{display:none}.pdface .nm{font-size:11px}.pdface .pr{font-size:18px}
  .s1 .pdface{min-height:170px}.s2 .pdface{min-height:135px}.s3 .pdface{min-height:110px}
  .pdpod{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr)}
}

/* depth on every product card (JC: "it looks too flat"): the photo sits on a raised tile with a soft contact shadow, lifts on hover */
.card .ph{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 28px -20px rgba(23,32,74,.45),0 2px 4px rgba(23,32,74,.07);transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card a:hover .ph{transform:translateY(-5px);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 28px 34px -20px rgba(23,32,74,.5),0 2px 4px rgba(23,32,74,.07)}}
@media (max-width:400px){header nav a{padding:0 6px}header .wrap nav{margin:0 -6px}}   /* all six menu words fit on a 375 px phone */
/* FAQ (Oct 11): raised question cards that open in place */
.faqs .faq{max-width:820px}
.faq{background:var(--card);border-radius:14px;margin:0 0 12px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 14px 24px -20px rgba(23,32,74,.45),0 1px 3px rgba(23,32,74,.08)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;min-height:56px;font-weight:600;font-size:16.5px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--pink);transition:transform .2s var(--ease-out)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .in{padding:0 20px 18px;color:#4D5170;font-size:15.5px;line-height:1.55;max-width:64ch}
/* quick answers bubble (Oct 11) */
#qa{position:fixed;right:18px;bottom:18px;z-index:30;font-size:15px}
.qab{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 8px;border-radius:99px;background:var(--navy);color:var(--cream);font-family:var(--mono);font-size:14px;font-weight:500;
  box-shadow:0 3px 0 #0B1130,0 14px 26px -10px rgba(23,32,74,.6);transition:transform .16s var(--ease-out)}
.qab span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pink);color:#fff;font-family:Holtwood,Georgia,serif;font-size:16px}
.qab:active{transform:translateY(2px) scale(.98)}
#qa.on .qab{display:none}
.qap{position:absolute;right:0;bottom:0;width:min(380px,calc(100vw - 24px));max-height:min(560px,calc(100dvh - 90px));display:flex;flex-direction:column;background:#FFFBF4;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 0 #fff inset,0 30px 60px -20px rgba(23,32,74,.55),0 2px 6px rgba(23,32,74,.12);transform-origin:bottom right;animation:qain .22s var(--ease-out)}
@keyframes qain{from{opacity:0;transform:translateY(8px) scale(.97)}}
.qah{position:relative;background:var(--navy);color:var(--cream);padding:16px 56px 14px 18px}
.qah b{display:block;font-family:Holtwood,Georgia,serif;font-weight:400;font-size:19px;text-transform:uppercase;letter-spacing:.01em}
.qah span{font-size:13px;color:#C9CBE0}
.qax{position:absolute;right:8px;top:8px;width:44px;height:44px;color:var(--cream);font-size:16px}
.qal{flex:1;overflow:auto;padding:14px 14px 4px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.qam{max-width:88%;padding:10px 13px;border-radius:14px;line-height:1.45;font-size:14.5px}
.qam.them{background:#fff;color:#2B2F4B;border-bottom-left-radius:4px;box-shadow:0 1px 2px rgba(23,32,74,.1)}
.qam.them b{display:block;color:var(--navy);margin-bottom:3px}
.qam.them a{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px}
.qam.me{align-self:flex-end;background:var(--pink);color:#fff;border-bottom-right-radius:4px}
.qac{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 4px}
.qac button{min-height:36px;padding:0 12px;border-radius:99px;background:#fff;color:var(--navy);font-family:var(--mono);font-size:12.5px;box-shadow:0 0 0 1px #E3D8C6,0 2px 0 #E3D8C6}
.qac button:active{transform:translateY(1px)}
.qaf{display:flex;gap:8px;padding:10px 14px 14px}
.qaf input{flex:1;min-width:0;height:44px;border-radius:99px;border:1px solid #E3D8C6;background:#fff;padding:0 16px;font:inherit;font-size:16px;color:var(--navy)}
.qaf input:focus{outline:none;border-color:var(--navy)}
.qaf button{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--cream);font-size:18px}
@media (max-width:560px){#qa{right:12px;bottom:12px}#qa:not(.on) .qab{padding:0 14px 0 8px;font-size:13px}#testbar{left:12px;transform:none}}
@media (prefers-reduced-motion:reduce){.qap{animation:none}}
.qap[hidden]{display:none}   /* .qap sets display:flex, which would beat the hidden attribute */
.faq .in a{color:var(--cobalt);text-decoration:underline;text-underline-offset:2px}
/* JC Oct 11: no pink ring round the chosen medal; the white tile + a lifted medal + bold name show the pick */
.pdseal[aria-pressed=true] img{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 #D9C9CF,0 10px 14px -6px rgba(23,32,74,.45)}
.pdseal[aria-pressed=true]{background:#fff;box-shadow:0 8px 16px -10px rgba(23,32,74,.4);font-weight:600}

/* Collection 05 (Oct 11): wrapping paper + zip pouch. Colour chips carry their inks; the wrap shipping note */
.chip .ink.sw5 i{box-shadow:inset 0 0 0 1px rgba(23,32,74,.22)}
.chips.inst .chip .ink.sw5{gap:1px}
.wnote{margin:-14px 0 24px;max-width:46ch;font-size:14px;line-height:1.5;color:var(--muted);border-left:3px solid #F0509A;padding:2px 0 2px 12px}

/* free US shipping line in the cart (Oct 11) */
.pnote.freeship{color:#1d6b3a;margin:4px 0 8px}
/* Oct 11 (c04c05): small "New" tag on the new products' cards (C04, crewnecks, tumblers, cards) */
.newtag{position:absolute;right:10px;top:10px;z-index:1;background:var(--accent);color:#fff;border-radius:99px;padding:4px 9px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1}

/* Oct 12: phone instrument picker options (JC: "nobody is gonna scroll for so long"; most buyers come from Instagram on a phone) */
@media (max-width:860px){
  html[data-pick=a] .pdseals,html[data-pick=b] .pdseals{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;margin:0;scroll-snap-type:none}
  html[data-pick=a] .pdseals{grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 4px;padding:0 0 12px}
  html[data-pick=a] .pdseal{padding:5px 5px 6px;font-size:11px;grid-template-columns:minmax(0,1fr)}   /* side padding: 2-word names wrap instead of touching the next one */
  html[data-pick=a] .pdseal img{width:50px;height:50px}
  html[data-pick=b] .pdseals{display:flex;flex-wrap:wrap;gap:7px 6px;padding:0 0 14px}
  html[data-pick=b] .pdseal{display:flex;align-items:center;gap:6px;padding:4px 11px 4px 4px;border-radius:99px;background:rgba(255,255,255,.6);font-size:12.5px;box-shadow:0 1px 0 rgba(23,32,74,.08)}
  html[data-pick=b] .pdseal img{width:30px;height:30px;box-shadow:none}
  html[data-pick=b] .pdseal[aria-pressed=true]{background:var(--navy);color:#fff}
  html[data-pick=b] .pdseal[aria-pressed=true] img{transform:none;box-shadow:0 0 0 2px var(--pink)}
}

/* s50 (Oct 12): Tumblers shelf = the World's Best tumbler family card + its instrument chips (phone: card full width, chips under it) */
.tgrid .tpick{grid-column:span 3;align-self:center}
.tgrid .tpick .kick{margin-bottom:12px}
@media (max-width:980px){.tgrid .tpick{grid-column:span 1}}
@media (max-width:560px){.tgrid>.card,.tgrid .tpick{grid-column:1/-1}.tgrid{gap:18px 14px}}

/* ---- s51 (Oct 12 2026, store fix batch B, JC "yes go with both"). Phone first; numbers = the Oct 12 store check (Marketing HQ/jobs/2026-10-12-consistency-audit/store). ---- */
/* #14 one navy for everything picked + the headings, one cream; #19 darker grey for small text */
:root{--cream:#F4F1EA}
html[data-look=a]{--muted:#55525C;--on:#F4F1EA}
.chip.on,.kchips .chip.on{border-color:var(--navy);background:var(--navy);color:var(--cream)}
.dot.on i{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--navy)}
.sw.on{box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px var(--navy)}
.thumbs button.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--navy)}
.newtag{color:var(--cream);font-size:13px;padding:4px 9px;letter-spacing:.04em}
/* s56 (Oct 12): the "Christmas" tag on the Christmas X4 cards = the Holiday red, same pill as "New" */
.newtag.xtag{background:#B8282E;color:#fff}
/* #15 color circles keep a thin cream ring on the dark (cobalt) shelf */
.st3 #s-jazz .dot i{border:1.5px solid var(--cream)}
.st3 #s-jazz .dot.on i{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--cream)}
/* #3 chord names keep their real case (ii–V–I): the wood type only has capitals, so chord titles use the bold sans */
.st1 .info h1.real{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:800;text-transform:none;letter-spacing:-.015em;line-height:1.08}
/* #6 tile prices: 15 px, bolder, navy; the "16 to choose from" count sits under the photo, not on the art */
.card .p{font-size:15px;font-weight:500;color:var(--navy)}
.card .row .famtag{position:static;display:inline-block;background:var(--navy);color:var(--cream);border-radius:99px;padding:5px 10px;font-size:13px;line-height:1.2;white-space:nowrap}
.card .row{gap:8px;flex-wrap:wrap}
/* #8 one look for the "Shop / ..." path, everywhere */
.path{display:flex;flex-wrap:wrap;align-items:center;gap:0 7px;font-family:var(--mono);font-size:13px;color:var(--muted);margin-bottom:8px}
.path a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(23,32,74,.35);text-underline-offset:3px;display:inline-block;padding:12px 6px;margin:-12px -6px}
.path span[aria-hidden]{color:var(--muted)}
.info .path{margin-bottom:0}
.lhead h1{margin-top:6px}
/* #8 section titles: "More from the shop" looks like every other shelf title; YOUR CART like the other page titles */
.more .shead{margin-bottom:24px}
.page h1{color:var(--navy);text-shadow:.05em .05em 0 var(--pink);font-size:clamp(30px,4.4vw,56px);line-height:1.02;margin:6px 0 24px}
.dhead h2{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:20px;text-transform:uppercase;color:var(--navy);letter-spacing:.01em}
/* #19 no label under 13 px; the logo line 11 px */
.mono,.kick,.opt .lab,.opt .lab a,.opt .lab button,.card .pn,.trust,footer p,.fr,.line .o,.note,.sum .pnote,.dfoot .n,.sizes,.qac button,.strip{font-size:13px}
.tagl{font-size:11px;letter-spacing:.24em;padding-left:.24em}
.pdseal{font-size:13px}
@media (max-width:860px){html[data-pick=a] .pdseal{font-size:13px}}
@media (max-width:560px){.tagl{font-size:11px;letter-spacing:.16em;padding-left:.16em;gap:5px}.card .t{font-size:14px}.card .p{font-size:15px}
  /* tiles: the color dots on phones are a preview only (tap the tile, the product page has the big color buttons) */
  .dots{pointer-events:none}.dot{width:24px;height:24px}.dot i{width:14px;height:14px}}
/* #18 tap targets at least 44 px: cart -/+, the country list, the code box */
.line .q button{width:44px;height:44px;font-size:18px}.line .q span{font-size:14px;min-width:20px}
.sum select{min-height:44px;padding:8px 10px;font-size:14px}
.sum .pci{height:44px}.sum .lnk{min-height:44px}
/* #16 full rows: a double-width tile shows two photos side by side (desktop = 4 across, phone = 2 across) */
.card .ph img.w{display:none}
@media (min-width:981px){.grid>.card.wd{grid-column:span 2}.card.wd .ph{aspect-ratio:2.08/1}.card.wd .ph img.b{display:none}.card.wd.has-b:hover .ph img.a{opacity:1}
  .card.wd .ph img.a{object-fit:contain}.card.wd .ph img.w{display:block;left:50%;width:50%}.card.wd .ph:has(img.w) img.a{right:50%;left:0;width:50%;object-fit:cover}}
@media (max-width:980px){.grid>.card.wp{grid-column:span 2}.card.wp .ph{aspect-ratio:2.08/1}.card.wp .ph img.b{display:none}
  .card.wp .ph img.a{object-fit:contain}.card.wp .ph img.w{display:block;left:50%;width:50%}.card.wp .ph:has(img.w) img.a{right:50%;left:0;width:50%;object-fit:cover}}
/* the old 2x2 first tile on the Chords shelf would leave a hole now that the shelf shows 4 */
@media (min-width:981px){.st2 #s-jazz .grid>.card:first-child{grid-column:auto;grid-row:auto}.st2 #s-jazz .grid>.card:first-child .t{font-size:15px}}
/* Tumblers shelf: both tumbler cards + the instrument names */
.tgrid .tpick{grid-column:span 2}
@media (max-width:980px){.tgrid .tpick{grid-column:1/-1}.tgrid>.card{grid-column:auto}}
@media (max-width:560px){.tgrid>.card{grid-column:auto}}
/* #12 the Gifts page = the medal picker */
.mgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.mtile{background:var(--card);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 12px 22px -18px rgba(23,32,74,.45),0 1px 3px rgba(23,32,74,.08);padding:14px 4px 12px;border-radius:14px}
@media (hover:hover) and (pointer:fine){.mtile:hover{transform:translateY(-2px)}}
@media (max-width:860px){.mgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.mtile img{width:50px;height:50px}}
/* #23 the empty cart suggests a few gifts */
.sugg{margin-top:8px}
.dbody .sugg{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
.dbody .sugg .card .t{font-size:13.5px}.dbody .sugg .card .row .fcta{display:none}
/* #1 phones: the sticky "Add to cart · $18" bar; it slides away while the real button is on screen; the page gets room so nothing hides under it */
.sbuy{display:none}
@media (max-width:860px){
  body.has-sbuy .sbuy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:22;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(244,241,234,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px rgba(23,32,74,.4);
    transition:transform .26s var(--ease-out)}
  body.has-sbuy .sbuy.off{transform:translateY(115%)}
  .sbt{flex:1;min-width:0;display:grid;line-height:1.25}
  .sbt b{font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sbt span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sbuy .btn{flex:none;height:50px;padding:0 18px;font-size:15.5px}
  body.has-sbuy{padding-bottom:78px}
  body.sbuy-on #qa{bottom:86px}
  body.sbuy-on #testbar{bottom:86px}
}
/* #2 the Questions button: never over the cart; on phones a small round "?" */
body.locked #qa{display:none}
.qab em{font-style:normal}
@media (max-width:560px){#qa:not(.on) .qab{padding:0;width:48px;justify-content:center}#qa:not(.on) .qab em{display:none}}
/* the cart pop-up: Subtotal + Checkout stay at the bottom however many things are in it */
.dfoot{position:sticky;bottom:0;background:var(--card);padding-bottom:4px;margin-bottom:-22px;padding-bottom:22px}
.badge{font-size:13px;min-width:22px;height:22px}
@media (max-width:560px){#testbar{max-width:calc(100% - 84px);overflow:hidden;text-overflow:ellipsis}}   /* test mode only: never under the "?" */
/* ---- s54 (Oct 12, JC "i like the genre page"): #/genre/<jazz|rock|metal|classical>. A header band in the genre's colors, 4 big genre
   buttons, then the products. Fonts: Bagel (rock), Holtwood (metal, jazz), Kalnia (classical); Bagel is a Latin-only subset. */
@font-face{font-family:Bagel;src:url(/fonts/BagelFatOne-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:Kalnia;src:url(/fonts/Kalnia.ttf) format("truetype");font-weight:100 900;font-display:swap}
.ghead{--gbg:#141414;--gtx:#F6F3EC;--glab:#F7C623;background:var(--gbg);color:var(--gtx);padding:30px 0 34px}
.ghead .path{color:var(--glab);margin-bottom:6px}
.ghead .path a{color:var(--glab);text-decoration-color:currentColor}
.ghead .path span{color:var(--glab)}
.ghead h1{font-weight:400;font-size:clamp(44px,6vw,76px);line-height:1;margin:12px 0 14px;text-transform:uppercase;letter-spacing:0}
.ghead p{font-size:17px;line-height:1.45;color:var(--gtx);max-width:44ch}
.g-rock h1{font-family:Bagel,Holtwood,sans-serif;color:#F6F3EC;text-shadow:.06em .06em 0 #D7262E}
.g-metal{--glab:#D5D9DE}.g-metal h1{font-family:Holtwood,Georgia,serif;color:#F6F3EC;text-shadow:.06em .06em 0 #9E1B22}
.g-classical{--glab:#D8B45C;--gtx:#F3EBDD}.g-classical h1{font-family:Kalnia,Georgia,serif;font-weight:700;color:#C9A24A;letter-spacing:.02em}
.g-jazz{--gbg:var(--cobalt);--gtx:var(--cream);--glab:var(--cream)}.g-jazz h1{font-family:Holtwood,Georgia,serif;color:var(--cream);text-shadow:.06em .06em 0 var(--navy)}
.ghead+.gsec{padding-top:24px}
.gbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:32px}
.gbtn{min-height:56px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 10px;border-radius:14px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:17px;line-height:1.1;transition:transform .16s var(--ease-out),border-color .15s ease}
.gbtn:active{transform:scale(.97)}
.gbtn.gb-rock{font-family:Bagel,sans-serif}.gbtn.gb-metal,.gbtn.gb-jazz{font-family:Holtwood,Georgia,serif;font-size:15px;text-transform:uppercase}
.gbtn.gb-classical{font-family:Kalnia,Georgia,serif;font-weight:700;font-size:18px}
.gbtn.on{border-color:#141414;background:#141414;color:#F6F3EC}
.gbtn.on.gb-rock{color:#F6F3EC;text-shadow:.07em .07em 0 #D7262E}.gbtn.on.gb-metal{text-shadow:.07em .07em 0 #9E1B22}.gbtn.on.gb-classical{color:#C9A24A}
.gbtn.on.gb-jazz{background:var(--cobalt);border-color:var(--cobalt);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.gbtn:not(.on):hover{border-color:var(--ink)}}
@media (max-width:560px){.ghead{padding:22px 0 26px}.ghead h1{font-size:44px;margin:8px 0 10px}.gbtns{grid-template-columns:1fr 1fr;margin-bottom:24px}}
/* ---- s55 (Oct 12, JC: the new genre items on the first page): "Shop by genre" home shelf = 4 genre tiles (approved option A).
   Each tile: one photo + a block in its genre page header's colours and font. 4 across on desktop, 2x2 on phones. */
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.gtile{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:#141414;color:#F6F3EC;
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.gtile:active{transform:scale(.98)}
.gph{position:relative;aspect-ratio:1/1;background:var(--tile);overflow:hidden}
.gph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gtx{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.gname{font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1;text-transform:uppercase;letter-spacing:0}
.gcount{font-size:14px;line-height:1.2}
.gt-jazz{background:var(--cobalt)}.gt-jazz .gname{font-family:Holtwood,Georgia,serif;color:var(--cream);text-shadow:.06em .06em 0 var(--navy)}.gt-jazz .gcount{color:var(--cream)}
.gt-rock .gname{font-family:Bagel,Holtwood,sans-serif;color:#F6F3EC;text-shadow:.06em .06em 0 #D7262E}.gt-rock .gcount{color:#F7C623}
.gt-metal .gname{font-family:Holtwood,Georgia,serif;color:#F6F3EC;text-shadow:.06em .06em 0 #9E1B22}.gt-metal .gcount{color:#D5D9DE}
.gt-classical .gname{font-family:Kalnia,Georgia,serif;font-weight:700;color:#C9A24A;letter-spacing:.02em}.gt-classical .gcount{color:#D8B45C}
@media (hover:hover) and (pointer:fine){.gtile:hover{transform:translateY(-5px);box-shadow:0 14px 28px -16px rgba(20,20,24,.55)}}
@media (max-width:980px){.ggrid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:560px){.gtx{padding:12px 12px 14px}.gname{font-size:21px}.gt-rock .gname{font-size:20px}.gcount{font-size:13.5px}}
#s-genre .shead p{text-wrap:balance}
/* ---- s57 (Oct 12, launch fixes from Marketing HQ/jobs/2026-10-12-aesthetic-check #1-#3) */
.gph img{mix-blend-mode:multiply}   /* #1: the genre tile photos sit on the cream like every product card */
.gbtn{text-transform:uppercase}     /* #2: JAZZ · ROCK & PUNK · METAL · CLASSICAL, one style */
.gbtn.gb-rock{font-size:16px}.gbtn.gb-classical{font-size:17px;letter-spacing:.02em}
/* #3: the rock heart choice = 2 tiny heart pictures + "2 hearts", not colour dots */
.hic{width:16px;height:15px;flex:none;display:block}
.card .row .hpill{display:inline-flex;align-items:center;gap:3px;background:#141414;color:#F6F3EC;border-radius:99px;padding:5px 11px 5px 8px;font-size:13px;line-height:1.2;white-space:nowrap}
.card .row .hpill .hic:nth-child(2){margin-right:4px}
.chips.hearts .chip{min-height:44px;height:auto;padding:0 16px 0 12px;gap:8px}
.chips.hearts .chip .hic{width:20px;height:18px}

/* Oct 12 (JC screenshot): picker names sit right under their medal in every row (a row with 2-line names pushed 1-line names down) */
.pdseal,.mtile{align-content:start}
.pdseal[aria-pressed=true]{font-weight:400;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}   /* bold label overflowed the white tile on desktop */
.pdseal[aria-pressed=true]{box-shadow:0 0 0 7px #fff,0 8px 16px -10px rgba(23,32,74,.4)}   /* white tile 7px wider each side so the name always sits inside it */
/* Oct 12 (JC: "weird white square" behind the selected medal): no white tile — selection = pink ring round the medal + pink underline */
.pdseal[aria-pressed=true]{background:transparent;box-shadow:none}
.pdseal[aria-pressed=true] img,.pdseal img{transform:none}
.pdseal[aria-pressed=true] img{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 #D9C9CF,0 6px 10px -4px rgba(23,32,74,.35)}   /* JC: no pink ring — every medal looks the same; selected = underline only */
/* s60 (Oct 13 design audit): the home Christmas strip is a link to #/?f=xmas; genre pages get "Tees" / "Mugs" headings */
a.strip{display:block;text-decoration:none}
a.strip u{text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover) and (pointer:fine){a.strip:hover u{text-decoration-thickness:2px}}
.gsub{font-family:Holtwood,Georgia,serif;font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.6vw,30px);line-height:1.05;color:var(--navy);margin:8px 0 16px;display:flex;align-items:baseline;gap:10px}
.gsub .mono{font-size:13px;letter-spacing:.08em;color:var(--navy);opacity:.7}
.grid+.gsub{margin-top:44px}
@media (max-width:560px){.grid+.gsub{margin-top:32px}}
/* s60: genre cards that come in Black or White get a pill like the "2 hearts" one (was small grey text on desktop, hidden on phones) */
.card .row .bwpill{gap:4px;padding:5px 11px 5px 7px}
.bwd{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.55)}
.bwd+.bwd{margin:0 4px 0 1px}
/* s60b (JC Oct 13, screenshot of Keyboard: "take out that pink line"): the selected medal has no underline either - all medals look the same */
.pdseal[aria-pressed=true]{text-decoration:none}
/* s60c (Oct 13): on computers the 16 medals were 8 across in 48-60 px columns, so Keyboard / Band, Choir, Music Director ran into the
   next name (even at 1440 px). 4 x 4 like on phones: every name fits, the left side now matches the height of the photo group. */
@media (min-width:861px){.pdh .pdseals{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px}}
/* s62: cart "10% off your next order" tick box + the code on the thank-you page */
.optin{display:flex;gap:10px;align-items:flex-start;margin:14px 0 16px;font-size:14px;line-height:1.4;color:var(--navy);cursor:pointer}
.optin input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--navy)}
.nextcode{margin-top:26px;max-width:460px;border:1.5px dashed var(--navy);border-radius:16px;padding:18px 20px;display:grid;gap:8px;justify-items:start;background:rgba(255,255,255,.6)}
.nextcode b{font-size:24px;letter-spacing:.06em;color:var(--navy)}
.nextcode p{font-size:14px;line-height:1.45;color:#4D5170;margin:0}
.nextcode .btn{flex:none;padding:10px 16px}
/* s62: short About page */
.abt p{font-size:17px;line-height:1.6;max-width:60ch;margin-bottom:16px;color:var(--navy)}
.abt .lead{font-size:clamp(20px,2.2vw,24px);line-height:1.45;margin-bottom:22px}
.abt a:not(.btn){text-decoration:underline;text-underline-offset:3px}

/* s65 (Oct 13 lunch design check) */
@media (max-width:560px){.page{padding-top:28px;padding-bottom:40px}   /* the phone .wrap rule had wiped the page's top space */
  .fr{flex-direction:column;gap:0}.fr a{padding:9px 0;margin:0}   /* footer links one per line, not a 3-column staircase */
  .note{text-align:center}}
.optin{max-width:400px;margin-left:auto}   /* lines up with the cart summary + PayPal column */
.chips .allsocks{border-style:dashed}
.bwpill .bwd:first-child{border-color:#F3EBDD}

/* s66 (shopper test): readable dark red for cart / checkout / pop-up warnings on the light look (was #FF8A8A, left from the dark look) */
html[data-look] .sum .pnote.bad,html[data-look] .err,html[data-look] .sc-err{color:#B42318}
html[data-look] .sc-input[aria-invalid=true],html[data-look] .sc-check.bad .sc-box{border-color:#B42318}
.sum .pnote.usd{margin:6px 0 0;text-align:right}
/* s67: Privacy page section headings */
.abt h3{font-size:17px;font-weight:700;margin:26px 0 6px;color:var(--navy)}.abt h3+p{margin-top:0}
.abt ul{font-size:17px;line-height:1.6;max-width:60ch;margin:0 0 16px;padding-left:1.2em;color:var(--navy)}.abt li{margin-bottom:4px}   /* Oct 27: privacy "Who else sees it" list, same width + size as the text */
/* s68: hoodies have 6 sizes (S-3XL): keep the size chips on one line on phones (44 px stays a full tap target) */
@media (max-width:430px){#sizes.chips{gap:6px}#sizes.chips button{min-width:44px;padding:0 10px}}

/* s80: Patreon members arriving from the Practice Room (app.js memberArrival) */
#mbar{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;font:400 13px/1.35 var(--mono);padding:10px 44px 10px 16px;position:relative;text-align:left}
#mbar b{font-weight:600}#mbar .mb-star{flex:none}
#mbar .mb-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;color:#fff;font-size:15px;cursor:pointer;border-radius:50%}
#mbar .mb-x:hover{background:rgba(255,255,255,.18)}
@media (max-width:560px){#mbar{font-size:12px;justify-content:flex-start}}

/* Oct 14 (JC: "awkward space on top of the products"; picked B of store/proposals-oct14-stagegap): on laptops the stage now runs the full
   height of the left column (heading to medals) instead of sitting at the bottom of it, and the products are 10% bigger to fill it.
   Sizes via width (not scale) so anim.css keeps its swing pivots. Phones (<=860px) unchanged. */
@media (min-width:861px){
  .pdg{align-items:stretch}
  .pdstage{align-self:stretch;aspect-ratio:auto;max-height:none;min-height:480px}
  .pd-tee{width:80%;right:-18%}
  .pd-orn{width:25%}
  .pd-mug{width:58.5%;left:0}
  .pd-btn{width:27.5%;left:48.5%}
  .pd-stk{width:23%;right:-4%}
}

/* Oct 15 (JC: 22 medals made "Who's the gift for?" way too long; picked from store/proposals-oct15-picker):
   computers = name chips, all 22 showing; phones = a spinning 3D medal drum (like the Practice Room's note drum). */
.mdrum,.mdname,.pdh .sub .ph{display:none}
@media (min-width:861px){
  .pdh .pdseals{display:flex;flex-wrap:wrap;gap:8px 7px}
  .pdh .pdseal{display:flex;align-items:center;gap:7px;padding:4px 13px 4px 4px;border-radius:99px;background:rgba(255,255,255,.62);font-size:13px;box-shadow:0 1px 0 rgba(23,32,74,.08)}
  .pdh .pdseal img{width:32px;height:32px;box-shadow:none}
  .pdh .pdseal[aria-pressed=true]{background:var(--navy);color:#fff;box-shadow:none}
  .pdh .pdseal[aria-pressed=true] img{transform:none;box-shadow:0 0 0 2px var(--pink)}
  /* the photo group keeps its size (the stage runs the left column's height); heading + chips sit centred beside it */
  .pdh .pdstage{min-height:620px}
  .pdh .pdl{display:flex;flex-direction:column;justify-content:center}
  .pdh .pdl>*{flex:none}
}
@media (max-width:860px){
  .pdh .pdseals{display:none}
  .pdh .sub .lap{display:none}.pdh .sub .ph{display:inline}
  .mdrum{display:block;position:relative;height:136px;margin:4px -16px 0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
  .mdrum .stage{position:absolute;inset:0;perspective:760px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .mdrum .ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
  .mdrum .face{position:absolute;left:0;top:0;display:grid;justify-items:center;align-content:center;gap:6px;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    border-radius:16px;background:rgba(255,255,255,.55);font-family:var(--mono);font-size:11px;line-height:1.15;text-align:center;color:var(--navy);padding:0 4px}
  .mdrum .face img{width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:0 2px 0 #D9C9CF,0 6px 10px -4px rgba(23,32,74,.35);pointer-events:none}
  .mdrum .face.front{background:#fff;box-shadow:0 0 0 3px var(--pink),0 12px 22px -10px rgba(23,32,74,.45)}
  .mdrum .nudge{position:absolute;top:50%;translate:0 -50%;z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:var(--navy);color:#fff;font:400 22px/1 var(--mono);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 10px -4px rgba(23,32,74,.5)}
  .mdrum .nudge.prev{left:14px}.mdrum .nudge.next{right:14px}
  .mdname{display:flex;justify-content:center;align-items:baseline;gap:8px;margin:8px 0 10px;font-family:var(--mono);color:var(--navy)}
  .mdname b{font-size:16px;font-weight:600}.mdname span{font-size:12px;color:#7A7D96}
}
/* Oct 15: "Processing your payment" screen between PayPal closing and the thank-you page (app.js payScreen) */
#paying{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(246,217,228,.97);opacity:0;transition:opacity .25s ease}
#paying.show{opacity:1}
body.paying-open{overflow:hidden}
#paying .pyc{width:min(420px,100%);background:#fff;border-radius:20px;padding:30px 24px 26px;text-align:center;box-shadow:0 18px 40px -18px rgba(23,32,74,.45);color:var(--navy)}
#paying .pym{display:block;margin:0 auto 14px;width:84px;height:84px;border-radius:50%;animation:pyspin 2.4s linear infinite}
#paying.good .pym,#paying.bad .pym{animation:none}
@keyframes pyspin{to{transform:rotate(360deg)}}
#paying .pyh{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:24px;line-height:1.15;text-transform:uppercase;margin:0 0 8px;color:var(--navy)}
#paying .pys{font-size:15px;line-height:1.45;color:#4D5170;margin:0 0 18px}
#paying .pyl{list-style:none;margin:0 auto;padding:0;display:grid;gap:10px;text-align:left;width:max-content;max-width:100%;font-family:var(--mono);font-size:14px}
#paying .pyl li{display:flex;align-items:center;gap:10px;color:#9A9CB2}
#paying .pyl li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #D6D3E3;box-sizing:border-box}
#paying .pyl li.on{color:var(--navy)}
#paying .pyl li.on::before{border-color:var(--pink);border-right-color:transparent;animation:pyspin .8s linear infinite}
#paying .pyl li.ok{color:var(--navy)}
#paying .pyl li.ok::before{content:"✓";display:grid;place-items:center;border:0;background:#2FA36B;color:#fff;font-size:12px;font-weight:700}
#paying.bad .pyh{color:#C0264F}
#paying .pye{margin-top:4px}
#paying .pye .btn{width:100%}
@media (prefers-reduced-motion:reduce){#paying .pym,#paying .pyl li.on::before{animation:none}}
#paying .pyl[hidden],#paying .pye[hidden]{display:none}
/* Oct 15: "Opposite design" link (JC: "Pick a side" could read as the 2 sides of a mug) between the opposite designs (I Hate Jazz <-> I ♥ Jazz ...)
   on the product page. The label sits ABOVE the pill (inside it, long titles pushed the pill past a phone screen). */
.info .oppw{margin:-14px 0 26px;max-width:100%}
.info .oppw .mono{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.info .opp{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border:1.5px solid var(--line);border-radius:99px;max-width:100%;box-sizing:border-box;text-decoration:none;color:var(--ink);font-size:14px;line-height:1.2}
.info .opp img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.info .opp b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.info .opp:hover{border-color:var(--ink)}}
/* Oct 15: "US & Canada only" / "US only" badge on card + ornament photos (bottom-left; NEW stays top-right) + the product page line */
.ph .zonetag{position:absolute;left:10px;bottom:10px;z-index:2;background:var(--navy);color:#fff;font-size:11px;letter-spacing:.04em;padding:5px 10px;border-radius:99px;line-height:1}
.info .znote{display:inline-flex;align-items:center;gap:8px;margin:-16px 0 24px;padding:8px 14px;border-radius:12px;background:#FDE7F0;color:var(--navy);font-size:15px;font-weight:600;line-height:1.3}

/* ---- Oct 15 QA looks fixes (s87) ---- */
.ph .zonetag{top:10px;bottom:auto}   /* "US only" badge top-left: at the bottom it covered "PLAYER" on the ornament and card photos (NEW sits top-right) */
@media (max-width:600px){.ph:has(.newtag) .zonetag{top:40px}}   /* Oct 27 look check: on phones the tile is too narrow for both badges in one row; "US & Canada only" drops under NEW / CHRISTMAS */
h1,h2{text-wrap:balance}         /* no lonely last word: "WHO'S THE GIFT / FOR?", "MORE FROM ROCK & / PUNK" */
.trust li{text-wrap:pretty}
.trust li::before{flex:none}
@media (max-width:640px){
  .trust{flex-direction:column;gap:7px}                                   /* phones: one point per line everywhere (the ornament page had two side by side) */
  .trust li{align-items:baseline}
  .trust li::before{transform:translateY(-2px)}
  main>.wrap>.trust{align-items:flex-start}   /* the bottom strip: left-aligned like the shelves above it (centred, the long line wrapped lopsided) */
}

/* Oct 15: the longer member welcome ("...off tees, hoodies, mugs and more...") wraps to 3 lines on phones: the star sits on the FIRST line */
@media (max-width:640px){ #mbar{align-items:flex-start} #mbar .mb-star{line-height:inherit} }
/* Oct 17 2026: MERCH (Jemma's YouTube shows). The Music Tea header copies the show's intro end card: cream/blush paper, cocoa ink,
   rose caps, line-art teacup, gold sparkles; Bodoni Moda Italic + Jost stand in for the intro's Didot + Futura (phones have no Didot). */
@font-face{font-family:"Bodoni Moda";src:url(/fonts/BodoniModa-Italic-latin.woff2) format("woff2");font-style:italic;font-weight:400 900;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Medium-latin.woff2) format("woff2");font-weight:500;font-display:swap}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mhead{--mt-cocoa:#4A2E3A;--mt-rose:#A8656A;--mt-gold:#D9A86C;background:radial-gradient(120% 90% at 50% 30%,#F6ECDF 45%,#F0D6CE 100%);color:var(--mt-cocoa);padding:22px 0 30px}
.mhead .path,.mhead .path a,.mhead .path span{color:var(--mt-rose)}
.mcard{position:relative;display:grid;justify-items:center;text-align:center;gap:6px;padding:10px 0 4px}
.mcard .mcup{width:92px;height:auto;color:var(--mt-cocoa)}
.mcard .mlat{font-family:Jost,Futura,"Avenir Next",sans-serif;font-weight:500;font-size:14px;letter-spacing:.42em;text-transform:uppercase;color:var(--mt-rose);margin-right:-.42em}
.mcard h1{font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(54px,11vw,104px);line-height:1;margin:0;letter-spacing:0}
.mcard .mrule{display:flex;align-items:center;gap:12px;font-family:Jost,Futura,"Avenir Next",sans-serif;font-weight:500;font-size:12px;letter-spacing:.38em;text-transform:uppercase;color:var(--mt-rose)}
.mcard .mrule::before,.mcard .mrule::after{content:"";width:34px;height:1px;background:currentColor}
.mcard .msp{position:absolute;fill:var(--mt-gold)}
.mcard .msp.s1{width:22px;left:calc(50% - 190px);top:58%}.mcard .msp.s2{width:15px;right:calc(50% - 200px);top:40%}
.mhead p{font-size:16px;line-height:1.45;max-width:44ch;margin:12px auto 0;text-align:center;color:var(--mt-cocoa)}
.mhead+.gsec{padding-top:24px}
@media (max-width:560px){.mcard .msp.s1{left:8%}.mcard .msp.s2{right:8%}.mcard .mcup{width:76px}}
/* the menu has seven words now: smaller type on phones so they all fit a 360-375 px screen */
@media (max-width:420px){header nav{font-size:12px}header nav a{padding:0 4px}header .wrap nav{margin:0 -4px}}
/* Oct 17: the Merch landing page = one big tile per show; each tile wears its show's look (Music Tea = the intro end card) */
.mshows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:20px}
.mshow{--mt-cocoa:#4A2E3A;--mt-rose:#A8656A;--mt-gold:#D9A86C;display:grid;gap:14px;padding:22px 18px 18px;border-radius:18px;color:#4A2E3A;text-decoration:none;
  background:radial-gradient(120% 90% at 50% 25%,#F6ECDF 45%,#F0D6CE 100%);box-shadow:0 18px 28px -20px rgba(74,46,58,.45),0 2px 4px rgba(74,46,58,.08);transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out)}
.mshow .mcard{padding:4px 0 0}
.mshow .mcard .mcup{width:70px}
.mshow .mtitle{font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(46px,9vw,64px);line-height:1}
.mshow .msp.s1{left:12%;top:62%}.mshow .msp.s2{right:12%;top:42%}
.mshow .mpics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mshow .mpics img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#fff}
.mshow .mgo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.mshow .mgo b{font-family:var(--mono);font-size:13px;font-weight:500;color:#A8656A}
.mshow:not(.soon):active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.mshow:not(.soon):hover{transform:translateY(-4px);box-shadow:0 28px 34px -20px rgba(74,46,58,.5),0 2px 4px rgba(74,46,58,.08)}}
nav a[data-nav][hidden]{display:none!important}   /* Oct 17: the admin-only Merch link */
/* Oct 17 (JC: "its kind of difficult to go back to the tees"): merch product pages get a back button to their Music Tea section */
.mback{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:14px 0 4px;padding:0 18px;border-radius:999px;background:#F6ECDF;color:#4A2E3A;
  border:1px solid #E6D2C6;font-family:Jost,Futura,"Avenir Next",sans-serif;font-weight:500;font-size:15px;letter-spacing:.02em;text-decoration:none}
.mback span{font-size:22px;line-height:1;margin-top:-2px}
@media (hover:hover) and (pointer:fine){.mback:hover{border-color:#4A2E3A}}
.mback+.prod{padding-top:14px}
/* Oct 17 (JC: "see the other designs of that tee or mug" -> "only the phrases"): merch "Design" row = phrase chips in the show's italic, keeps colour + size */
.mdes{display:flex;flex-wrap:wrap;gap:7px}
.mdes a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;border:1.5px solid #E2D6CC;background:#fff;color:#4A2E3A;
  font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;font-style:italic;font-size:17px;line-height:1;text-decoration:none;white-space:nowrap;transition:border-color .15s ease,transform .16s var(--ease-out)}
.mdes a.on{background:#4A2E3A;border-color:#4A2E3A;color:#FFF3E4}
.mdes a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.mdes a:not(.on):hover{border-color:#4A2E3A}}
/* Oct 17 tidy: merch cards say how many colours (tiny swatches + "7 colors") instead of the one-colorway dot */
.card .row .mcols{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.card .row .mcols i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);display:block}
.card .row .mcols i:last-of-type{margin-right:5px}
/* Oct 17 (JC, option A): Music Tea shop-in-the-shop top bar. Shown only with body.mt-shop (the Music Tea page + its products). */
.mtbrand,.mtnav{display:none}
body.mt-shop header .logo,body.mt-shop header nav[aria-label=Main]{display:none!important}
body.mt-shop .mtbrand{display:flex;flex-direction:column;justify-content:center;min-height:44px}
body.mt-shop .mtnav{display:flex}
body.mt-shop #view .path{display:none}
.mtlogo{display:inline-flex;align-items:center;gap:8px;color:#4A2E3A;text-decoration:none;line-height:1}
.mtlogo svg{width:30px;height:auto;flex:none}
.mtlogo span{font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;font-style:italic;font-weight:400;font-size:28px;letter-spacing:0}
.mtpow{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-family:Jost,Futura,"Avenir Next",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#A8656A;text-decoration:none;white-space:nowrap}
.mtpow img{height:12px;width:auto}
.mtnav a[hidden]{display:none!important}
.mtnav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 #A8656A}
@media (hover:hover) and (pointer:fine){.mtpow:hover{color:#4A2E3A}.mtnav a:hover{color:var(--ink)}}
@media (max-width:560px){.mtlogo span{font-size:24px}.mtlogo svg{width:26px}.mtpow{font-size:9.5px}.mtpow img{height:10px}}
/* Oct 17 (JC: "a tiny bit bigger so its easier to read"): the Music Tea top bar */
.mtlogo svg{width:36px}.mtlogo span{font-size:34px}
.mtpow{font-size:12px;margin-top:4px}.mtpow img{height:15px}
body.mt-shop header nav.mtnav{font-size:15px}
@media (max-width:560px){.mtlogo span{font-size:29px}.mtlogo svg{width:30px}.mtpow{font-size:10.5px}.mtpow img{height:12px}body.mt-shop header nav.mtnav{font-size:14px}}

/* Oct 17 (JC: "it looks too squary, the sections dont blend"): Music Tea page looks, body[data-mtlook] a / b / c */
body.mt-shop[data-mtlook]:not([data-mtlook=""]){--bg:#F6ECDF;--tile:#FBF5EE;--line:#E7D7CC;--hdr:rgba(246,236,223,.92)}
body.mt-shop[data-mtlook]:not([data-mtlook=""]) .mhead{background:radial-gradient(90% 120% at 50% 0%,#F0D6CE 0%,rgba(240,214,206,.55) 45%,rgba(246,236,223,0) 100%)}
body.mt-shop[data-mtlook]:not([data-mtlook=""]) .card .ph{border-radius:22px;box-shadow:0 22px 34px -26px rgba(74,46,58,.45),0 1px 2px rgba(74,46,58,.06)}
body.mt-shop[data-mtlook]:not([data-mtlook=""]) .card .meta .t{color:#4A2E3A}
body.mt-shop[data-mtlook]:not([data-mtlook=""]) .card .meta .p{color:#4A2E3A}
body.mt-shop[data-mtlook]:not([data-mtlook=""]) .msec{padding-top:18px}
body.mt-shop[data-mtlook]:not([data-mtlook=""]) .gsub{font-family:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;font-style:italic;font-weight:400;text-transform:none;color:#4A2E3A;font-size:clamp(40px,6vw,56px);letter-spacing:0;text-shadow:none}
body.mt-shop[data-mtlook]:not([data-mtlook=""]) .gsub .mono{font-family:Jost,Futura,sans-serif;font-style:normal;font-size:13px;letter-spacing:.2em;color:#A8656A}
/* B: titles like the intro end card, centred, with air between sections */
body.mt-shop[data-mtlook=b] .msec{padding-top:44px}
body.mt-shop[data-mtlook=b] .gsub{display:flex;align-items:center;justify-content:center;gap:16px;font-family:Jost,Futura,sans-serif;font-style:normal;font-weight:500;font-size:15px;letter-spacing:.42em;text-transform:uppercase;color:#A8656A;margin-bottom:22px}
body.mt-shop[data-mtlook=b] .gsub::before,body.mt-shop[data-mtlook=b] .gsub::after{content:"";height:1px;width:56px;background:#C9A3A0}
body.mt-shop[data-mtlook=b] .gsub .mono{display:none}
body.mt-shop[data-mtlook=b] .gsub .mst::after{content:"";display:inline-block;width:10px;height:10px;margin-left:10px;vertical-align:2px;background:#D9A86C;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
/* C: night bands (the intro title over her royal-blue set) behind Hoodies + Mugs, fading in and out */
body.mt-shop[data-mtlook=c] .msec-hoodie,body.mt-shop[data-mtlook=c] .msec-mug{position:relative;padding:56px 0 48px;margin:28px 0}
body.mt-shop[data-mtlook=c] .msec-hoodie::before,body.mt-shop[data-mtlook=c] .msec-mug::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(43,47,163,0) 0%,#2B2FA3 14%,#23269A 86%,rgba(43,47,163,0) 100%)}
body.mt-shop[data-mtlook=c] .msec-hoodie .gsub,body.mt-shop[data-mtlook=c] .msec-mug .gsub{color:#FFF3E4}
body.mt-shop[data-mtlook=c] .msec-hoodie .gsub .mono,body.mt-shop[data-mtlook=c] .msec-mug .gsub .mono{color:#F8C9C4}
body.mt-shop[data-mtlook=c] .msec-hoodie .card .meta .t,body.mt-shop[data-mtlook=c] .msec-hoodie .card .meta .p,body.mt-shop[data-mtlook=c] .msec-mug .card .meta .t,body.mt-shop[data-mtlook=c] .msec-mug .card .meta .p,
body.mt-shop[data-mtlook=c] .msec-mug .card .row .mcols{color:#FFF3E4}
body.mt-shop[data-mtlook=c] .shelf{overflow-x:clip}
body.mt-shop[data-mtlook=c] .msec-hoodie,body.mt-shop[data-mtlook=c] .msec-mug{isolation:isolate}
/* Oct 17 (JC: "I like C - but make sure we can read the section titles"): titles sit on SOLID blue (short fades), a bit bigger everywhere */
body.mt-shop[data-mtlook=c] .msec-hoodie,body.mt-shop[data-mtlook=c] .msec-mug{padding:86px 0 64px}
body.mt-shop[data-mtlook=c] .msec-hoodie::before,body.mt-shop[data-mtlook=c] .msec-mug::before{background:linear-gradient(180deg,rgba(43,47,163,0) 0,#2B2FA3 56px,#23269A calc(100% - 48px),rgba(35,38,154,0) 100%)}
body.mt-shop[data-mtlook=c] .gsub{font-size:clamp(46px,7vw,64px)}
body.mt-shop[data-mtlook=c] .msec-hoodie .gsub,body.mt-shop[data-mtlook=c] .msec-mug .gsub{color:#FFF3E4;text-shadow:0 2px 14px rgba(15,16,70,.35)}
body.mt-shop[data-mtlook=c] .msec-hoodie .gsub .mono,body.mt-shop[data-mtlook=c] .msec-mug .gsub .mono{color:#FFDEAA;font-size:14px}
body.mt-shop[data-mtlook=c] .msec-mug .card .row .mcols i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
body.mt-shop[data-mtlook=c] .msec-hoodie,body.mt-shop[data-mtlook=c] .msec-mug{padding-top:104px}
body.mt-shop[data-mtlook=c] .msec-hoodie::before,body.mt-shop[data-mtlook=c] .msec-mug::before{background:linear-gradient(180deg,rgba(43,47,163,0) 0,#2B2FA3 36px,#23269A calc(100% - 40px),rgba(35,38,154,0) 100%)}
/* Oct 17 (JC: "this footer also doesnt quite apply for when we are in the tea"): Music Tea footer = the show's mark + one-colour "powered by" */
.mtfl{display:none}
body.mt-shop footer .mtfl{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:14px}
body.mt-shop footer .flogo{display:none!important}
body.mt-shop footer .fr a[href="#/about"]{display:none}
body.mt-shop footer .mtfl .mtlogo span{font-size:30px}body.mt-shop footer .mtfl .mtlogo svg{width:30px}
/* Oct 17 2026 (JC: "the landing page proposal for jemma's page ... creative and much different than the other two"): Jemma's own line.
   A dark stage (her studio's pink + cyan light), her chrome name, Yellowtail (OFL) for her script. Only on #/merch/jemma (body.jm-shop);
   cards, cart and product pages stay the store's own. Three looks: body[data-jmlook] a stage / b record sleeve / c synth panel. */
@font-face{font-family:Yellowtail;src:url(/fonts/Yellowtail-latin.woff2) format("woff2");font-weight:400;font-display:swap}
body.jm-shop #view{--ink:#F6EEF8;--muted:#B3A6C2;--line:#2E2638;--tile:#FFFFFF;--bg:#0F0B15;--accent:#FF3DBD;background:radial-gradient(90% 60% at 50% 0%,#2A1235 0%,#0F0B15 70%);color:var(--ink)}
body.jm-shop #view .path,body.jm-shop #view .path a,body.jm-shop #view .path span{color:#B3A6C2}
.jmhead{padding:18px 0 8px}
.jmwm{display:block;width:min(100%,560px);height:auto}
.jmph{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:22px}
.jmsecs{padding-top:28px}
body.jm-shop .gsub{color:#F6EEF8;text-transform:none}
body.jm-shop .gsub .mono{color:#35E2FF;font-size:13px}
body.jm-shop .card .meta .t,body.jm-shop .card .meta .p{color:#F6EEF8}
body.jm-shop .card .row .mcols{color:#B3A6C2}
body.jm-shop .card .row .mcols i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
body.jm-shop .card .ph{border-radius:18px}
body.jm-shop .msec+.msec{margin-top:40px}
body.jm-shop #view .trust{color:#B3A6C2}
/* A: stage. Her photo with pink + cyan stage light around it, the chrome name beside it (below on phones). Section titles in her script. */
.jmstage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,5vw,64px);padding:18px 0 10px}
.jmstage .jmph{box-shadow:-18px 18px 60px -20px rgba(255,61,189,.65),18px -12px 60px -24px rgba(53,226,255,.5)}
.jmstage .jmtx{display:grid;gap:14px;justify-items:start}
.jmlab{font-size:13px;letter-spacing:.5em;text-transform:uppercase;color:#35E2FF;padding-left:6px}
body.jm-shop[data-jmlook=a] .gsub,body.jm-shop:not([data-jmlook]) .gsub{font-family:Yellowtail,cursive;font-weight:400;font-size:clamp(46px,7vw,64px);line-height:1;color:#FF3DBD;text-shadow:3px 3px 0 #35E2FF;letter-spacing:0}
@media (max-width:700px){.jmstage{grid-template-columns:1fr}.jmstage .jmtx{justify-items:center;text-align:center}.jmlab{padding-left:.5em}}
/* B: record sleeve. The photo is the cover with the record peeking out; the "tracklist" is the products (each with its time signature). */
.jmsleeve{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding:18px 0 10px}
.jmcover{position:relative;isolation:isolate}
.jmcover .jmph{border-radius:6px;box-shadow:0 30px 50px -24px rgba(0,0,0,.8)}
.jmdisc{position:absolute;z-index:-1;top:4%;right:-16%;width:92%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#FF3DBD 0 15%,#0A0A0C 15.5% 17%,#18161C 17.5%,#0A0A0C 30%,#17151B 31%,#0A0A0C 46%,#18161C 47%,#0A0A0C 62%,#16141A 63%,#0A0A0C 70%);box-shadow:0 0 0 1px #2B2632}
.jmside{display:grid;gap:18px}
.jmside .jmwm{width:min(100%,420px)}
.jmtracks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.jmtracks .jmsl{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#35E2FF;margin:14px 0 6px}
.jmtracks .jmsl:first-child{margin-top:0}
.jmtracks a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:10px 0;color:#F6EEF8;text-decoration:none;border-bottom:1px solid #2E2638}
.jmtracks a .mono{font-size:13px;color:#B3A6C2;flex:none}
.jmtracks a b{font-weight:600;font-size:17px}
.jmtracks a i{flex:1;border-bottom:2px dotted #4A3F57;transform:translateY(-4px);min-width:16px}
@media (hover:hover) and (pointer:fine){.jmtracks a:hover b{color:#FF3DBD}}
body.jm-shop[data-jmlook=b] .gsub{font-family:var(--mono);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:#35E2FF;border-top:1px solid #2E2638;padding-top:18px}
body.jm-shop[data-jmlook=b] .gsub .mono{display:none}
@media (max-width:700px){.jmsleeve{grid-template-columns:1fr}.jmcover{margin-right:18%}.jmdisc{right:-22%}}
/* C: synth panel. Brushed panel with wood end cheeks, her name on top, an LCD, and knobs that jump to the Tees / Mugs banks. */
.jmpanel{position:relative;display:grid;justify-items:center;gap:18px;margin:14px 0 6px;padding:28px clamp(18px,4vw,40px) 26px;border-radius:18px;
  background:linear-gradient(180deg,#2C2D33,#1B1C21);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 50px -30px rgba(0,0,0,.9);
  border-left:clamp(10px,2.4vw,22px) solid #6B4126;border-right:clamp(10px,2.4vw,22px) solid #6B4126}
.jmpanel .jmwm{width:min(100%,520px)}
.jmlcd{display:grid;gap:4px;justify-items:center;width:min(100%,460px);padding:14px 18px;border-radius:8px;background:#0A2B2C;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6);color:#59F3FF;font-size:clamp(13px,2.4vw,16px);letter-spacing:.18em;text-transform:uppercase}
.jmknobs{display:flex;gap:clamp(24px,8vw,72px);justify-content:center;flex-wrap:wrap}
.jmknobs a{display:grid;justify-items:center;gap:8px;min-height:44px;color:#D7CEE0;text-decoration:none}
.jmknobs a .mono{font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.jmknob{position:relative;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5A5B63,#1A1B1F 70%);box-shadow:0 6px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .3s var(--ease-out)}
.jmknob::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:14px;margin-left:-1.5px;border-radius:2px;background:#FF3DBD}
@media (hover:hover) and (pointer:fine){.jmknobs a:hover .jmknob{transform:rotate(35deg)}.jmknobs a:hover{color:#fff}}
body.jm-shop[data-jmlook=c] .gsub{font-family:var(--mono);font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:#59F3FF;align-items:center}
body.jm-shop[data-jmlook=c] .gsub .mst::before{content:"";display:inline-block;width:9px;height:9px;margin-right:12px;border-radius:50%;background:#FF3DBD;box-shadow:0 0 0 3px rgba(255,61,189,.25)}
body.jm-shop[data-jmlook=c] .gsub .mono{display:none}
/* the Merch landing tile for Jemma */
.mshow.ms-jemma{background:radial-gradient(100% 80% at 50% 0%,#2A1235 0%,#0F0B15 75%);color:#F6EEF8;box-shadow:0 18px 28px -20px rgba(15,11,21,.7),0 2px 4px rgba(15,11,21,.15)}
.mshow.ms-jemma .jmtile{display:grid;place-items:center;min-height:150px;padding:8px 6% 0}
.mshow.ms-jemma .jmtile img{width:min(100%,400px);height:auto}
.mshow.ms-jemma .mgo b{color:#35E2FF}
.jmside{position:relative;z-index:1}.jmdisc{right:-12%}   /* B: the record peeks out behind the cover, never over the tracklist */
/* Oct 17 (JC: "C but make it better" + his modular-synth photo): look C = her rig. Chrome name on top; a walnut case holding our own
   modular panel drawing (img/jm/synth.svg, tools/jm_synth.py) with her photo in its screen; a control strip (LCD, one patch button per
   product, two bank knobs); keys along the bottom with the pentatonic C D E G A lit pink. */
.jmrig{display:grid;justify-items:center;gap:16px;padding:10px 0 4px}
.jmrigwm{width:min(100%,500px)}
.jmcase{width:100%;padding:12px clamp(10px,2vw,22px) clamp(10px,2vw,22px);border-radius:18px;
  background:repeating-linear-gradient(92deg,rgba(0,0,0,.09) 0 2px,transparent 2px 11px),linear-gradient(90deg,#4E2C17,#7E4E2C 18%,#8C5A35 50%,#7E4E2C 82%,#4E2C17);
  box-shadow:0 40px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.15)}
.jmsynth{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.6)}
.jmsvg{display:block;width:100%;height:auto}
.jmscr{position:absolute;left:75.88%;top:7.5%;width:22%;height:51.88%;object-fit:cover;object-position:52% 28%;border-radius:5px;box-shadow:0 0 0 2px #000,0 0 26px rgba(255,61,189,.4)}
.jmstrip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2.4vw,28px);margin-top:10px;padding:16px clamp(14px,2vw,22px);border-radius:10px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),linear-gradient(180deg,#2E2F34,#1E1F23)}
.jmstrip .jmlcd{width:auto;min-width:250px;justify-items:start;padding:12px 16px;font-size:14px;letter-spacing:.14em;text-shadow:0 0 6px rgba(89,243,255,.55);
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),#062A2B}
.jmstrip .jmlcd span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.jmpatch{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.jmpatch a{display:grid;justify-items:center;align-content:center;gap:4px;min-width:58px;min-height:66px;padding:8px 6px;border-radius:8px;color:#F2F2F4;text-decoration:none;
  background:linear-gradient(180deg,#3B3C42,#24252A);box-shadow:0 4px 0 #0D0D0F,inset 0 1px 0 rgba(255,255,255,.12);transition:transform .1s ease,box-shadow .1s ease}
.jmpatch a i{width:8px;height:8px;border-radius:50%;background:#4B2C40;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45);transition:background .15s ease,box-shadow .15s ease}
.jmpatch a b{font-size:14px;font-weight:500}.jmpatch a span{font-size:10px;color:#A1A5AF;letter-spacing:.06em}
.jmpatch a:active{transform:translateY(3px);box-shadow:0 1px 0 #0D0D0F}
.jmpatch a:focus-visible i{background:#FF3DBD;box-shadow:0 0 8px #FF3DBD}
@media (hover:hover) and (pointer:fine){.jmpatch a:hover i{background:#FF3DBD;box-shadow:0 0 8px #FF3DBD}}
.jmstrip .jmknobs{gap:22px}
.jmstrip .jmknob{width:46px;height:46px}
.jmkeys{display:flex;margin-top:10px;height:clamp(64px,8vw,104px);border-radius:0 0 8px 8px;overflow:hidden;background:#0C0C0E;padding-top:4px}
.jmkeys span{position:relative;flex:1;background:linear-gradient(180deg,#E9E9E5,#FFFFFF 70%,#D8D8D3);border-right:1px solid #A9A9A3;border-radius:0 0 4px 4px}
.jmkeys span.lit{background:linear-gradient(180deg,#FFC2E4,#FFD9EE 70%,#F29ACB)}
.jmkeys em{position:absolute;z-index:1;right:-31%;top:0;width:62%;height:60%;background:linear-gradient(180deg,#2C2C30,#0B0B0D 85%,#3A3A3F);border-radius:0 0 3px 3px}
@media (max-width:860px){.jmstrip{grid-template-columns:1fr}.jmstrip .jmlcd{justify-self:stretch;min-width:0}.jmkeys span.xo{display:none}}
@media (max-width:420px){.jmpatch{gap:7px}.jmpatch a{min-width:52px}}
/* Oct 17 (JC: "get rid of that synth ... clean the first landing page"): look C = just her chrome name on the dark stage */
.jmclean{display:grid;justify-items:center;padding:24px 0 6px}
.jmclean .jmwm{width:min(100%,560px)}
body.jm-shop[data-jmlook=c] .gsub .mst::before{content:none}
body.jm-shop[data-jmlook=c] .gsub{font-family:Yellowtail,cursive;font-weight:400;font-size:clamp(46px,7vw,64px);line-height:1;letter-spacing:0;text-transform:none;color:#FF3DBD;text-shadow:3px 3px 0 #35E2FF}
/* Oct 17 (JC: "use the 'cable' method to switch colors and stuff ... after you've selected an item"): the patch bay on Jemma's product
   pages. Source jack on the left of each row, one jack per colour / size; the patched option has the plug + its cable. */
.jmbay{position:relative;display:grid;gap:14px;margin:6px 0 18px;padding:16px clamp(12px,3vw,18px) 14px;border-radius:14px;color:#ECEDF1;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),linear-gradient(180deg,#2E2F35,#1C1D21);
  box-shadow:0 18px 30px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.jbcab{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.jbcab path{fill:none;stroke-linecap:round}
.jbrow{display:grid;grid-template-columns:62px 1fr;align-items:start;gap:8px}
.jbsrc{display:grid;justify-items:center;gap:6px;padding-top:6px}
.jbsrc .mono,.jbj .mono{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#A9ADB7}
.jbsrc .mono{color:#ECEDF1}
.jbjacks{display:flex;flex-wrap:wrap;gap:4px 2px}
.jbj{display:grid;justify-items:center;align-content:start;gap:6px;min-width:52px;min-height:62px;padding:6px 2px;background:none;border:0;border-radius:8px;cursor:pointer;color:inherit;font:inherit}
.jbj .mono{max-width:60px;text-align:center;line-height:1.2}
.jbj.on .mono{color:#fff}
.jbj[disabled]{opacity:.35;cursor:not-allowed}
.jjack{position:relative;width:30px;height:30px;border-radius:50%;flex:none;
  background:radial-gradient(circle,#050506 0 34%,#6E7177 35% 41%,transparent 42%),radial-gradient(circle at 40% 35%,#F2F3F5,#8D9096);
  box-shadow:0 0 0 4px var(--c,#3A3B41),0 3px 6px rgba(0,0,0,.6)}
.jbsrc .jjack{box-shadow:0 0 0 4px #FF3DBD,0 3px 6px rgba(0,0,0,.6)}
.jbrow[data-row=size] .jbsrc .jjack{box-shadow:0 0 0 4px #35E2FF,0 3px 6px rgba(0,0,0,.6)}
.jbj:focus-visible{outline:2px solid #35E2FF;outline-offset:2px}
@media (hover:hover) and (pointer:fine){.jbj:not(.on):not([disabled]):hover .jjack{transform:scale(1.08)}.jbj:hover .mono{color:#fff}}
.jjack{transition:transform .15s var(--ease-out)}
.jbread{justify-self:end;padding:6px 12px;border-radius:6px;background:#062A2B;color:#59F3FF;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 6px rgba(89,243,255,.5)}
.jbc .jbp{animation:jbplug .25s .3s both}
.jbc:not(.draw) .jbp{animation:none}
@keyframes jbplug{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jbc path{transition:none!important}.jbc .jbp{animation:none}}
.jbrow{padding-top:26px}.jmbay{padding-top:6px}   /* room above each row for the cable arc */
@media (max-width:520px){.jbrow{grid-template-columns:1fr;gap:4px}.jbsrc{display:flex;align-items:center;gap:10px;justify-items:start;padding-top:0}
  .jbjacks{display:grid;grid-template-columns:repeat(6,1fr);gap:4px 0}.jbj{min-width:0}.jbj .mono{font-size:9px;letter-spacing:.06em}}
/* Oct 17 (JC: "the phrase also needs to be 'Cable' method"): DESIGN row (yellow cable) replaces the phrase chips on Jemma's items */
.jbrow[data-row=des] .jbsrc .jjack{box-shadow:0 0 0 4px #F2C230,0 3px 6px rgba(0,0,0,.6)}
.jbrow[data-row=des] .jbj{min-width:74px}.jbrow[data-row=des] .jbj .mono{max-width:84px}
@media (max-width:520px){.jbrow[data-row=des] .jbjacks{grid-template-columns:repeat(4,1fr)}.jbrow[data-row=des] .jbj{min-width:0}}
@media (max-width:520px){.jbsrc{flex-direction:row-reverse;justify-content:flex-end}}   /* phones: row name left of its jack so the cable never covers it */
/* Oct 17 (JC: "just let them connect between the options"): no source jacks; row names are plain labels, the cable runs pick -> pick
   (behind the option names, which sit on a small dark plate so they stay readable) */
.jbrow{grid-template-columns:70px 1fr;padding-top:6px}.jmbay{gap:6px;padding-top:12px}
.jbsrc{padding-top:12px;justify-items:start}
.jbsrc .mono{color:#ECEDF1;letter-spacing:.16em}
.jbj .mono{position:relative;z-index:3;padding:1px 4px;border-radius:3px;background:rgba(30,31,35,.88)}
.jbj .jjack{z-index:1}
@media (max-width:520px){.jbrow{grid-template-columns:1fr}.jbsrc{padding-top:4px}}
/* Oct 17 (JC: "the white squares break a little my visual peace in the landing page"): her product photos are cut out (Apple Vision,
   img/xc_jm_*.webp) and sit on the stage instead of white squares. body[data-jmtiles]: a glow / b dark glass / c spotlight. */
body.jm-shop .jmsecs .card .ph{background:transparent;overflow:visible}
body.jm-shop .jmsecs .card .ph img{object-fit:contain;padding:4%}
body.jm-shop .jmsecs .card .no{color:#6F6680}
/* a: no tile at all; a soft pink + cyan glow under each piece, like stage light */
body.jm-shop[data-jmtiles=a] .jmsecs .card .ph{background:radial-gradient(52% 48% at 50% 54%,rgba(255,61,189,.34),rgba(53,226,255,.12) 60%,transparent 78%)}
/* b: dark glass tiles, a hairline edge and a faint pink corner light */
body.jm-shop[data-jmtiles=b] .jmsecs .card .ph{background:radial-gradient(90% 70% at 15% 0%,rgba(255,61,189,.16),transparent 60%),linear-gradient(165deg,#2B2335,#161219);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 22px 32px -26px #000}
/* c: a round spotlight behind each piece */
body.jm-shop[data-jmtiles=c] .jmsecs .card .ph{background:radial-gradient(closest-side,#EDE6F3 0%,#C4B5D6 58%,rgba(196,181,214,.18) 82%,transparent 100%)}
body.jm-shop[data-jmtiles=c] .jmsecs .card .ph img{padding:9%}
body.jm-shop .jmsecs .card .ph img{mix-blend-mode:normal}   /* the store multiplies photos into its cream; on her dark stage the cut-outs stay true */
body.jm-shop[data-jmtiles=a] .jmsecs .card .ph,body.jm-shop[data-jmtiles=c] .jmsecs .card .ph{box-shadow:none}
/* Oct 17 (JC: the tiles "don't look good - better direction"): three new ways to show her pieces, body[data-jmtiles] d / e / f */
body.jm-shop .jmsecs .card .ph img.rf{display:none}
/* d SHOWROOM: big pieces on a glossy black floor with their reflection; the rows scroll sideways with snap */
body.jm-shop[data-jmtiles=d] .jmsecs .card .ph{background:none;box-shadow:none;overflow:visible;margin-bottom:28%}
body.jm-shop[data-jmtiles=d] .jmsecs .card .ph img.rf{display:block;top:96%;transform:scaleY(-1);opacity:.28;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 34%);mask-image:linear-gradient(to top,#000 0%,transparent 34%)}
body.jm-shop[data-jmtiles=d] .jmsecs .card .ph img.rf.rw{left:50%;width:50%}
body.jm-shop[data-jmtiles=d] .jmsecs .card .ph::after{content:"";position:absolute;left:8%;right:8%;top:93%;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,61,189,.35),transparent);filter:blur(4px)}
body.jm-shop[data-jmtiles=d] .jmsecs .msec{background:linear-gradient(180deg,transparent 0 58%,rgba(255,255,255,.035) 58%,transparent 100%);border-radius:18px}
body.jm-shop[data-jmtiles=d] .jmsecs .card .meta{margin-top:-14%;position:relative}
/* e PASTEL CHROME: the page takes the colours of her chrome letters (sky blue -> lilac -> pink); pieces float with a soft shadow */
body.jm-shop[data-jmtiles=e] #view{--ink:#1E1630;--muted:#5E5372;--line:#D9CDEA;background:linear-gradient(180deg,#D3EBFF 0%,#E6DBFF 42%,#FFD8EC 100%);color:#1E1630}
body.jm-shop[data-jmtiles=e] #view .path,body.jm-shop[data-jmtiles=e] #view .path a,body.jm-shop[data-jmtiles=e] #view .path span{color:#5E5372}
body.jm-shop[data-jmtiles=e] .card .meta .t,body.jm-shop[data-jmtiles=e] .card .meta .p{color:#1E1630}
body.jm-shop[data-jmtiles=e] .card .row .mcols{color:#5E5372}
body.jm-shop[data-jmtiles=e] .gsub{text-shadow:3px 3px 0 #FFFFFF!important}
body.jm-shop[data-jmtiles=e] .jmsecs .card .ph{background:none;box-shadow:none}
body.jm-shop[data-jmtiles=e] .jmsecs .card .ph img.a,body.jm-shop[data-jmtiles=e] .jmsecs .card .ph img.w{filter:drop-shadow(0 22px 18px rgba(70,30,100,.28))}
body.jm-shop[data-jmtiles=e] #view .trust{color:#5E5372}
/* f MERCH BOOTH: like her merch table at a gig. Tees hang from a chrome rail on hangers (they swing a little on hover); mugs sit on a shelf */
body.jm-shop[data-jmtiles=f] .jmsecs .card .ph{background:none;box-shadow:none;overflow:visible}
body.jm-shop[data-jmtiles=f] .msec-tee .grid{position:relative;padding-top:34px}
body.jm-shop[data-jmtiles=f] .msec-tee .grid::before{content:"";position:absolute;top:10px;left:-1%;right:-1%;height:7px;border-radius:4px;background:linear-gradient(180deg,#F4F4F7,#8D9097 70%,#5D6066);box-shadow:0 3px 8px rgba(0,0,0,.5),0 0 22px rgba(255,61,189,.25)}
body.jm-shop[data-jmtiles=f] .msec-tee .card .ph::before{content:"";position:absolute;z-index:2;top:-30px;left:50%;width:56%;height:52px;transform:translateX(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 52'%3E%3Cpath d='M60 18c0-5 4-7 7-7s6 3 6 6c0 4-5 5-13 11L8 46h104L60 28' fill='none' stroke='%23C9CBD1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
body.jm-shop[data-jmtiles=f] .msec-tee .card .ph img.a{top:4%;transform-origin:50% 0;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
@media (hover:hover) and (pointer:fine){body.jm-shop[data-jmtiles=f] .msec-tee .card:hover .ph img.a{transform:rotate(2.5deg)}}
body.jm-shop[data-jmtiles=f] .msec-mug .grid{position:relative;padding-bottom:16px}
body.jm-shop[data-jmtiles=f] .msec-mug .card .ph{border-bottom:10px solid #6B4126;border-radius:0;box-shadow:0 14px 18px -12px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){body.jm-shop[data-jmtiles=f] .msec-tee .card .ph img.a{transition:none}}
/* d showroom, take 2: bigger pieces (2 a row on laptops, 1 on phones), no band, a clear floor reflection */
body.jm-shop[data-jmtiles=d] .jmsecs .msec{background:none}
body.jm-shop[data-jmtiles=d] .jmsecs .grid{grid-template-columns:repeat(2,1fr);gap:24px 56px}
body.jm-shop[data-jmtiles=d] .jmsecs .grid>.card.wd,body.jm-shop[data-jmtiles=d] .jmsecs .grid>.card.wp{grid-column:span 2}
body.jm-shop[data-jmtiles=d] .jmsecs .card .ph img.rf{opacity:.4}
body.jm-shop[data-jmtiles=d] .jmsecs .card .ph::after{top:91%;height:26px;background:radial-gradient(closest-side,rgba(255,61,189,.45),rgba(53,226,255,.12) 60%,transparent)}
body.jm-shop[data-jmtiles=d] .jmsecs .card .meta{margin-top:-18%;justify-content:center;gap:14px}
body.jm-shop[data-jmtiles=d] .jmsecs .card .row{justify-content:center}
@media (max-width:640px){body.jm-shop[data-jmtiles=d] .jmsecs .grid{grid-template-columns:1fr}body.jm-shop[data-jmtiles=d] .jmsecs .grid>.card.wd,body.jm-shop[data-jmtiles=d] .jmsecs .grid>.card.wp{grid-column:auto}}
body.jm-shop[data-jmtiles=d] .jmsecs .card .ph img.rf{display:none}   /* the mirrored copy muddied the names; the floor glow alone reads cleaner */
/* Oct 17 (JC picked S2 pastel chrome): her tile on the Merch page wears the same pastel look */
.mshow.ms-jemma{background:linear-gradient(180deg,#D3EBFF 0%,#E6DBFF 48%,#FFD8EC 100%);color:#1E1630;box-shadow:0 18px 28px -20px rgba(70,30,100,.4),0 2px 4px rgba(70,30,100,.1)}
.mshow.ms-jemma .mgo b{color:#C2187F}
.mshow.ms-jemma .mpics img{background:transparent;mix-blend-mode:multiply}
body.jm-shop[data-jmtiles=e] .card .row .mcols i{box-shadow:inset 0 0 0 1px rgba(30,22,48,.35)}   /* ivory + white dots stay visible on the pastel */
/* Oct 17 late (JC: "back to the normal way of choosing ... the panel underneath ... animation by itself without the titles"): the panel is a
   display under the normal choosers: no row names, no option names, it re-patches its cables live as the shopper picks */
.jmbay{pointer-events:none;gap:4px;padding:10px 16px 12px;margin:2px 0 16px}
.jbrow{grid-template-columns:1fr;padding-top:18px}
.jbjacks{display:flex;flex-wrap:nowrap;gap:0;justify-content:flex-start}
.jbj{min-width:0;min-height:0;width:44px;height:40px;padding:0;display:grid;place-items:center}
.jbj.off .jjack{opacity:.35}
.jbread{margin-top:6px}
@media (max-width:520px){.jbjacks{display:flex}.jbj{width:calc((100% - 0px)/7)}}
/* her page (pastel): tees cropped tight + bigger cards so the print reads: 2 a row on laptops, 1 on phones */
body.jm-shop[data-jmtiles=e] .msec-tee .grid{grid-template-columns:repeat(2,1fr);gap:40px 48px}
body.jm-shop[data-jmtiles=e] .msec-tee .card .ph img{padding:2%}
@media (max-width:640px){body.jm-shop[data-jmtiles=e] .msec-tee .grid{grid-template-columns:1fr}}
.jbrow[data-row=des] .jbj{min-width:0}
.jbjacks{justify-content:center}   /* the display panel: rows centred */
/* Oct 17 night (JC: the panel looks messy, "tal vez translúcido ... 2 o 3 propuestas"): body[data-jmbay] a / b / c */
.jmover{display:none}
/* a: no panel; the cable runs over the real choosers (picked design -> picked colour -> picked size) */
body.jm-prod[data-jmbay=a] .prod .info{position:relative}
body.jm-prod[data-jmbay=a] .jmover{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
body.jm-prod[data-jmbay=a] .jmover path{fill:none;stroke-linecap:round}
body.jm-prod[data-jmbay=a] #jmbay{display:none}
/* b: the same panel, but see-through: no black box, hairlines top + bottom, jacks on the swatches' grid (left-aligned under them) */
body.jm-prod[data-jmbay=b] .jmbay{background:none;box-shadow:none;border-top:1px solid rgba(30,22,48,.14);border-bottom:1px solid rgba(30,22,48,.14);border-radius:0;padding:4px 0 10px;color:#1E1630}
body.jm-prod[data-jmbay=b] .jbjacks{justify-content:flex-start}
body.jm-prod[data-jmbay=b] .jbj{width:44px;height:36px}
body.jm-prod[data-jmbay=b] .jjack{width:24px;height:24px;background:radial-gradient(circle,#1E1630 0 32%,#B9BCC4 33% 40%,transparent 41%),radial-gradient(circle at 40% 35%,#FFFFFF,#C9CCD3);box-shadow:0 0 0 3px var(--c,#E4DEEC),0 2px 4px rgba(30,22,48,.2)}
body.jm-prod[data-jmbay=b] .jbread{background:none;color:#5E5372;text-shadow:none;padding:0;justify-self:start;font-size:12px}
/* c: a slim translucent strip with three jacks (design, colour, size) and the readout */
body.jm-prod[data-jmbay=c] .jmbay{background:rgba(255,255,255,.45);border:1px solid rgba(30,22,48,.1);box-shadow:0 10px 24px -18px rgba(30,22,48,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:12px 22px;color:#1E1630}
.jbstrip{display:flex;align-items:center;gap:34px}
.jbstrip .jjack{width:26px;height:26px;background:radial-gradient(circle,#1E1630 0 32%,#B9BCC4 33% 40%,transparent 41%),radial-gradient(circle at 40% 35%,#FFFFFF,#C9CCD3);box-shadow:0 0 0 3px var(--c,#E4DEEC),0 2px 4px rgba(30,22,48,.2)}
.jbstrip .jd{--c:#F2C230}.jbstrip .js{--c:#FF3DBD;position:relative}
.jbstrip .js b{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:500;color:#5E5372}
.jbstrip .jbread{margin:0 0 0 auto;background:none;color:#1E1630;text-shadow:none;padding:0;font-size:12px}
body.jm-prod[data-jmbay=c] .jbcab{overflow:visible}
/* Oct 17 night (JC: "quitar el panel de arriba ... tiene que verse como una página distinta, lo mismo que hicimos para Music Tea ... estás usando
   el font de Pentatonics para el de Jemma"): her shop-in-the-shop. body.jm-world = her page + her item pages: her own top bar (chrome name +
   one-colour "powered by"), her own footer, her fonts (Exo 2 + Yellowtail, no P4TP fonts), the pastel chrome page all the way through. */
@font-face{font-family:"Exo 2";src:url(/fonts/Exo2-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Exo 2";src:url(/fonts/Exo2-italic-latin.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
.jmbrand,.jmnav,.jmfl{display:none}
body.jm-world{--mono:"Exo 2",system-ui,sans-serif;--hdr:rgba(232,240,255,.82);--line:rgba(30,22,48,.12);--ink:#1E1630;--muted:#6B5F80;--on:#FFFFFF;
  background:linear-gradient(180deg,#D3EBFF 0%,#E6DBFF 45%,#FFD8EC 100%) fixed;color:#1E1630}
body.jm-world #view{font-family:"Exo 2",system-ui,sans-serif}
body.jm-world header .logo,body.jm-world header nav[aria-label=Main]{display:none!important}
body.jm-world .jmbrand{display:flex;flex-direction:column;justify-content:center;min-height:44px}
body.jm-world .jmnav{display:flex}
body.jm-world #view .path{display:none}
.jmlogo{display:inline-flex;line-height:0}.jmlogo img{height:46px;width:auto}
.jmpow{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-family:"Exo 2",system-ui,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B5F80;text-decoration:none;white-space:nowrap}
.jmpow img{height:12px;width:auto;filter:brightness(0);opacity:.55}
body.jm-world header nav.jmnav{font-family:"Exo 2",system-ui,sans-serif;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
body.jm-world .jmnav a{color:#4A3F5E}
body.jm-world .jmnav a.on{color:#C2187F;box-shadow:inset 0 -2px 0 #FF3DBD}
body.jm-world .cartbtn{font-family:"Exo 2",system-ui,sans-serif;font-weight:600;letter-spacing:.06em;color:#1E1630}
@media (hover:hover) and (pointer:fine){body.jm-world .jmnav a:hover,.jmpow:hover{color:#1E1630}}
@media (max-width:560px){.jmlogo img{height:36px}.jmpow{font-size:9px}.jmpow img{height:10px}body.jm-world header nav.jmnav{font-size:13px}}
body.jm-world footer .jmfl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:14px}
body.jm-world footer .flogo{display:none!important}
body.jm-world footer .fr a[href="#/about"]{display:none}
body.jm-world footer{font-family:"Exo 2",system-ui,sans-serif}
/* her item pages in her type + colours */
body.jm-prod #view{background:transparent}
.st1 body.jm-world .info h1,body.jm-world .info h1{font-family:"Exo 2",system-ui,sans-serif;font-style:italic;font-weight:800;text-transform:none;letter-spacing:-.01em;color:#1E1630;text-shadow:none;font-size:clamp(30px,3.4vw,44px);line-height:1.04}
body.jm-world .info .price{font-family:"Exo 2",system-ui,sans-serif;font-weight:600}
body.jm-world .gallery .main{background:rgba(255,255,255,.55)}
body.jm-world .mback{background:rgba(255,255,255,.55);border-color:rgba(30,22,48,.12);color:#1E1630;font-family:"Exo 2",system-ui,sans-serif;font-weight:600}
body.jm-world .mdes a{font-family:"Exo 2",system-ui,sans-serif;font-style:italic;font-weight:600;font-size:15px;border-color:rgba(30,22,48,.14);background:rgba(255,255,255,.65);color:#1E1630}
body.jm-world .mdes a.on{background:linear-gradient(90deg,#FF3DBD,#8A4DFF);border-color:transparent;color:#fff}
body.jm-world .chip{background:rgba(255,255,255,.65);border-color:rgba(30,22,48,.14);color:#1E1630;font-family:"Exo 2",system-ui,sans-serif;font-weight:600}
.st1 body.jm-world .chip.on,body.jm-world .chip.on{background:#1E1630;border-color:#1E1630;color:#fff}
.st1 body.jm-world .btn,body.jm-world .btn{background:linear-gradient(90deg,#FF3DBD,#8A4DFF);color:#fff;border:0;font-family:"Exo 2",system-ui,sans-serif;font-weight:700;letter-spacing:.02em}
body.jm-world .qty{background:rgba(255,255,255,.6);border-color:rgba(30,22,48,.14)}
body.jm-world .specs summary{font-family:"Exo 2",system-ui,sans-serif}
body.jm-world .more h2{font-family:Yellowtail,cursive;font-weight:400;text-transform:none;color:#FF3DBD;text-shadow:3px 3px 0 #fff;letter-spacing:0}
body.jm-world .jmbrand{flex-direction:row;align-items:center;gap:14px}.jmlogo img{height:38px}.jmpow{margin-top:0;padding-top:12px}   /* name + "powered by" side by side so the bar keeps its height */
/* Oct 17 night (JC: "4 tee por línea ... zoom cuando pasamos el mouse ... animaciones para darle vida"), animation choices per purpose:
   name entrance + one chrome sheen (rare: once a visit), section titles rise in on scroll (orientation), cards cascade (store reveal),
   piece lifts on hover (feedback, gated to mouse), magnifier to read the print (function), press feedback. Reduced motion: fades only. */
body.jm-shop[data-jmtiles=e] .msec-tee .grid{grid-template-columns:repeat(4,1fr);gap:36px 24px}
@media (max-width:980px){body.jm-shop[data-jmtiles=e] .msec-tee .grid{grid-template-columns:repeat(2,1fr)}}
.jmwmwrap{position:relative;display:inline-block;width:min(100%,560px);line-height:0}
.jmwmwrap .jmwm{width:100%;animation:jmRise .8s cubic-bezier(.23,1,.32,1) both}
.jmsheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%) no-repeat;background-size:260% 100%;background-position:130% 0;
  -webkit-mask:url(/img/jm/wordmark.png?v=1) center/contain no-repeat;mask:url(/img/jm/wordmark.png?v=1) center/contain no-repeat;animation:jmSheen 1.4s .55s cubic-bezier(.77,0,.175,1) both}
@media (hover:hover) and (pointer:fine){.jmwmwrap:hover .jmsheen{animation:jmSheen2 1.1s cubic-bezier(.77,0,.175,1) both}}
@keyframes jmRise{from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes jmSheen{from{background-position:130% 0}to{background-position:-30% 0}}
@keyframes jmSheen2{from{background-position:130% 0}to{background-position:-30% 0}}
body.jm-anim .jmsecs .gsub{opacity:0;transform:translateY(12px) rotate(-2deg);transition:opacity .5s ease-out,transform .6s cubic-bezier(.23,1,.32,1)}
body.jm-anim .jmsecs .gsub.in{opacity:1;transform:none}
body.jm-shop .jmsecs .card .ph img.a,body.jm-shop .jmsecs .card .ph img.w{transition:transform .28s cubic-bezier(.23,1,.32,1),filter .28s ease}
@media (hover:hover) and (pointer:fine){
  body.jm-shop .jmsecs .card:hover .ph img.a,body.jm-shop .jmsecs .card:hover .ph img.w{transform:translateY(-6px);filter:drop-shadow(0 26px 22px rgba(70,30,100,.32))}}
body.jm-shop .jmsecs .card{transition:transform .14s ease-out}
body.jm-shop .jmsecs .card:active{transform:scale(.98)}
/* the magnifier: a round lens with her pink + cyan rim, follows the pointer with a short ease so it feels attached but not jittery */
.jmlens{position:absolute;left:0;top:0;z-index:4;width:170px;height:170px;border-radius:50%;pointer-events:none;background-repeat:no-repeat;background-color:#F4EEFA;
  box-shadow:0 0 0 3px #fff,0 0 0 6px #FF3DBD,0 0 0 8px #35E2FF,0 18px 30px -10px rgba(30,22,48,.45);opacity:0;scale:.9;
  transition:opacity .18s ease-out,scale .2s cubic-bezier(.23,1,.32,1),transform .09s ease-out}
.jmlens.on{opacity:1;scale:1}
body.jm-shop .jmsecs .card .ph{overflow:visible}
.st1 body.jm-world .btn:active,body.jm-world .btn:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.jmwmwrap .jmwm{animation:jmFade .4s ease both}.jmsheen{display:none}
  body.jm-anim .jmsecs .gsub{transform:none}body.jm-shop .jmsecs .card:hover .ph img.a{transform:none}.jmlens{transition:opacity .15s ease}}
@keyframes jmFade{from{opacity:0}to{opacity:1}}
.jmpow b{font-weight:700;color:#4A3F5E;letter-spacing:.1em}   /* the P4TP name as text: the tiny logo read as a grey blob */
/* Oct 17 night (JC: changing the phrase reloaded the page and wasn't smooth): the old shirt fades + softly blurs out over the new one */
.jmghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;pointer-events:none;opacity:1;transition:opacity .32s ease-out,filter .32s ease-out}
.jmghost.out{opacity:0;filter:blur(3px)}
@media (prefers-reduced-motion:reduce){.jmghost{transition:opacity .2s ease}.jmghost.out{filter:none}}
/* Oct 17 night: her landing = an illustrated shop wall (after JC's Champion "work shop" reference), flat + outlined, in her pastel chrome */
.jwall{position:relative;width:100%;max-width:1240px;margin:8px auto 0;aspect-ratio:1200/760;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#F3EEFC 0%,#ECE4FA 70%,#E6DCF7 100%);box-shadow:inset 0 0 0 3px #3B3350,0 30px 50px -34px rgba(30,22,48,.5)}
.jwall>*{position:absolute}
.jwpeg-bg{inset:9% 0 6% 0;background:radial-gradient(circle,#C8B9E4 0 1.6px,transparent 2.2px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(59,51,80,.07) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(rgba(59,51,80,.07) 1px,transparent 1px) 0 0/44px 44px}
.jwpost{top:4%;bottom:6%;width:1.1%;background:linear-gradient(90deg,#5E5872,#9E98B2 45%,#4A4560);box-shadow:inset 0 0 0 2px #3B3350;border-radius:3px}
.jwtrack{left:0;right:0;top:2.2%;height:1.4%;background:#3B3350;border-radius:2px}
.jwspot{top:3.4%;width:2.6%;aspect-ratio:1/1.2;margin-left:-1.3%;background:linear-gradient(180deg,#4A4560,#2A2438);border-radius:4px 4px 40% 40%;box-shadow:inset 0 0 0 2px #3B3350}
.jwcone{top:6%;width:18%;height:62%;background:radial-gradient(60% 55% at 50% 0%,rgba(255,244,214,.55),rgba(255,244,214,0) 72%);pointer-events:none;mix-blend-mode:screen}
.jwplaque{aspect-ratio:22/16;display:grid;place-items:center;padding:4% 7%;border-radius:10px;box-shadow:inset 0 0 0 3px #3B3350,0 10px 18px -12px rgba(30,22,48,.5);
  background:repeating-linear-gradient(94deg,rgba(120,80,40,.07) 0 3px,transparent 3px 14px),linear-gradient(180deg,#E8CDA2,#CFA372)}
.jwplaque img{width:100%;height:auto}
.jwboard{border-radius:10px;box-shadow:inset 0 0 0 3px #3B3350,0 14px 22px -16px rgba(30,22,48,.55);
  background:repeating-linear-gradient(92deg,rgba(120,80,40,.08) 0 3px,transparent 3px 16px),linear-gradient(180deg,#EBD3AC,#D3A978)}
.jwrail{height:1.1%;background:linear-gradient(180deg,#D9D6E3,#8E89A3);border-radius:4px;box-shadow:0 0 0 2px #3B3350}
.jwcab{border-radius:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:6%;padding:5% 5% 6%;box-shadow:inset 0 0 0 3px #3B3350,0 16px 24px -18px rgba(30,22,48,.6);
  background:repeating-linear-gradient(92deg,rgba(120,80,40,.08) 0 3px,transparent 3px 16px),linear-gradient(180deg,#E3C394,#C9965F)}
.jwcab i{border-radius:5px;box-shadow:inset 0 0 0 2px #3B3350;background:linear-gradient(180deg,#E9CDA3,#D2A574);position:relative}
.jwcab i::after{content:"";position:absolute;left:38%;right:38%;top:44%;height:14%;border-radius:4px;background:#3B3350}
.jwfloor{left:0;right:0;bottom:0;height:6%;background:linear-gradient(90deg,rgba(59,51,80,.12) 1px,transparent 1px) 0 0/60px 100%,#DCD2EE;box-shadow:inset 0 3px 0 #3B3350}
/* framed prints of her designs */
.jwp{display:block;padding:1.1%;aspect-ratio:1/1;background:#FFFFFF;border-radius:4px;box-shadow:0 0 0 3px #3B3350,0 0 0 9px #E8CDA2,0 0 0 12px #3B3350,0 16px 22px -14px rgba(30,22,48,.5);display:grid;place-items:center;transition:transform .25s cubic-bezier(.23,1,.32,1)}
.jwp img{width:84%;height:auto}
/* tees on hangers + mugs */
.jwt,.jwm{display:block;z-index:2;text-decoration:none;color:#1E1630}
.jwt img,.jwm img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 12px rgba(30,22,48,.28))}
.jwt .jwh{position:absolute;left:22%;width:56%;top:-11%;z-index:1}
.jwt{transform-origin:50% -9%}
.jwtag{position:absolute;left:50%;bottom:4%;z-index:3;display:grid;justify-items:center;gap:1px;padding:5px 10px 6px;border-radius:8px;background:#fff;box-shadow:0 0 0 2px #3B3350,0 8px 14px -8px rgba(30,22,48,.5);
  font-family:"Exo 2",system-ui,sans-serif;white-space:nowrap;opacity:0;transform:translate(-50%,6px) scale(.96);transition:opacity .18s ease-out,transform .22s cubic-bezier(.23,1,.32,1);pointer-events:none}
.jwtag b{font-style:italic;font-weight:700;font-size:13px}.jwtag i{font-style:normal;font-weight:600;font-size:12px;color:#C2187F}
.jws{z-index:2}.jws svg{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 10px rgba(30,22,48,.22))}
.jwhood .jwh{position:absolute;left:24%;width:52%;top:-12%}
.jwpeg{position:absolute;left:46%;top:-9%;width:8%;aspect-ratio:1;border-radius:50%;background:#8E89A3;box-shadow:0 0 0 2px #3B3350}
.jwsoon{position:absolute;right:-6%;top:6%;padding:3px 9px;border-radius:999px;background:#FF3DBD;color:#fff;font-family:"Exo 2",system-ui,sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;transform:rotate(8deg);box-shadow:0 0 0 2px #3B3350}
@media (hover:hover) and (pointer:fine){
  .jwt:hover{animation:jwSwing 1.1s cubic-bezier(.36,.07,.19,.97)}
  .jwt:hover img,.jwm:hover img{filter:drop-shadow(0 22px 18px rgba(30,22,48,.38))}
  .jwt:hover .jwtag,.jwm:hover .jwtag{opacity:1;transform:translate(-50%,0) scale(1)}
  .jwm{transition:transform .25s cubic-bezier(.23,1,.32,1)}.jwm:hover{transform:translateY(-6px)}
  .jwp:hover{transform:rotate(-1.5deg) scale(1.03)}
  .jws:hover{animation:jwSwing 1.1s cubic-bezier(.36,.07,.19,.97)}.jws{transform-origin:50% -10%}}
.jwt:active,.jwm:active{scale:.98}
@keyframes jwSwing{0%{transform:rotate(0)}22%{transform:rotate(3.2deg)}48%{transform:rotate(-2.2deg)}72%{transform:rotate(1.1deg)}100%{transform:rotate(0)}}
.jwall .jmlens{width:150px;height:150px}
@media (prefers-reduced-motion:reduce){.jwt:hover,.jws:hover{animation:none}.jwm:hover{transform:none}}
.jwplaque{aspect-ratio:23/11.5;padding:2.5% 8%}
.jwcab{padding:5% 5%;gap:9% 5%}
.jwcab i{min-height:0}
.jwhood .jwh{top:-10%}
.jwcab{align-content:stretch}.jwcab i{display:block;height:auto;align-self:stretch}   /* drawers fill their rows */
.jwcab{padding:clamp(4px,1vw,12px) clamp(5px,1.2vw,14px);gap:clamp(3px,.7vw,9px) clamp(4px,.8vw,10px)}   /* % padding on an absolute box = % of the whole wall: use real sizes */
/* Oct 17 late night: her landing = a photoreal store (backdrop B3) with her pieces placed in it; hover = small, click = centre stage */
.jstore{position:relative;width:100%;max-width:1320px;margin:10px auto 0;aspect-ratio:1920/1086;border-radius:16px;overflow:hidden;container-type:inline-size;
  box-shadow:0 40px 70px -40px rgba(20,14,30,.7)}
.jstore>*{position:absolute}
.jsbg{inset:0;width:100%;height:100%;object-fit:cover}
/* the neon: a pink tube script with a white-hot core, and its light spilling on the wall */
.jsglow{left:28%;top:6%;width:44%;height:30%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,61,189,.34),rgba(255,61,189,.12) 45%,transparent 72%);mix-blend-mode:screen;pointer-events:none}
.jsneon{left:0;right:0;top:13.5%;text-align:center;font-family:Yellowtail,cursive;font-size:7.4cqw;line-height:1;color:#FFE6F6;
  text-shadow:0 0 .02em #fff,0 0 .06em #FF7AD0,0 0 .14em #FF3DBD,0 0 .32em #FF3DBD,0 0 .6em rgba(255,61,189,.6);transform:rotate(-4deg);pointer-events:none}
/* framed prints: her designs on a dark mount inside the photo's frames */
.jsf{display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 20%,#2A2730,#151318);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);transition:filter .25s ease}
.jsf img{width:80%;height:auto;filter:brightness(.92) drop-shadow(0 0 6px rgba(255,61,189,.25))}
/* pieces: dimmed + toned to the room's warm low light, shaded darker toward the bottom (mask = the piece itself) */
.jss{display:block;z-index:2;transform-origin:50% 0;transition:transform .22s cubic-bezier(.23,1,.32,1);cursor:pointer}
.jsi{position:relative;display:block}
.jsi img{display:block;width:100%;height:auto;filter:brightness(.8) contrast(1.06) saturate(.92) drop-shadow(0 14px 16px rgba(0,0,0,.55))}
.jsi::after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  background:linear-gradient(180deg,rgba(255,214,160,.16) 0%,rgba(0,0,0,0) 35%,rgba(10,6,12,.38) 100%);mix-blend-mode:soft-light}
.jst .jwh{position:absolute;left:24%;width:52%;top:-6%;z-index:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.jst .jwh path{stroke:#1A1820}
.jst .jsi{margin-top:7%}
.jspro{position:absolute;right:-4%;top:12%;padding:.25em .7em;border-radius:999px;background:#FF3DBD;color:#fff;font:700 .85cqw/1.2 "Exo 2",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;transform:rotate(8deg);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.jsc .jspro{top:-18%}
.jss.away{opacity:0}
@media (hover:hover) and (pointer:fine){.jst:hover,.jsh:hover{transform:rotate(1.6deg) translateY(-2px)}.jsm:hover,.jsc:hover{transform:translateY(-4px)}.jsf:hover{filter:brightness(1.15)}}
/* centre stage */
.jmfocus{position:fixed;inset:0;z-index:60;background:rgba(14,10,20,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .3s ease,backdrop-filter .3s ease}
.jmfocus.on{background:rgba(14,10,20,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.jmfimg{position:fixed;z-index:61;object-fit:contain;transform-origin:0 0;filter:drop-shadow(0 40px 40px rgba(0,0,0,.55));cursor:zoom-out}
.jmfcap{position:absolute;left:calc(50% + 190px);top:50%;transform:translate(0,-50%) translateY(10px);opacity:0;transition:opacity .25s .2s ease-out,transform .35s .2s cubic-bezier(.23,1,.32,1);
  color:#fff;font-family:"Exo 2",system-ui,sans-serif;display:grid;gap:6px;max-width:300px}
.jmfocus.on .jmfcap{opacity:1;transform:translate(0,-50%)}
.jmfcap b{font-style:italic;font-weight:800;font-size:34px;line-height:1.05}
.jmfcap span{font-size:15px;color:#D9CDEA}
.jmfcap i{font-style:normal;font-weight:700;font-size:22px;color:#FF7AD0}
.jmfbtn{display:flex;gap:10px;align-items:center;margin-top:12px}
.jmfbtn .btn{flex:none;height:46px;padding:0 26px;background:linear-gradient(90deg,#FF3DBD,#8A4DFF);color:#fff;border:0;border-radius:99px;font-family:"Exo 2",system-ui,sans-serif;font-weight:700}
.jmfbtn .btn:active{transform:scale(.97)}
.jmfsoon{padding:10px 18px;border-radius:99px;background:rgba(255,255,255,.12);font-weight:600}
.jmfx{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer}
@media (max-width:900px){.jmfcap{left:50%;top:auto;bottom:8%;transform:translate(-50%,10px);text-align:center;justify-items:center}.jmfocus.on .jmfcap{transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.jss{transition:none}.jmfcap{transition:opacity .2s ease}}
.jsi img{filter:brightness(.74) contrast(1.08) saturate(.9) sepia(.06) drop-shadow(0 14px 16px rgba(0,0,0,.6))}   /* sit in the room's low warm light */
.jsc .jspro{top:auto;bottom:4%;right:-38%}
/* Oct 18 2026 (JC: Jemma's line goes with style C "grande y bold", keeping his one-page step-by-step flow): white page, Inter Tight
   900 huge lowercase, black ink, one pink word (#FF3DA5). Replaces style B (dark mono; backup v1-backup/before_jemma_C_oct18).
   Covers all of her pages (body.jm-world); the flow itself lives under body.jm-flow. */
@font-face{font-family:"Inter Tight";src:url(/fonts/InterTight-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
body.jm-world{--jbg:#FFFFFF;--jink:#111111;--jmut:#8A8A8A;--jline:#E6E6E6;--jtile:#F4F4F4;--jpink:#FF3DA5;
  --mono:"Inter Tight",system-ui,sans-serif;--hdr:rgba(255,255,255,.92);--line:#E6E6E6;--ink:#111111;--muted:#8A8A8A;background:#fff!important;color:#111}
body.jm-world #view{font-family:"Inter Tight",system-ui,sans-serif;background:transparent!important;color:#111;--ink:#111111;--muted:#8A8A8A;--line:#E6E6E6}
body.jm-world header{border-bottom-color:#E6E6E6}
.cur{display:none}
.jmtxt{font-family:"Inter Tight",system-ui,sans-serif;font-weight:900;font-size:22px;letter-spacing:-.05em;color:#111;line-height:1}
body.jm-world .jmlogo img{display:none}
body.jm-world .jmpow,body.jm-world .jmpow b{color:#8A8A8A;font-family:"Inter Tight",system-ui,sans-serif;font-weight:500;letter-spacing:0;text-transform:none}
body.jm-world .jmbrand{flex-direction:row;align-items:center;gap:14px}.jmpow{padding-top:0}
body.jm-world header nav.jmnav{font-family:"Inter Tight",system-ui,sans-serif;font-weight:700;text-transform:lowercase;letter-spacing:-.02em}
body.jm-world .jmnav a{color:#8A8A8A}body.jm-world .jmnav a.on{color:#111;box-shadow:inset 0 -2px 0 #FF3DA5}
body.jm-world .cartbtn{font-family:"Inter Tight",system-ui,sans-serif;font-weight:700;color:#111;text-transform:lowercase}
body.jm-world .cartbtn .badge{background:#111;color:#fff}body.jm-world .cartbtn .badge.full{background:#FF3DA5;color:#fff}
body.jm-world footer{background:#fff;color:#8A8A8A;border-top:1px solid #E6E6E6;font-family:"Inter Tight",system-ui,sans-serif}
body.jm-world footer a{color:#111}
body.jm-flow .jmnav{display:none!important}
/* the flow */
.jf{max-width:1180px;margin:0 auto;padding:0 32px 96px}
.jftrail{position:sticky;top:var(--hh,60px);z-index:5;display:none;gap:6px;padding:12px 0;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:14px;font-weight:500;color:#8A8A8A;border-bottom:1px solid #E6E6E6}
.jftrail.on{display:flex;flex-wrap:wrap;align-items:baseline}
.jftrail a{color:#8A8A8A;text-decoration:none}.jftrail a:last-child{color:#111;font-weight:700}.jftrail em{font-style:normal;color:#FF3DA5}
@media (hover:hover) and (pointer:fine){.jftrail a:hover{color:#111}}
.jfs{padding:64px 0;border-bottom:1px solid #E6E6E6}
.jfin{animation:jfIn .55s cubic-bezier(.23,1,.32,1) both}
@keyframes jfIn{from{opacity:0;transform:translateY(16px)}}
.jfq{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8A8A8A;margin:0 0 24px}
/* step 1: the options are giant words */
.jfopts{display:flex;flex-wrap:wrap;align-items:baseline;gap:.06em .62em;font-size:clamp(64px,10.5vw,148px)}
.jfo{position:relative;background:none;border:0;padding:0;margin:0;font:inherit;font-family:"Inter Tight",system-ui,sans-serif;font-weight:900;letter-spacing:-.065em;line-height:.98;color:#111;cursor:pointer;transition:color .18s ease,transform .25s cubic-bezier(.23,1,.32,1)}
.jfo .n{display:inline}.jfo i{position:absolute;left:calc(100% + .08em);top:.06em;font-style:normal;font-size:max(13px,.105em);font-weight:600;letter-spacing:0;color:#8A8A8A;white-space:nowrap}
.jfo.soon{color:#D4D4D4;cursor:default}.jfo.on{color:#FF3DA5}
.jfopts:has(.jfo.on) .jfo:not(.on):not(.soon){color:#111}
@media (hover:hover) and (pointer:fine){.jfo:not(.soon):not(.on):hover{transform:translateY(-.04em)}.jfo:not(.soon):not(.on):hover .n{box-shadow:inset 0 -.06em 0 #FF3DA5}}
.jfo:not(.soon):active{transform:scale(.98)}
.jfo.nope{animation:jfNope .35s ease}
@keyframes jfNope{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* step 2: designs */
.jfds{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.jfd{position:relative;display:block;text-align:left;background:none;border:0;padding:0;color:#111;font:inherit;cursor:pointer}
.jfd .ph{display:grid;place-items:center;aspect-ratio:1;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s ease}
.jfd .ph img{width:100%;height:100%;object-fit:contain;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.jfd .n{display:flex;gap:10px;margin-top:12px;font-weight:700;font-size:16px;letter-spacing:-.02em;line-height:1.3}
.jfd .n i{margin-left:auto;font-style:normal;font-weight:500;font-size:14px;color:#8A8A8A;white-space:nowrap}
.jfd.on .ph{box-shadow:inset 0 0 0 2px #FF3DA5}.jfd.on .n b{color:#FF3DA5}
@media (hover:hover) and (pointer:fine){.jfd:hover .ph img{transform:translateY(-4px) scale(1.02)}}
.jfd:active{transform:scale(.98)}
/* step 3: colour + size */
.jfc{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.jfimg{background:#fff;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.jfimg img{width:100%;height:100%;object-fit:contain;transition:opacity .2s ease}.jfimg img.swap{opacity:.25}
.jfp{font-family:"Inter Tight",system-ui,sans-serif;font-weight:900;font-size:clamp(40px,4.6vw,64px);line-height:.95;letter-spacing:-.06em;word-spacing:.12em;color:#111;margin:0 0 16px}
.jfp .pk,.jfd .n .pk{color:#FF3DA5}
.jfpr{font-size:20px;font-weight:600;color:#111;margin:0 0 28px}
.jfl{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8A8A8A;margin:20px 0 10px}.jfl b{color:#111;font-weight:700}
.jfcols{display:flex;gap:12px}.jfcol{width:40px;height:40px;border-radius:50%;background:var(--c);border:0;box-shadow:inset 0 0 0 1px #D4D4D4;cursor:pointer}
.jfcol.on{box-shadow:inset 0 0 0 1px #D4D4D4,0 0 0 3px #fff,0 0 0 5px #FF3DA5}
.jfsz{display:flex;gap:8px;flex-wrap:wrap}.jfsz button{min-width:50px;height:42px;padding:0 12px;background:#fff;border:1px solid #D4D4D4;color:#111;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.jfsz button.on{border-color:#111;background:#111;color:#fff}
.jfadd{margin-top:32px;width:100%;height:58px;border:0;background:#111;color:#fff;font:inherit;font-weight:800;font-size:17px;letter-spacing:-.01em;text-transform:lowercase;cursor:pointer;transition:transform .14s ease-out,background .2s ease}
@media (hover:hover) and (pointer:fine){.jfadd:hover{background:#FF3DA5}}
.jfadd:active{transform:scale(.98)}.jfadd.done{background:#FF3DA5;color:#fff}
.jfadded{margin-top:14px;font-size:15px;font-weight:500;color:#8A8A8A}.jfadded button{margin-left:10px;background:none;border:0;color:#FF3DA5;font:inherit;font-weight:800;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
/* step 4: checkout = the store's own cart, on white */
.jfco .page{padding:0;max-width:none}.jfco .page>.path,.jfco .page>h1{display:none}
.jfco .line{border-color:#E6E6E6}.jfco .line .t,.jfco .sum,.jfco .tot,.jfco .sum span,.jfco .tot span{color:#111}.jfco .line .o,.jfco .pnote,.jfco .note{color:#8A8A8A}
.jfco .line .ph{background:#fff}
.jfco .optin,.jfco .optin span{color:#555}
.jfco #pay{max-width:460px;margin-top:20px}
.jfempty{color:#8A8A8A;font-size:15px}
/* buttons on her pages: black, pink on hover (the old pastel gradient is gone with the chrome look) */
.st1 body.jm-world .btn,body.jm-world .btn{background:#111;color:#fff;border:0;font-family:"Inter Tight",system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;text-transform:lowercase}
@media (hover:hover) and (pointer:fine){body.jm-world .btn:hover{background:#FF3DA5}}
body.jm-world .mdes a.on{background:#111;border-color:#111;color:#fff}
/* Oct 18 (JC: "that banner still there"): the Practice Room member banner promises 10% off, but member codes don't cover Jemma's line or
   Music Tea (MEMBER_SKIP), so it stays off their pages; it comes back on the gift shop pages. */
body.jm-world #mbar,body.mt-shop #mbar{display:none!important}
/* Oct 18 2026 (JC picked E3 "sticker book"): Jemma's page = pink band + one pocket per item with a die-cut sticker; click = the sticker
   glides to the middle next to colour / size / add to cart (jemmaStick + jsOpen in app.js). Bagel Fat One for her name + labels. */
body.jm-stick{background:#FFF7FB!important}
body.jm-stick header{background:#FF3DA5;border-bottom:0}
body.jm-stick header .jmtxt,body.jm-stick .jmpow,body.jm-stick .jmpow b{color:#fff}
body.jm-stick header .jmtxt{font-family:Bagel,"Inter Tight",sans-serif;font-weight:400;letter-spacing:0}
body.jm-stick .jmnav{display:none!important}
body.jm-stick .cartbtn{background:#1A0D14;color:#fff;border-radius:99px;padding:8px 16px}
body.jm-stick .cartbtn .badge{background:#fff;color:#1A0D14}body.jm-stick .cartbtn .badge.full{background:#FFE34D;color:#1A0D14}
.jsw{max-width:1328px;margin:0 auto;padding:0 32px;position:relative}
.jsband{background:#FF3DA5;color:#fff;padding:26px 0 46px}
.jslogo{font-family:Bagel,"Inter Tight",sans-serif;font-weight:400;font-size:clamp(54px,7vw,92px);line-height:1;letter-spacing:0;color:#fff;margin:0}
.jslogo i{font-style:normal;color:#1A0D14}
.jssub{font-weight:700;font-size:17px;margin:10px 0 18px;color:#fff}
.jschips{display:flex;gap:8px}.jschips a{font-weight:800;font-size:15px;color:#fff;text-decoration:none;background:rgba(255,255,255,.22);padding:8px 18px;border-radius:99px;transition:background .15s ease,transform .15s ease}
.jschips a.on{background:#fff;color:#1A0D14}
@media (hover:hover) and (pointer:fine){.jschips a:not(.on):hover{background:rgba(255,255,255,.36)}}
.jschips a:active{transform:scale(.97)}
.jsdec{position:absolute;font-family:Bagel,sans-serif;display:grid;place-items:center;border-radius:50%;box-shadow:0 0 0 6px #fff;filter:drop-shadow(0 6px 10px rgba(26,13,20,.22));pointer-events:none}
.jsdec.d1{right:60px;top:40px;width:124px;height:124px;background:#FFE34D;color:#1A0D14;font-size:42px;transform:rotate(12deg)}
.jsdec.d2{right:210px;top:6px;width:84px;height:84px;background:#fff;color:#FF3DA5;font-size:46px;transform:rotate(-10deg)}
.jsgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:-6px;padding-top:40px;padding-bottom:90px}
.jsp{position:relative;display:flex;flex-direction:column;align-items:center;background:#fff;border:2px dashed #F6C3DE;border-radius:26px;padding:56px 14px 20px;cursor:pointer;font:inherit;color:#1A0D14;
  box-shadow:0 12px 30px rgba(255,61,165,.12);transition:box-shadow .2s ease,transform .16s ease-out}
.jsst{display:block;width:100%;transform:rotate(var(--r,0deg));transition:transform .3s cubic-bezier(.23,1,.32,1);filter:drop-shadow(0 6px 0 rgba(26,13,20,.16)) drop-shadow(0 12px 16px rgba(26,13,20,.16))}
.jsst img{display:block;width:100%;height:auto}
.jsnm{font-family:Bagel,sans-serif;font-size:19px;line-height:1.05;background:#fff;padding:9px 14px;border-radius:14px;box-shadow:0 0 0 3px #1A0D14;margin:22px 0 18px;white-space:nowrap}
.jspr{position:absolute;right:-12px;top:-14px;font-family:Bagel,sans-serif;font-size:22px;background:#FFE34D;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 4px #fff,0 0 0 7px #1A0D14;transform:rotate(12deg)}
.jsgo{align-self:stretch;margin-right:40px;height:46px;border-radius:99px;background:#1A0D14;color:#fff;font-weight:800;font-size:15px;display:grid;place-items:center;transition:background .15s ease}
.jspeel{position:absolute;right:-2px;bottom:-2px;width:46px;height:46px;background:linear-gradient(135deg,#fff 50%,#F3D5E5 50%);border-radius:0 0 26px 0;transition:width .2s ease,height .2s ease}
@media (hover:hover) and (pointer:fine){.jsp:hover .jsst{transform:rotate(0deg) translateY(-6px)}.jsp:hover .jsgo{background:#FF3DA5}.jsp:hover .jspeel{width:58px;height:58px}}
.jsp:active{transform:scale(.98)}
.jsp.away .jsst{opacity:0}
/* the item, brought forward */
.jsov{position:fixed;inset:0;z-index:60;background:rgba(255,247,251,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s ease}
.jsov.on{opacity:1}
.jsbig{position:fixed;z-index:61;transform-origin:0 0;cursor:pointer;filter:drop-shadow(0 10px 0 rgba(26,13,20,.16)) drop-shadow(0 24px 30px rgba(26,13,20,.2));transition:opacity .2s ease}
.jsbig.swap{opacity:.35}
.jspanel{position:absolute;left:calc(50% + 24px);top:50%;transform:translateY(-50%);width:min(420px,42vw);color:#1A0D14}
.jspanel h2{font-family:Bagel,sans-serif;font-weight:400;font-size:44px;line-height:1;margin:0 0 10px}
.jsprice{font-family:Bagel,sans-serif;font-size:26px;margin:0 0 22px;color:#FF3DA5}
.jsl{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A7C81;margin:18px 0 10px}.jsl b{color:#1A0D14}
.jscols{display:flex;gap:12px}.jscols button{width:44px;height:44px;border-radius:50%;background:var(--c);border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);cursor:pointer;transition:transform .15s ease}
.jscols button.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 0 0 3px #FFF7FB,0 0 0 6px #FF3DA5}
.jscols button:active{transform:scale(.94)}
.jssz{display:flex;gap:8px;flex-wrap:wrap}.jssz button{min-width:54px;height:46px;border-radius:14px;background:#fff;border:2px solid #1A0D14;font:inherit;font-weight:800;font-size:15px;color:#1A0D14;cursor:pointer}
.jssz button.on{background:#1A0D14;color:#fff}
.jsadd{margin-top:28px;width:100%;height:58px;border:0;border-radius:99px;background:#1A0D14;color:#fff;font:inherit;font-weight:800;font-size:17px;cursor:pointer;transition:background .15s ease,transform .14s ease-out}
@media (hover:hover) and (pointer:fine){.jsadd:hover{background:#FF3DA5}}
.jsadd:active{transform:scale(.98)}.jsadd.done{background:#FF3DA5}
.jsdone{margin-top:14px;font-weight:700;font-size:15px}.jsdone a{color:#FF3DA5;margin-left:8px}
.jsx{position:absolute;right:28px;top:24px;width:48px;height:48px;border-radius:50%;border:0;background:#1A0D14;color:#fff;font-size:18px;cursor:pointer}
body.js-open{overflow:hidden}
@media (max-width:1100px){.jsgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.jsgrid{grid-template-columns:repeat(2,1fr);gap:16px}.jsdec{display:none}.jsnm{font-size:15px;white-space:normal;text-align:center}
  .jspanel{left:24px;right:24px;width:auto;top:auto;bottom:24px;transform:none}.jspanel h2{font-size:32px}}
@media (prefers-reduced-motion:reduce){.jsst,.jsp,.jsov{transition:none}}
.jsdone .jsco{background:none;border:0;font:inherit;font-weight:800;font-size:16px;color:#FF3DA5;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:0}
/* Oct 18 (JC): top-left = "jemma heigis merch store" + powered by; the line under her big name = "merch store" */
.jmms{font-family:"Inter Tight",system-ui,sans-serif;font-weight:800;letter-spacing:-.01em;font-size:.82em}
body.jm-stick .jmbrand{gap:16px}
.jssub{font-size:20px;letter-spacing:.02em}
/* Oct 18: her top-left logo lockup "jemma heigis" + "merch store" (body[data-jl] a/b/c, JM_LOGO in app.js) */
body.jm-stick .jmtxt{display:inline-flex;align-items:center;position:relative;line-height:1}
body.jm-stick .jmn{font-family:Bagel,"Inter Tight",sans-serif;font-weight:400;font-size:24px;color:#fff;letter-spacing:0}
body.jm-stick .jmn i{font-style:normal}
body.jm-stick .jmms{font-family:"Inter Tight",system-ui,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:10px}
/* a: one die-cut sticker badge, slight tilt */
body.jm-stick[data-jl="a"] .jmtxt{background:#fff;border-radius:16px;padding:7px 14px 8px;box-shadow:0 0 0 3px #1A0D14,3px 4px 0 3px rgba(26,13,20,.25);transform:rotate(-2deg);flex-direction:column;align-items:flex-start;gap:3px}
body.jm-stick[data-jl="a"] .jmn{color:#1A0D14;font-size:23px}body.jm-stick[data-jl="a"] .jmn i{color:#FF3DA5}
body.jm-stick[data-jl="a"] .jmms{color:#1A0D14;font-size:9.5px;letter-spacing:.22em}
/* b: stacked name + black tab underneath */
body.jm-stick[data-jl="b"] .jmtxt{flex-direction:column;align-items:flex-start;gap:4px}
body.jm-stick[data-jl="b"] .jmn{font-size:26px}body.jm-stick[data-jl="b"] .jmn i{color:#1A0D14}
body.jm-stick[data-jl="b"] .jmms{background:#1A0D14;color:#fff;padding:4px 8px 4px 10px;border-radius:6px;transform:rotate(-1.5deg)}
/* c: name + a yellow round seal stuck on the corner */
body.jm-stick[data-jl="c"] .jmtxt{padding-right:66px}
body.jm-stick[data-jl="c"] .jmn{font-size:28px}body.jm-stick[data-jl="c"] .jmn i{color:#1A0D14}
body.jm-stick[data-jl="c"] .jmms{position:absolute;right:-4px;top:50%;width:54px;height:54px;margin-top:-30px;border-radius:50%;background:#FFE34D;color:#1A0D14;display:grid;place-items:center;text-align:center;font-size:8.5px;line-height:1.15;letter-spacing:.08em;padding:0 6px;box-shadow:0 0 0 3px #fff,0 0 0 5px #1A0D14;transform:rotate(14deg)}
/* footer is white: same lockup B in dark ink */
body.jm-stick footer .jmn{color:#1A0D14}body.jm-stick footer .jmn i{color:#FF3DA5}
body.jm-stick footer .jmpow,body.jm-stick footer .jmpow b{color:#8A7C81}
/* Oct 18: gradient options behind the top bar + band (body[data-jband], JM_BAND). One background on the body, sized to bar + band (--bh). */
body.jm-stick:not([data-jband="p"]){background-repeat:no-repeat!important;background-size:100% var(--bh,330px)!important;background-color:#FFF7FB!important}
body.jm-stick:not([data-jband="p"]) header,body.jm-stick:not([data-jband="p"]) .jsband{background:transparent}
body.jm-stick[data-jband="a"]{background-image:linear-gradient(100deg,#FF3DA5 0%,#FF5E7E 45%,#FF9A4D 100%)!important}
body.jm-stick[data-jband="b"]{background-image:linear-gradient(110deg,#FF3DA5 0%,#C43DFF 55%,#6A3DFF 100%)!important}
body.jm-stick[data-jband="c"]{background-image:radial-gradient(60% 120% at 92% 0%,#FFB13D 0%,rgba(255,177,61,0) 60%),radial-gradient(55% 110% at 0% 100%,#9B4DFF 0%,rgba(155,77,255,0) 65%),linear-gradient(#FF3DA5,#FF3DA5)!important}
body.jm-stick[data-jband="d"]{background-image:linear-gradient(180deg,#FF3DA5 0%,#FF3DA5 30%,#FF8FCB 72%,#FFF7FB 100%)!important}
body.jm-stick[data-jband="d"] .jssub{color:#1A0D14}body.jm-stick[data-jband="d"] .jschips a:not(.on){background:rgba(26,13,20,.08);color:#1A0D14}body.jm-stick[data-jband="d"] .jschips a.on{background:#1A0D14;color:#fff}
/* Oct 18 (JC "more options with fade"): e-h = colour on top, melting into the page at the bottom of the band */
body.jm-stick[data-jband="e"]{background-image:linear-gradient(180deg,rgba(255,247,251,0) 38%,#FFF7FB 100%),linear-gradient(105deg,#FF3DA5 0%,#C43DFF 60%,#7A4DFF 100%)!important}
body.jm-stick[data-jband="f"]{background-image:linear-gradient(180deg,rgba(255,247,251,0) 38%,#FFF7FB 100%),linear-gradient(100deg,#FF3DA5 0%,#FF5E7E 50%,#FF9A4D 100%)!important}
body.jm-stick[data-jband="g"]{background-image:linear-gradient(180deg,rgba(255,247,251,0) 30%,#FFF7FB 100%),radial-gradient(55% 120% at 90% 0%,#FFB13D 0%,rgba(255,177,61,0) 60%),radial-gradient(50% 110% at 4% 10%,#A04DFF 0%,rgba(160,77,255,0) 62%),linear-gradient(#FF3DA5,#FF3DA5)!important}
body.jm-stick[data-jband="h"]{background-image:linear-gradient(180deg,#E0157F 0%,#FF3DA5 35%,#FF8FCB 70%,#FFF7FB 100%)!important}
body.jm-stick:is([data-jband="e"],[data-jband="f"],[data-jband="g"],[data-jband="h"]) .jssub{color:#1A0D14}
body.jm-stick:is([data-jband="e"],[data-jband="f"],[data-jband="g"],[data-jband="h"]) .jschips a:not(.on){background:rgba(26,13,20,.08);color:#1A0D14}
body.jm-stick:is([data-jband="e"],[data-jband="f"],[data-jband="g"],[data-jband="h"]) .jschips a.on{background:#1A0D14;color:#fff}
/* Oct 18 (JC: "needs better alligment"): the top bar uses the band's column so the logo, the big name, "merch store", the chips and the
   stickers all start on one left edge; a bit more air under the name */
body.jm-stick header .wrap,body.jm-stick footer .wrap{max-width:1328px;padding-left:32px;padding-right:32px}
body.jm-stick .jssub{margin-top:18px}
@media (max-width:560px){body.jm-stick header .wrap,body.jm-stick footer .wrap,.jsw{padding-left:16px;padding-right:16px}}
.jsst{aspect-ratio:1/1.03;display:flex;align-items:center;justify-content:center}.jsst img{max-height:100%;width:auto;max-width:100%}
/* Oct 18 (JC screenshot): the sticky top bar's blur + saturate made its strip of the gradient brighter than the band (a visible line at
   the bar's bottom). The bar now paints the very same gradient, sized to bar + band, with no blur: seamless at the top, and it keeps
   its own colour when the page scrolls under it. */
body.jm-stick[data-jband="g"] header{-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;background-color:#FF3DA5;background-repeat:no-repeat;background-size:100% var(--bh,330px);
  background-image:linear-gradient(180deg,rgba(255,247,251,0) 30%,#FFF7FB 100%),radial-gradient(55% 120% at 90% 0%,#FFB13D 0%,rgba(255,177,61,0) 60%),radial-gradient(50% 110% at 4% 10%,#A04DFF 0%,rgba(160,77,255,0) 62%),linear-gradient(#FF3DA5,#FF3DA5)}
/* Oct 18 (JC: "take this out", screenshot of the bar pinned over the stickers): on her page the top bar scrolls away with the page */
body.jm-stick header{position:relative}
/* Oct 18: her page has a section per kind (tees / hoodies / hats / mugs) */
.jssec .jsgrid{padding-top:30px;padding-bottom:20px;margin-top:0}.jssec:last-child .jsgrid{padding-bottom:90px}
.jssec .jsgrid{padding-left:0;padding-right:0}
.jsh{font-family:Bagel,"Inter Tight",sans-serif;font-weight:400;font-size:40px;line-height:1;color:#1A0D14;margin:34px 0 0;letter-spacing:0}
.jsprice i{font-style:normal;font-family:"Inter Tight",system-ui,sans-serif;font-weight:800;font-size:15px;color:#8A7C81;letter-spacing:.06em;text-transform:uppercase}
/* Oct 18 (JC: "go back and forth with the other mugs"): arrows in the item view */
.jsnav{position:absolute;top:50%;margin-top:-30px;width:60px;height:60px;border-radius:50%;border:0;background:#fff;color:#1A0D14;font:400 40px/1 Bagel,"Inter Tight",sans-serif;cursor:pointer;
  box-shadow:0 0 0 3px #1A0D14,0 8px 20px rgba(26,13,20,.18);display:grid;place-items:center;padding-bottom:6px;transition:transform .15s ease,background .15s ease,color .15s ease;z-index:62}
.jsnav.prev{left:28px}.jsnav.next{right:28px}.jsnav[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.jsnav:hover{background:#FF3DA5;color:#fff}}
.jsnav:active{transform:scale(.94)}
.jspos{margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A7C81}
@media (max-width:820px){.jsnav{top:auto;bottom:calc(50% - 10px);width:48px;height:48px;font-size:30px}.jsnav.prev{left:12px}.jsnav.next{right:12px}}
/* Oct 18 (JC: "this needs a refresh too"): the Jemma tile on the Merch page in her new look: gradient G + logo B + stickers */
.mshow.ms-jemma{background:linear-gradient(180deg,rgba(255,247,251,0) 34%,#FFF7FB 100%),radial-gradient(60% 90% at 92% 0%,#FFB13D 0%,rgba(255,177,61,0) 62%),radial-gradient(55% 85% at 4% 6%,#A04DFF 0%,rgba(160,77,255,0) 62%),linear-gradient(#FF3DA5,#FF3DA5);color:#1A0D14;box-shadow:0 18px 28px -20px rgba(255,61,165,.45),0 2px 4px rgba(26,13,20,.08)}
.mshow.ms-jemma .jmtile{display:grid;place-items:center;min-height:170px;padding:10px 6% 0}
.mshow.ms-jemma .jtl{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px}
.mshow.ms-jemma .jtl b{font-family:Bagel,"Inter Tight",sans-serif;font-weight:400;font-size:clamp(46px,8vw,72px);line-height:1;color:#fff}.mshow.ms-jemma .jtl b i{font-style:normal;color:#1A0D14}
.mshow.ms-jemma .jtl em{font-style:normal;font-family:"Inter Tight",system-ui,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(12px,1.6vw,15px);background:#1A0D14;color:#fff;padding:6px 12px 6px 14px;border-radius:8px;transform:rotate(-1.5deg)}
.mshow.ms-jemma .mpics img.stk{background:transparent;mix-blend-mode:normal;object-fit:contain;border-radius:0;filter:drop-shadow(0 6px 0 rgba(26,13,20,.14)) drop-shadow(0 10px 14px rgba(26,13,20,.14))}
.mshow.ms-jemma .mpics img.stk:nth-child(1){transform:rotate(-4deg)}.mshow.ms-jemma .mpics img.stk:nth-child(2){transform:rotate(3deg)}.mshow.ms-jemma .mpics img.stk:nth-child(3){transform:rotate(-2deg)}
.mshow.ms-jemma .mgo{color:#1A0D14;font-weight:600}.mshow.ms-jemma .mgo b{color:#FF3DA5}
/* Oct 18 (JC: "make the gradient color 50% lighter"): the tile's colours mixed 50% with white (pink FF9ED2, orange FFD89E, purple D0A6FF) */
.mshow.ms-jemma{background:linear-gradient(180deg,rgba(255,247,251,0) 34%,#FFF7FB 100%),radial-gradient(60% 90% at 92% 0%,#FFD89E 0%,rgba(255,216,158,0) 62%),radial-gradient(55% 85% at 4% 6%,#D0A6FF 0%,rgba(208,166,255,0) 62%),linear-gradient(#FF9ED2,#FF9ED2)}
.mshow.ms-jemma .jtl b{text-shadow:0 2px 0 rgba(26,13,20,.12)}
body.in-merch #mbar{display:none!important}
/* Oct 18: Jemma's checkout (body.jm-cart = a cart with only her items, on #/cart; plus the note in the slide-in cart) */
body.jm-cart .page h1{font-family:Bagel,"Inter Tight",sans-serif;font-weight:400;font-size:clamp(48px,6vw,72px);color:#fff;text-shadow:none;letter-spacing:0;text-transform:none;line-height:1}
body.jm-cart .page .path,body.jm-cart .page .path a{color:#fff}body.jm-cart .page .path a{text-decoration-color:rgba(255,255,255,.6)}
body.jm-cart .page{font-family:"Inter Tight",system-ui,sans-serif}
body.jm-cart .page .line .t{font-weight:700}
body.jm-cart .page .sum,body.jm-cart .page .tot{font-family:"Inter Tight",system-ui,sans-serif}
body.jm-cart .page .line .ph img{background:transparent;mix-blend-mode:normal}
.jmnote{margin:18px 0 26px;max-width:720px;background:#fff;border-radius:18px;padding:14px 18px;box-shadow:0 0 0 2px #1A0D14,4px 5px 0 2px rgba(26,13,20,.16);font-family:"Inter Tight",system-ui,sans-serif;font-size:15px;line-height:1.45;color:#1A0D14}
.jmnote b{font-weight:800}
.drawer .jmnote{margin:12px 0 14px;font-size:13px;padding:10px 14px;box-shadow:0 0 0 2px #1A0D14}
body.jm-stick .drawer .dhead h2,body.jm-cart .drawer .dhead h2{font-family:Bagel,"Inter Tight",sans-serif;font-weight:400;text-transform:lowercase;letter-spacing:0}
body.jm-cart .line .ph,body.jm-stick .drawer .line .ph,body.jm-cart .drawer .line .ph{background:transparent!important;box-shadow:none}
body.jm-cart .line .ph img,body.jm-stick .drawer .line .ph img{object-fit:contain;mix-blend-mode:normal}
/* Oct 18 design check (impeccable critique: design review + detector), one batch, no change to the approved look */
/* 1. legibility of the white "jemma" on light pink: a deep-pink drop under the white (page name, Merch tile, cart heading) */
.jslogo,.mshow.ms-jemma .jtl b,body.jm-cart .page h1{text-shadow:0 4px 0 rgba(176,20,104,.42),0 10px 24px rgba(176,20,104,.25)}
.mshow.ms-jemma .mgo b{color:#C2127A}
/* 2. small text: readable sizes + inks tinted from her ink, never grey */
body.jm-world .jmpow,body.jm-world .jmpow b{font-size:12px}
body.jm-stick .jmms{font-size:11px}
.jsl,.jspos,.jsprice i{color:#6E5A64}
body.jm-world footer .jmpow,body.jm-world footer .jmpow b,body.jm-world footer .fl p{color:#6E5A64}
body.jm-cart .page .line .o,body.jm-cart .page .pnote,body.jm-cart .page .note{color:#6E5A64}
/* 3. item view: the page behind no longer shows through; the white swatch keeps an edge */
.jsov{background:rgba(255,247,251,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.jscols button[style*="F7F7F5"],.jscols button[style*="F4F4F4"]{box-shadow:inset 0 0 0 2px rgba(26,13,20,.22)}
.jscols button[style*="F7F7F5"].on,.jscols button[style*="F4F4F4"].on{box-shadow:inset 0 0 0 2px rgba(26,13,20,.22),0 0 0 3px #FFF7FB,0 0 0 6px #FF3DA5}
.jspanel h2{font-size:clamp(34px,3.2vw,46px);line-height:1.02;text-wrap:balance}
/* 4. her checkout: same left edge as her top bar, her palette, her controls */
body.jm-cart .wrap.page{max-width:944px;margin-left:max(0px,calc((100% - 1328px) / 2));margin-right:auto;padding-left:32px;padding-right:32px}
body.jm-cart .pnote.freeship{color:#C2127A;font-weight:700}
body.jm-cart .page select{border:2px solid #1A0D14;border-radius:14px;background:#fff;color:#1A0D14;font:700 15px "Inter Tight",system-ui,sans-serif;padding:8px 12px}
body.jm-cart .page input[type=text],body.jm-cart .page #pci{border:2px solid #1A0D14;border-radius:14px;font-family:"Inter Tight",system-ui,sans-serif}
body.jm-cart .page .q button,body.jm-stick .drawer .q button{border-color:#1A0D14;color:#1A0D14}
/* the PayPal-name note: a friendly tag, not a warning box */
.jmnote{box-shadow:none;border:2px dashed #F6C3DE;background:#fff}
.drawer .jmnote{box-shadow:none}
/* 5. slide-in cart on her page: her ink, a lighter scrim */
body.jm-stick .drawer .dhead h2,body.jm-cart .drawer .dhead h2{color:#1A0D14}
body.jm-stick .drawer .scrim{background:rgba(255,247,251,.6)}
/* 6. browser surfaces in her world */
body.jm-world ::selection{background:#FF3DA5;color:#fff}
body.jm-world :focus-visible{outline:3px solid #FF3DA5;outline-offset:3px}
/* Oct 18: empty cart on Jemma's page suggests her stickers */
.jsugg{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.jsugg a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 12px;background:#fff;border:2px dashed #F6C3DE;border-radius:20px;text-decoration:none;color:#1A0D14;transition:transform .16s ease-out}
.jsugg img{width:82%;height:auto;filter:drop-shadow(0 4px 0 rgba(26,13,20,.12)) drop-shadow(0 8px 12px rgba(26,13,20,.12));transition:transform .3s cubic-bezier(.23,1,.32,1)}
.jsugg b{font-family:Bagel,"Inter Tight",sans-serif;font-weight:400;font-size:15px;line-height:1.1;text-align:center}
.jsugg i{font-style:normal;font-weight:700;font-size:14px;color:#C2127A}
@media (hover:hover) and (pointer:fine){.jsugg a:hover img{transform:translateY(-4px) rotate(-2deg)}}
.jsugg a:active{transform:scale(.97)}
body.jm-world .drawer .empty{font-family:"Inter Tight",system-ui,sans-serif;color:#6E5A64}

/* Oct 18: mixed-cart note (Jemma / Music Tea items in a gift shop cart): both stores are part of the P4TP Gift Shop. Gift shop look, a friendly tag */
.mixnote{margin:14px 0 24px;max-width:720px;background:#fff;border:1.5px dashed #F0509A;border-radius:14px;padding:13px 17px;font-size:15px;line-height:1.5;color:#17204A}
.mixnote b{font-weight:700}
.drawer .mixnote{margin:12px 0 14px;font-size:13px;padding:10px 14px}

/* Oct 18 phone pass (JC's phone screenshots: right side cut off): on phones her top bar stacks "powered by" under the logo, so the bar fits
   360 px and the page stops laying out 413 px wide (that was pushing the item view's arrow, add button and the cart off the right edge) */
@media (max-width:560px){
  body.jm-world .jmbrand,body.jm-stick .jmbrand{flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
  body.jm-world .jmpow,body.jm-world .jmpow b{font-size:10.5px}
  body.jm-world header .wrap{gap:10px}
  body.jm-world header .cartbtn{flex:none}
}
/* phone pass: the kind chips wrap instead of running off the edge; the ‹ › arrows sit beside the sticker (its middle, --jsmid, set by place() in jsOpen), not on top of the title */
@media (max-width:560px){
  .jschips{flex-wrap:wrap;gap:6px}.jschips a{font-size:14px;padding:7px 13px}
}
@media (max-width:820px){
  .jsnav{top:calc(var(--jsmid, 200px) - 24px);bottom:auto;margin-top:0}
}
@media (max-width:560px){.jspr{right:-2px;top:-10px;width:56px;height:56px;font-size:18px}}   /* phone: the price dot stays inside the screen */
@media (max-width:560px){   /* phone: a tighter panel under the sticker */
  .jspanel{bottom:16px}.jspanel h2{font-size:26px;margin-bottom:6px}.jsov .jsprice{font-size:22px;margin-bottom:12px}
}

/* Oct 18 phone check-up (JC: "full check up on the phone design" of the 3 stores). Found at 360 px and fixed here: */
@media (max-width:820px){
  html{overflow-x:clip}   /* guard: Apparel / Genres laid out 3 px wider than the phone, so the page could be dragged sideways */
  body.on-cart #qa,body.on-prod #qa{display:none}   /* + product pages (JC: "erase it from those, its not necessary") */   /* the round "?" button sat on top of the cart's Total; the FAQ is still in the menu + footer */
}
@media (max-width:420px){
  .card .row .mcols{font-size:0}.card .row .mcols i:last-of-type{margin-right:0}   /* Music Tea cards: "7 colors" ran off the card; the dots stay */
  .jsp{padding:50px 10px 16px}.jsnm{font-size:13.5px;padding:7px 10px;margin:18px 0 14px}   /* Jemma cards: labels + "peel it off" fit a 2-column phone grid */
  .jsgo{margin-right:26px;font-size:13px;height:40px;padding:0 10px}
}

/* Oct 18: where-we-ship warning above the PayPal buttons (Jemma + Music Tea carts) */
.shipnote{margin:22px 0 -8px auto;max-width:400px;box-sizing:border-box;padding:11px 14px;border-radius:12px;background:#FFF6D6;border:1.5px solid #E8C35A;color:#17204A;font-size:14px;line-height:1.45}
.shipnote b{font-weight:700}
body.jm-cart .shipnote{font-family:"Inter Tight",system-ui,sans-serif;background:#fff;border:2px dashed #FFB13D;color:#1A0D14;border-radius:16px}
/* Oct 20: Music Tea + Jemma = "coming soon" for shoppers (app.js SHOW_ADMIN): tile stays, not a link, a pill instead of "See the merch" */
.mshow.soon{cursor:default}
.mshow.soon .mgo{justify-content:center}
.mshow.soon .mgo b.msoon{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px;background:#4A2E3A;color:#FFF7F0}
.mshow.ms-jemma.soon .mgo b.msoon{background:#1A0D14;color:#fff}
/* Oct 20: "back to the Practice Room" link, Practice Room members only (app.js prBack) */
#prback{text-decoration:none;font-family:var(--mono);font-size:13px;white-space:nowrap}
#prback.prb-a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;margin-left:4px}
#prback.prb-a:hover{filter:brightness(1.08)}
#prback.prb-b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:0 16px;background:#1C1C1C;color:#fff;font-weight:500;letter-spacing:.02em}
#prback.prb-b:hover{text-decoration:underline}
body.jm-world #prback,body.mt-shop #prback{display:none}
/* Oct 25 (JC "opening prices"): regular price crossed out next to the opening price + a small pink tag on the product page */
s.reg{color:var(--muted);font-weight:400;font-size:.82em;margin-left:.35em;text-decoration-thickness:1.5px}
.opentag{display:inline-block;vertical-align:middle;margin-left:.6em;padding:4px 8px;border-radius:999px;background:#CF2F7A;color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;line-height:1}   /* Oct 27 a11y: deeper pink, white text passes 4.8:1 (was the accent, 3.3:1) */
/* Oct 25: "In Europe or the UK? The ... Mug ships from Germany →" under the US & Canada only note (gift sets, buttons, sticker sheets, wrapping paper) and in the cart */
.info .eumug{display:block;margin:-14px 0 24px;font-size:14px;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.sum .eumug{display:block;margin:-2px 0 8px;font-size:13px;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
/* Oct 25 night: one-click swap in the cart (gift set / button -> the same instrument's mug, printed in Europe) */
.sum .swapmug{display:block;width:100%;margin:2px 0 6px;padding:12px 16px;border:0;border-radius:99px;background:var(--navy);color:#fff;font:600 14px/1.25 inherit;font-family:inherit;cursor:pointer;text-align:center}
.sum .swapmug:hover{background:#26306A}.sum .swapmug:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.sum .pnote.swapnote{margin:0 0 10px;text-align:center}
/* Oct 26: "Ships $X cheaper in White, printed in Germany" + Switch, under a cart line (app.js altHTML) */
.page .altsw{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 14px;padding:10px 14px;border-radius:12px;background:#E8F4EC;color:var(--navy);font-size:14px;line-height:1.35}
.page .altsw span{flex:1 1 220px}
.page .altsw button{flex:none;border:0;border-radius:99px;background:var(--navy);color:#fff;font:600 13.5px/1 inherit;font-family:inherit;padding:10px 16px;cursor:pointer}
.page .altsw button:hover{background:#26306A}.page .altsw button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.page .altsw img{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover;background:#fff}
.page .altsw.multi{display:block}.page .altsw .altsw-h{margin:0 0 8px;font-weight:600}
.page .altsw .altsw-r{display:flex;align-items:center;gap:10px;margin:0 0 8px}.page .altsw.multi button{margin-top:2px}

h1[tabindex="-1"]:focus{outline:none}   /* Oct 27 a11y: the heading gets focus after a page change, without a ring */

/* Oct 27 (JC): Christmas module = a banner + 4 gifts at the top of home (Hide -> a slim bar that brings it back, remembered per browser)
   and the same banner as the Christmas page header, then shelves by kind. Colours = the holiday wrapping paper (red, green, gold, cream).
   Looks: a = snowy night (navy), b = candy-cane red, c = cream + a real piano keyboard. */
.xmas{--xr:#B8282E;--xg:#1F5A3A;--xgo:#E2B64B;--xc:#F3EBDD;--xn:#17204A;padding:20px 0 4px}
.xbn{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:28px;padding:46px 52px;min-height:310px}
.xbtx{position:relative;z-index:2}
.xbn .kick{display:inline-block;margin-bottom:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.xbn .path{margin-bottom:14px;color:inherit;opacity:.85}.xbn .path a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.xbn h1,.xbn h2{font-family:Holtwood,Georgia,serif;font-weight:400;text-transform:uppercase;font-size:clamp(32px,4.4vw,58px);line-height:.98;letter-spacing:-.01em;max-width:13ch;margin-bottom:14px}
.xbn p{max-width:46ch;font-size:15.5px;line-height:1.45;opacity:.92}
.xchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.xchip{font-family:var(--mono);font-size:12.5px;padding:7px 12px;border-radius:99px;border:1px solid color-mix(in srgb,currentColor 40%,transparent);transition:background-color .15s ease,border-color .15s ease,transform .16s var(--ease-out)}
.xchip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.xchip:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 10%,transparent)}}
.xbph{position:relative;z-index:1;height:250px}
.xbph img{position:absolute;width:48%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(10,12,30,.28)}
.xp0{left:0;top:16%;transform:rotate(-6deg)}.xp1{left:27%;top:0;transform:rotate(2deg);z-index:2}.xp2{left:50%;top:20%;transform:rotate(7deg)}
.xhide{position:absolute;top:14px;right:14px;z-index:3;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;font-size:12px;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent);transition:background-color .15s ease,transform .16s var(--ease-out)}
.xhide:active,.xbar:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.xhide:hover{background:color-mix(in srgb,currentColor 12%,transparent)}}
.xbar{display:none;width:100%;align-items:center;gap:10px;padding:11px 18px;border-radius:99px;font-size:13px;text-align:left;transition:transform .16s var(--ease-out)}
.xbar b{font-weight:500}.xbar u{margin-left:auto;text-underline-offset:3px}
.xdot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--xr);box-shadow:13px 0 0 var(--xg);margin-right:13px}
.xmas.min .xfull{display:none}
.xmas.min .xbar{display:flex;animation:xin .22s var(--ease-out) both}
.xmas:not(.min) .xfull{animation:xin .26s var(--ease-out) both}
@keyframes xin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.xgrid{margin-top:22px}
.xmore{display:flex;justify-content:flex-end;margin-top:14px}
.xpage{padding-top:24px}
.xsec{scroll-margin-top:76px}

/* a: snowy night */
.xb-a .xbn,.xb-a .xbar{background:var(--xn);color:var(--xc)}
.xb-a .kick{color:var(--xgo)}
.xb-a .xbn h1,.xb-a .xbn h2{color:#fff}
.xsnow{position:absolute;left:0;right:0;top:-360px;bottom:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,#fff 0 1.6px,transparent 2.4px),radial-gradient(circle,#fff 0 1.1px,transparent 1.8px),radial-gradient(circle,#fff 0 2.2px,transparent 3px);
  background-size:120px 120px,90px 90px,180px 180px;background-position:10px 20px,50px 60px,120px 10px;animation:xsnow 24s linear infinite}
@keyframes xsnow{to{transform:translateY(360px)}}
.xb-a .xbn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,var(--xr) 0 40px,var(--xg) 40px 80px);z-index:1}

/* b: candy-cane red */
.xb-b .xbn,.xb-b .xbar{background:var(--xr);color:var(--xc)}
.xb-b .kick{color:var(--xgo)}
.xb-b .xbn h1,.xb-b .xbn h2{color:#fff}
.xb-b .xbn::before,.xb-b .xbn::after{content:"";position:absolute;left:0;right:0;height:12px;z-index:1;
  background:repeating-linear-gradient(-45deg,var(--xc) 0 9px,var(--xr) 9px 18px,var(--xg) 18px 27px,var(--xr) 27px 36px)}
.xb-b .xbn::before{top:0}.xb-b .xbn::after{bottom:0}

/* c: cream + piano keyboard */
.xb-c .xbn{background:var(--xc);color:var(--xn);padding-bottom:96px;border:1px solid #E4D9C6}
.xb-c .xbar{background:var(--xc);color:var(--xn);border:1px solid #E4D9C6}
.xb-c .kick{color:var(--xr)}
.xb-c .xbn h1,.xb-c .xbn h2{color:var(--xr)}
.xkeys{position:absolute;left:0;right:0;bottom:0;width:100%;height:64px;z-index:1}
.xkeys .w rect{fill:#FFFDF8;stroke:#D8CCB6;stroke-width:1}
.xkeys .b .r{fill:var(--xr)}.xkeys .b .g{fill:var(--xg)}

@media (prefers-reduced-motion:reduce){.xsnow{animation:none}.xmas .xfull,.xmas .xbar{animation:none!important}}
@media (max-width:720px){
  .xmas{padding-top:14px}
  .xbn{grid-template-columns:1fr;gap:6px;padding:30px 22px 24px;min-height:0;border-radius:16px}
  .xb-c .xbn{padding-bottom:70px}
  .xbn h1,.xbn h2{font-size:clamp(28px,8.4vw,40px);padding-right:64px}
  .xbn p{font-size:14.5px}
  .xbph{height:150px;order:-1;margin:0 0 6px}
  .xbph img{width:38%}.xp0{left:6%}.xp1{left:31%}.xp2{left:56%}
  .xkeys{height:44px}
  .xbar .xwhen{display:none}
  .xmore{justify-content:center}
}
.xb-a .xchip{background:var(--xn)}.xb-b .xchip{background:var(--xr)}.xb-c .xchip{background:var(--xc)}
@media (max-width:720px){   /* phone: the block stays short so the instrument picker is still near the top */
  .xbn{padding:26px 20px 24px}
  .xbph{height:112px;margin:0 0 10px}
  .xbph img{width:29%;border-radius:10px}.xp0{left:12%;top:12%}.xp1{left:35%;top:0}.xp2{left:58%;top:14%}
  .xbn h1,.xbn h2{font-size:clamp(25px,7.2vw,32px);margin-bottom:10px}
  .xbn .kick{margin-bottom:8px}
  .xbn p{font-size:14px}
  .xchips{gap:6px;margin-top:14px}
  .xchip{font-size:12px;padding:6px 10px}
  .xhide{top:12px;right:12px;padding:5px 10px}
}
.xb-b .xdot{background:var(--xc)}

/* Oct 29 2026: deals of the day (two items, live countdown) + gift bundles (JC: "aggressive deals with countdowns in the gift shop for anybody").
   Navy band in the Christmas block's colours; the % is the loud thing. Rules in /offers.mjs. */
.deals{--dn:#17204A;--dc:#F3EBDD;--dp:#E0408A;--dy:#F2C230;padding:20px 0 0}
.dbn{position:relative;display:grid;grid-template-columns:minmax(240px,.8fr) 2fr;gap:26px;align-items:center;background:var(--dn);color:var(--dc);border-radius:22px;padding:28px;overflow:hidden}
.dbn::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.035) 22px 44px);pointer-events:none}
.dlhead{position:relative}
.dlhead .kick{color:var(--dy);letter-spacing:.08em;text-transform:uppercase}
.dlhead h2{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.02;text-transform:uppercase;margin:10px 0 18px}
.dclock{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dclock .mono{text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:rgba(243,235,221,.75)}
.dclock .cd{font-family:var(--mono);font-weight:500;font-size:28px;letter-spacing:.06em;background:var(--dc);color:var(--dn);padding:6px 14px 5px;border-radius:10px;font-variant-numeric:tabular-nums}
.dnote{margin-top:14px;font-size:14px;color:rgba(243,235,221,.8);max-width:30ch}
.dgrid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dcard{display:grid;grid-template-columns:44% 1fr;background:#fff;color:#17171C;border-radius:16px;overflow:hidden;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
@media (hover:hover){.dcard:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(0,0,0,.6)}}
.dcard:active{transform:scale(.98)}
.dph{position:relative;background:#ECE7DD;aspect-ratio:1/1}
.dph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.doff{position:absolute;left:10px;top:10px;background:var(--dp);color:#fff;font-family:Holtwood,Georgia,serif;font-size:17px;line-height:1;text-transform:uppercase;padding:8px 10px 6px;border-radius:8px;transform:rotate(-4deg);box-shadow:0 4px 10px -4px rgba(0,0,0,.4);white-space:nowrap}
.dtx{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px}
.dzone{font-size:10.5px;color:#6E6A72;letter-spacing:.04em}
.dt{font-weight:600;font-size:16px;line-height:1.25}
.dp{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dp b{font-family:var(--mono);font-weight:500;font-size:24px;color:var(--dp)}
.dp s{font-family:var(--mono);font-size:14px;color:#8F8C99}
.dgo{color:var(--dn);font-size:12px;margin-top:2px}
.card .dbadge{position:absolute;left:10px;bottom:10px;z-index:2;background:#E0408A;color:#fff;font-size:11px;letter-spacing:.04em;padding:5px 10px;border-radius:99px;line-height:1}
.card .p .dnow,.info .price b.dnow{color:#E0408A;font-weight:500}
.info .price .reg,.card .p .reg{color:var(--muted)}
.info .price .dtag{display:inline-block;margin-left:10px;vertical-align:2px;background:#17204A;color:#F3EBDD;font-size:11.5px;padding:6px 10px 5px;border-radius:99px}
.info .price .dtag .cd{font-variant-numeric:tabular-nums}
/* bundles */
.bundles .shead{border-top:0;padding-top:0}
.shelf.bundles{padding-top:30px}   /* JC Oct 29: "weird spacing" between the Christmas block and the bundles (was 56 + 30 px) */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.bph{position:relative;height:178px;background:var(--tile)}
.bph img{position:absolute;top:22px;width:44%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#fff;box-shadow:0 10px 18px -12px rgba(23,32,74,.6)}
.bph.n2 .b0{left:9%;transform:rotate(-4deg)}.bph.n2 .b1{right:9%;transform:rotate(4deg);top:30px}
.bph.n3 img{width:36%}.bph.n3 .b0{left:5%;transform:rotate(-5deg)}.bph.n3 .b1{left:32%;top:12px;z-index:1}.bph.n3 .b2{right:5%;transform:rotate(5deg);top:30px}
.boff{position:absolute;right:12px;bottom:12px;z-index:2;background:#F2C230;color:#17204A;font-family:Holtwood,Georgia,serif;font-size:15px;line-height:1;text-transform:uppercase;padding:8px 10px 6px;border-radius:8px;transform:rotate(3deg)}
.btx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.btx h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.btx p{color:var(--muted);font-size:14px;line-height:1.4}
.btx .bp{color:var(--ink);display:flex;gap:8px;align-items:baseline;margin-top:2px}
.btx .bp b{font-family:var(--mono);font-weight:500;font-size:20px}.btx .bp s{font-family:var(--mono);font-size:13px;color:var(--muted)}
.blinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.bchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:7px 12px;font-size:12px;background:var(--bg);transition:border-color .15s ease}
@media (hover:hover){.bchip:hover{border-color:var(--ink)}}
.bline{margin-top:12px;font-size:14px;line-height:1.45;color:var(--ink)}
.bline .mono{display:inline-block;background:#F2C230;color:#17204A;border-radius:6px;padding:3px 7px 2px;margin-right:6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.bline a{text-decoration:underline;text-underline-offset:3px}
.sum .offrow span:last-child{color:#E0408A}
.sum .bhint a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sum s.was,.line s.was{color:var(--muted);margin-right:4px;font-size:.9em}
@media (prefers-reduced-motion:reduce){.dcard,.dcard:hover{transition:none;transform:none}}
@media (max-width:900px){.dbn{grid-template-columns:1fr;gap:20px}.bgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .dbn{padding:20px 16px;border-radius:18px}.dgrid{grid-template-columns:1fr;gap:12px}
  .dlhead h2{margin:8px 0 14px}.dclock .cd{font-size:24px}.dnote{font-size:13px;margin-top:10px}
  .dcard{grid-template-columns:40% 1fr}.dtx{padding:12px 14px;gap:6px}.dt{font-size:15px}.dp b{font-size:21px}.doff{font-size:14px;padding:6px 8px 5px}
  .bgrid{grid-template-columns:1fr}.bph{height:150px}
  .info .price .dtag{display:table;margin:8px 0 0}
}
.doff i{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;font-weight:900;font-style:normal;font-size:.92em;margin-left:1px}   /* Holtwood's own % reads as "o/o" */
.line .r .ldeal{display:block;color:#E0408A;font-size:11px;margin-top:4px;white-space:nowrap}
.bph{overflow:hidden}.bph img{width:min(44%,150px)}.bph.n3 img{width:min(36%,124px)}.bph.n2 .b0{left:max(9%,calc(50% - 160px))}.bph.n2 .b1{right:max(9%,calc(50% - 160px))}
@media (max-width:640px){.bph{height:168px}.bph img{top:18px;width:min(42%,132px)}.bph.n2 .b1{top:26px}.bph.n3 img{width:min(34%,112px)}.bph.n3 .b1{top:10px}.bph.n3 .b2{top:26px}}

/* JC Oct 29 night ("these are way too big", picked A + "make the christmas the same size too"): the deals band and the home Christmas block
   are each ONE thin row of about the same height (~125 px, were ~390 and ~400). The Christmas page keeps its big header. */
.dbn{grid-template-columns:200px 1fr;gap:16px;padding:14px 18px;border-radius:18px}
.dgrid{gap:14px}
.dlhead h2{font-size:22px;margin:6px 0 10px}
.dclock{gap:8px}.dclock .mono{font-size:10.5px}.dclock .cd{font-size:20px;padding:4px 10px 3px;border-radius:8px}
.dcard{grid-template-columns:96px 1fr}
.dph{aspect-ratio:auto;width:96px;height:96px}
.dtx{gap:4px;padding:10px 14px}
.dt{font-size:15px}.dp b{font-size:20px}
.doff{font-size:13px;padding:5px 7px 4px;left:6px;top:6px}
.xbn.xhome{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 168px;gap:22px;padding:15px 84px 15px 28px;min-height:129px}   /* = the deals band's height */
.xhome .kick{margin-bottom:2px}
.xhome h2{font-size:23px;max-width:none;margin:2px 0 5px;white-space:nowrap}
.xhome p{font-size:12.5px;line-height:1.4;max-width:46ch}
.xhome .xchips{margin-top:0;gap:6px}
.xhome .xchip{font-size:12px;padding:5px 10px}
.xhome .xbph{height:92px;width:168px}
.xhome .xbph img{width:76px;border-radius:10px;box-shadow:0 8px 18px rgba(10,12,30,.28)}
.xhome .xp0{left:0;top:10px}.xhome .xp1{left:46px;top:0}.xhome .xp2{left:92px;top:12px}
.xhome .xhide{top:10px;right:10px;padding:4px 10px;font-size:11px}
.xb-b .xbn.xhome::before,.xb-b .xbn.xhome::after{height:7px}
@media (max-width:900px){.dbn{grid-template-columns:1fr}.dbn .dlhead{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px}.dlhead h2{margin:0}
  .xbn.xhome{grid-template-columns:1fr;gap:12px;padding:18px 20px;min-height:0}.xhome .xbph{display:none}}
@media (max-width:640px){.dbn{grid-template-columns:1fr;gap:10px;padding:14px 14px 16px}.dbn .dlhead .kick{flex-basis:100%}.dlhead h2{font-size:20px}.dclock .cd{font-size:18px}.dclock .mono{display:none}
  .dcard{grid-template-columns:76px 1fr}.dph{width:76px;height:76px}.dtx{padding:8px 12px}.dt{font-size:14px}.dp b{font-size:18px}.doff{font-size:11px}
  .xbn.xhome{padding:16px 16px 18px;min-height:0}.xhome h2{font-size:21px;padding-right:56px;white-space:normal}}

/* Oct 30: photo zoom (ADMIN ONLY while app.js ZOOM_LIVE is false: the button + zoom cursor show under html.is-admin) */
.zbtn{display:none;position:absolute;right:12px;bottom:12px;z-index:2;align-items:center;gap:6px;padding:7px 12px 7px 9px;border-radius:99px;background:rgba(255,255,255,.92);
  color:#17171C;font-size:12px;box-shadow:0 4px 14px rgba(20,20,30,.16);transition:transform .16s var(--ease-out)}
.zbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zbtn:active{transform:scale(.96)}
html.is-admin .zbtn{display:flex}
html.is-admin .gallery .main{cursor:zoom-in}
body.jm-world .zbtn{display:none!important}
.zv{position:fixed;inset:0;z-index:60;background:#F4F1EA;display:flex;flex-direction:column;animation:zvin .2s var(--ease-out) both}
@keyframes zvin{from{opacity:0}to{opacity:1}}
.zstage{position:relative;flex:1;overflow:hidden;display:grid;place-items:center;touch-action:none;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.zv.zin .zstage{cursor:zoom-out}
.zimg{display:block;object-fit:contain;transform-origin:center;will-change:transform;mix-blend-mode:multiply;max-width:none}
.zimg.zanim{transition:transform .26s var(--ease-out)}
.zx,.zprev,.znext{position:absolute;z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:#17171C;font-size:20px;line-height:1;
  box-shadow:0 4px 16px rgba(20,20,30,.16);transition:transform .16s var(--ease-out)}
.zx{top:16px;right:16px;font-size:17px}
.zprev,.znext{top:50%;margin-top:-23px;font-size:30px;padding-bottom:3px}
.zprev{left:16px}.znext{right:16px}
.zx:active,.zprev:active,.znext:active{transform:scale(.94)}
.zbar{position:absolute;left:0;right:0;bottom:16px;z-index:2;display:flex;justify-content:center;gap:14px;color:#55525C;font-size:12px;pointer-events:none}
.zbar .zn:empty{display:none}
.zv.zin .zhint{opacity:0}
.zhint{transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){.zv{animation:none}.zimg.zanim{transition:none}}
@media (max-width:720px){.zx{top:12px;right:12px}.zprev,.znext{top:auto;bottom:10px;margin-top:0;width:42px;height:42px}.zbar{bottom:22px}}

/* Oct 30 (JC): big ADMIN label on top of every page when signed in as admin (app.js adminMark) */
#admbar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 16px;background:#FFD400;color:#17171C;text-align:center}
#admbar b{font-family:Holtwood,Georgia,serif;font-weight:400;font-size:26px;letter-spacing:.14em;line-height:1}
#admbar span{font-size:12px}
@media (max-width:720px){#admbar b{font-size:22px}#admbar span{font-size:11px}}

/* Oct 30 (JC: "add an animation loop to the borders of the christmas banner"): the candy-cane stripes slide like a barber pole,
   top border to the right, bottom border to the left; one stripe repeat = 36px along the -45deg stripes = 36 x sqrt(2) px across. */
.xb-b .xbn::before,.xb-b .xbn::after{background-size:50.912px 100%;animation:xcane 2.4s linear infinite}
.xb-b .xbn::after{animation-direction:reverse}
@keyframes xcane{from{background-position:0 0}to{background-position:50.912px 0}}
@media (prefers-reduced-motion:reduce){.xb-b .xbn::before,.xb-b .xbn::after{animation:none}}

/* Oct 30 (JC: "it doesnt let me click on the bundles"): the whole bundle card is a link to its first part; the part chips sit above it */
.bcard{position:relative;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.bgo{position:absolute;inset:0;z-index:3;border-radius:inherit}   /* above the stacked photos (z 1) and the Save badge (z 2) */
.bgo:focus-visible{outline-offset:-3px}
.blinks{position:relative;z-index:4}
@media (hover:hover) and (pointer:fine){.bcard:has(.bgo:hover){transform:translateY(-4px);box-shadow:0 24px 30px -20px rgba(23,32,74,.45)}}
.bcard:has(.bgo:active){transform:scale(.99)}
@media (prefers-reduced-motion:reduce){.bcard{transition:none}.bcard:has(.bgo:hover){transform:none}}