/* ONLY BAD OPTIONS: the shop's look.
   Built closely on plz.world: its proportions, rules, type sizes and behaviour.
   Its colour is deliberately not taken: where plz.world uses its blue, this uses
   the easy easy pink. */

@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight:400 700;font-stretch:75% 100%;font-display:swap}

:root{
  --ink:#000;
  --paper:#fff;
  --grey:#6f6f6f;
  --fog:#ececec;             /* the product stage behind pictures */
  --hi:#ff2e88;              /* easy easy pink: hover rows, counts, the dot */
  --line:1px solid #000;
  --pad:14px;
  --sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  /* cart.js paints its drawer with these */
  --display:var(--sans);--mono:var(--sans);--bg:#fff;--muted:#6f6f6f;--accent:#ff2e88;--panel:#f3f3f3;--line-c:rgba(0,0,0,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* hidden must win over any display rule (state lines, sections) */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.2;font-weight:400}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
.u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ── header ─────────────────────────────── */
.top{display:flex;align-items:center;gap:30px;height:144px;padding:0 20px;border-bottom:var(--line);background:var(--paper)}
.top .logo img{height:106px;width:auto}
.top nav{display:flex;gap:16px;font-size:16px}
.top nav a{padding:4px 0;border-bottom:1px solid transparent}
.top nav a:hover,.top nav a.on{border-bottom-color:currentColor}
.top .tools{margin-left:auto;display:flex;align-items:center;gap:14px}
.cartwrap{position:relative;display:grid;place-items:center;width:28px;height:28px;background:none;border:0;cursor:pointer}
.cartwrap svg{width:21px;height:21px;fill:none;stroke:#000;stroke-width:1.5}
.cartcount{position:absolute;top:-6px;right:-8px;font-size:11px;color:var(--hi)}
.burger{display:none;background:none;border:0;cursor:pointer;width:28px;height:28px}
.burger svg{width:22px;height:22px;stroke:#000;stroke-width:1.5;fill:none}
.mobnav{display:none;border-bottom:var(--line)}
.mobnav.on{display:block}
.mobnav a{display:block;padding:14px 20px;font-size:22px;border-top:1px solid #e3e3e3}

/* ── section titles: "latest release →" ── */
.st{display:flex;justify-content:space-between;align-items:baseline;padding:20px var(--pad) 10px;border-bottom:var(--line)}
.st h2{font-size:24.5px;font-weight:400;letter-spacing:-.01em}
.st h2 a::after,.more a::after{content:" →";font-size:.8em}
.st .side{font-size:12.25px}
.st .side a{text-decoration:underline;text-underline-offset:3px}

/* ── release block ── */
.rel{display:grid;grid-template-columns:288px minmax(0,1fr);border-bottom:var(--line)}
.rel .cover{border-right:var(--line);padding:20px;display:grid;place-items:center;background:#fff}
.rel .cover img{width:100%;aspect-ratio:1/1;object-fit:contain}
.rel .body{padding:22px 20px 22px 40px;display:flex;flex-direction:column}
.rel .head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.rel .artist{font-size:14px;margin-bottom:6px}
.rel h3{font-size:32px;font-weight:400;letter-spacing:-.015em;line-height:1.05}
.rel .cat{font-size:11.2px;color:var(--grey);margin-top:6px}
.rel .price{font-size:18px}
.fmt{margin-top:18px;border-top:1px solid #dcdcdc}
.fmt li{list-style:none;display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #dcdcdc}
.fmt .sq{width:26px;height:26px;border:var(--line);display:grid;place-items:center;font-size:10px}
.fmt .p{font-size:12.25px;color:var(--grey)}
.fmt button{background:none;border:var(--line);padding:5px 10px;font-size:12.25px;cursor:pointer}
.fmt button:hover{background:#000;color:#fff}
.rel .acts{display:flex;align-items:center;gap:20px;margin-top:auto;padding-top:20px}
.rel .mark{align-self:flex-end;width:190px;color:#000}
.btn{display:inline-flex;align-items:center;justify-content:center;background:#000;color:#fff;border:var(--line);height:44px;padding:0 22px;font-size:14px;cursor:pointer}
.btn:hover{background:var(--hi);border-color:var(--hi)}
.btn:disabled{background:#e6e6e6;border-color:#e6e6e6;color:#888;cursor:not-allowed}
.ee{display:block;aspect-ratio:1566/618;background:currentColor;-webkit-mask:url("images/easyeasy.svg") center/contain no-repeat;mask:url("images/easyeasy.svg") center/contain no-repeat}

/* ── events ── */
.ev{padding:0 var(--pad)}
.ev .row{display:grid;grid-template-columns:200px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:12px;min-height:58px;padding:8px 10px;
  margin:0 -10px;border-bottom:1px solid #dcdcdc}
.ev .row b{font-weight:600}
.ev .row small{display:block;font-size:11.2px;color:var(--grey);margin-top:2px}
.ev .row .nb{white-space:nowrap}
.ev .none{padding:18px 0;color:var(--grey);border-bottom:var(--line)}
.ev .row .city small{display:none}
.ev .tix{border:var(--line);background:#fff;padding:7px 16px;font-size:12.25px;white-space:nowrap}
.ev .row:hover{background:var(--hi);color:#fff}
.ev .row:hover small{color:#fff}
.ev .row:hover .tix{color:#000}
.ev .end{border-bottom:var(--line);margin-bottom:0}

/* ── product grid ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.card{position:relative;display:flex;flex-direction:column;border-right:var(--line);border-bottom:var(--line);min-width:0}
.card .media{position:relative}
.card .pic{position:relative;display:block;aspect-ratio:1/1;background:#fff;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:contain;padding:4%}
.card.sold .pic img{opacity:.45}
.card .plus{position:absolute;right:9px;bottom:9px;width:44px;height:44px;background:#000;color:#fff;border:0;cursor:pointer;display:grid;place-items:center;z-index:2}
.card .plus svg{width:20px;height:20px;stroke:#fff;stroke-width:1.6}
.card .plus:hover{background:var(--hi)}
.card .flag{position:absolute;left:10px;top:10px;font-size:11.2px;background:#fff;border:var(--line);padding:3px 7px}
.card .txt{display:block;padding:var(--pad) var(--pad) 16px;border-top:var(--line);flex:1}
.card .brand{font-size:12.25px;margin-bottom:9px}
.card .name{font-size:14px;line-height:1.25}
.card .meta{font-size:11.2px;color:var(--grey);margin-top:2px;min-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .price{font-size:14px;margin-top:6px}
.card .txt:hover .name{text-decoration:underline;text-underline-offset:3px}
.sizes-pop{position:absolute;right:9px;bottom:60px;z-index:3;display:flex;background:#fff;border:var(--line)}
.sizes-pop button{min-width:40px;height:36px;border:0;border-right:var(--line);background:#fff;cursor:pointer;font-size:13px}
.sizes-pop button:last-child{border-right:0}
.sizes-pop button:hover{background:#000;color:#fff}
.more{padding:20px var(--pad) 12px;border-bottom:var(--line);font-size:24.5px}

/* ── mailing list box ── */
.mail{padding:var(--pad) var(--pad) 22px}
.mbox{width:400px;max-width:100%;border:var(--line);border-radius:14px;padding:16px 16px 18px}
.mbox .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.mbox h3{font-size:17.5px;font-weight:400}
.mbox .mh p{font-size:14px;margin-top:2px}
.mbox .mh img{width:74px;height:auto}
.mform{display:flex;border:var(--line);border-radius:999px;overflow:hidden;height:44px}
.mform input{flex:1;min-width:0;border:0;padding:0 18px;outline:none;font-size:14px;background:#fff}
.mform button{background:#000;color:#fff;border:0;padding:0 22px;cursor:pointer;border-radius:999px}
.mform button:hover{background:var(--hi)}
.mbox .fine{font-size:11.2px;color:var(--grey);margin-top:14px;line-height:1.5}
.mform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.mform button:disabled{opacity:.6;cursor:wait}
.mmsg{font-size:14px;margin-top:12px;color:var(--hi)}
.mmsg.ok{color:var(--ink)}

/* ── footer ── */
.foot{background:#000;color:#fff;padding:18px 20px 16px}
.foot .fw{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.foot .name{font-size:30px;font-weight:600;letter-spacing:-.02em}
.foot .about{font-size:11.2px;color:#b9b9b9;margin-top:6px;line-height:1.45;max-width:46ch}
.foot select{background:#000;color:#fff;border:0;font-size:12.25px;cursor:pointer}
.foot .fl{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:28px;font-size:12.25px}
.foot .links{display:flex;flex-wrap:wrap;gap:6px 16px;color:#cfcfcf}
.foot .links a:hover{color:#fff;text-decoration:underline}
.foot .copy{text-align:right;color:#cfcfcf;white-space:nowrap}
.foot .copy i{display:block;color:#fff;margin-bottom:2px}

/* ── shop page ── */
.tabs{display:flex;flex-wrap:wrap;gap:6px 34px;padding:18px var(--pad) 12px;border-bottom:var(--line)}
.tabs button{background:none;border:0;cursor:pointer;font-size:24.5px;padding:0 0 2px;border-bottom:1px solid transparent;position:relative}
.tabs button sup{font-size:11.2px;color:var(--hi);position:relative;top:-.9em;margin-left:2px}
.tabs button.on{border-bottom-color:#000}
.filters{display:flex;align-items:center;gap:16px;padding:0 var(--pad);height:46px;border-bottom:var(--line);font-size:14px}
.filters label{display:flex;align-items:center;gap:7px;cursor:pointer}
.filters input[type=checkbox]{width:13px;height:13px;accent-color:#000}
.filters .sep{width:1px;align-self:stretch;margin:10px 0;background:#d0d0d0}
.filters select{border:var(--line);background:#fff;height:30px;padding:0 8px;min-width:150px}
.filters .sort{margin-left:auto;border:0;min-width:0;cursor:pointer}
.empty{padding:40px var(--pad);color:var(--grey)}
.state{grid-column:1/-1;padding:40px var(--pad);color:var(--grey);border-bottom:var(--line)}
.state button{margin-left:10px;background:#fff;border:var(--line);padding:5px 12px;cursor:pointer}
.sizes-pop button:disabled{color:#bbb;text-decoration:line-through;cursor:not-allowed;background:#fff}
.sizes button:disabled{color:#b3b3b3;text-decoration:line-through;cursor:not-allowed;border-color:transparent}
.qty{display:inline-flex;border:var(--line);margin-bottom:14px}
.qty button{width:40px;height:40px;background:#fff;border:0;font-size:17px;cursor:pointer}
.qty input{width:48px;height:40px;border:0;border-left:var(--line);border-right:var(--line);text-align:center;font-size:14px;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.info .err{display:none;margin-top:10px;background:var(--hi);color:#fff;font-size:12.25px;padding:9px 12px;width:360px;max-width:100%}
.info .desc p{margin-bottom:10px}

/* ── product page ── */
.crumbs{padding:12px var(--pad) 14px;border-bottom:var(--line);font-size:14px}
.crumbs .back{display:inline-flex;gap:6px;font-size:12.25px;margin-bottom:8px}
.crumbs .path a:hover{text-decoration:underline}
.crumbs .path span{margin:0 6px}
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:var(--line)}
.stage{border-right:var(--line);background:var(--fog)}
.stage .big{aspect-ratio:1/1;display:grid;place-items:center;padding:5%}
.stage .big img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.stage .thumbs{display:grid;grid-template-columns:repeat(5,1fr);border-top:var(--line)}
.stage .thumbs button{aspect-ratio:1/1;border:0;border-right:var(--line);background:var(--fog);cursor:pointer;padding:8%}
.stage .thumbs button img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.stage .thumbs button.on{background:#dedede}
.info{padding:22px 14px 40px}
.info .brand{font-size:14px;margin-bottom:2px}
.info h1{font-size:clamp(34px,3.9vw,56px);font-weight:400;letter-spacing:-.02em;line-height:1.05;margin-bottom:18px}
.info .price{font-size:14px;margin-bottom:22px}
.info .note{font-size:12.25px;line-height:1.7}
.info .note .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--hi);margin-right:6px;vertical-align:1px}
.info .lab{font-size:14px;margin:22px 0 10px}
.sizes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.sizes button{min-width:26px;height:32px;padding:0 8px;background:none;border:1px solid transparent;cursor:pointer;font-size:14px}
.sizes button:hover{border-color:#bdbdbd}
.sizes button.sel{border-color:#000}
.sizes.nudge{animation:nudge .35s}
@keyframes nudge{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.info .add{width:360px;max-width:100%}
.info .pay{font-size:12.25px;margin:10px 0 30px;color:var(--grey)}
.info .lines p{font-size:14px;margin-bottom:16px}
.info .lines .desc{max-width:52ch;line-height:1.5}
.info .ship a{display:inline-block;border-bottom:1px solid #000;padding-bottom:1px;font-size:14px}

/* ── checkout ── */
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:var(--line)}
.co form{border-right:var(--line);padding:22px var(--pad) 40px}
.co .sum{padding:22px var(--pad) 40px;background:#fafafa}
.co h2{font-size:24.5px;font-weight:400;margin-bottom:16px}
.co .grp{margin-bottom:26px}
.co .grp h3{font-size:14px;font-weight:400;color:var(--grey);margin-bottom:10px}
.co .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co .plz{display:grid;grid-template-columns:.45fr 1fr;gap:10px}
.co .f{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.co .f label{font-size:12.25px}
.co .f input,.co .f select{height:44px;border:var(--line);padding:0 12px;background:#fff;border-radius:0;font-size:14px;outline:none;width:100%}
.co .f input:focus,.co .f select:focus{box-shadow:inset 0 0 0 1px #000}
.co .f.err input,.co .f.err select{border-color:var(--hi);box-shadow:inset 0 0 0 1px var(--hi)}
.co .line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #dcdcdc}
.co .line .th{width:64px;height:64px;background:var(--fog);display:grid;place-items:center;padding:6px}
.co .line .th img{max-width:100%;max-height:100%;mix-blend-mode:multiply}
.co .line small{display:block;font-size:11.2px;color:var(--grey);margin-top:3px}
.co .tot{margin-top:16px}
.co .tot div{display:flex;justify-content:space-between;padding:5px 0}
.co .tot .g{border-top:var(--line);margin-top:8px;padding-top:12px;font-size:18px}
.co .btn{width:100%;margin-top:18px}
.co .msg{display:none;margin-top:12px;padding:10px 12px;background:var(--hi);color:#fff;font-size:12.25px}
.co .hint{font-size:11.2px;color:var(--grey);margin-top:10px}

/* ── cart drawer (cart.js), dressed as plz ── */
html #obo-cart .oc-panel{border-left:var(--line);width:420px}
html #obo-cart .oc-head{padding:20px 16px;border-bottom:var(--line)}
html #obo-cart .oc-head span{font-family:var(--sans);font-weight:400;font-style:normal;text-transform:lowercase;font-size:24.5px}
html #obo-cart .oc-items{padding:0 16px}
html #obo-cart .oc-th{border:0;background:var(--fog)}
html #obo-cart .oc-th img{mix-blend-mode:multiply}
html #obo-cart .oc-name{font-family:var(--sans);font-weight:400;text-transform:none;font-size:14px;line-height:1.25}
html #obo-cart .oc-size,html #obo-cart .oc-ship,html #obo-cart .oc-empty,html #obo-cart .oc-cont,html #obo-cart .oc-rm{font-family:var(--sans);text-transform:none;letter-spacing:0}
html #obo-cart .oc-qty,html #obo-cart .oc-price,html #obo-cart .oc-sumrow{font-family:var(--sans)}
html #obo-cart .oc-checkout{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:14px;height:44px;padding:0}
html #obo-cart .oc-foot{border-top:var(--line);padding:16px}

/* ── narrower windows ── */
@media(max-width:900px){
  .rel{grid-template-columns:200px minmax(0,1fr)}
  .rel .mark{display:none}
  .ev .row{grid-template-columns:170px minmax(0,1fr) minmax(0,1fr) auto}
  .ev .row .venue{display:none}
  .ev .row .city small{display:block}
  .pdp,.co{grid-template-columns:minmax(0,1fr)}
  .stage,.co form{border-right:0;border-bottom:var(--line)}
}
@media(max-width:560px){
  .top{height:76px;padding:0 14px;gap:14px}
  .top .logo img{height:56px}
  .top nav{display:none}
  .burger{display:grid;place-items:center}
  .st h2,.more,.tabs button{font-size:20px}
  .rel{grid-template-columns:1fr}
  .rel .cover{border-right:0;border-bottom:var(--line);padding:30px 60px}
  .rel .body{padding:18px var(--pad)}
  .rel h3{font-size:26px}
  .ev .row{grid-template-columns:138px minmax(0,1fr) auto;gap:10px}
  .ev .row .act{display:none}
  .ev .row .city{font-weight:600}
  .ev .row .city small{font-weight:400}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card .plus{width:36px;height:36px;right:6px;bottom:6px}
  .card .txt{padding:10px 10px 12px}
  .filters{overflow-x:auto;white-space:nowrap;gap:12px}
  .filters select{min-width:120px}
  .foot .fw,.foot .fl{flex-direction:column;align-items:flex-start}
  .foot .copy{text-align:left}
  .co .two{grid-template-columns:1fr}
  html #obo-cart .oc-panel{width:100%}
}