/* Shop: record-shop cabinet at night — warm light ceiling, three shelves (7" / 10" / 12"), hanging price tags, a wooden counter. */
body[data-view="shop"]{background:#120a07}
.shop{padding-bottom:40px;background:linear-gradient(#1a0d08,#120a07 60%,#0e0806)}
.store{position:relative;height:100svh;min-height:660px;max-height:980px;overflow:hidden;isolation:isolate;
  --cnt:128px;--sign:clamp(26px,8.6vw,44px);--top:calc(var(--sign) * 1.85 + 52px);   /* cabinet starts below the sign + tagline at any width */
  background:radial-gradient(120% 70% at 50% 0%,#4a2112,#24110a 55%,#120906)}

/* ceiling: warm light panels between dark beams, receding toward the wall */
.ceil{position:absolute;left:-30%;right:-30%;top:0;height:calc(var(--top) + 6px);perspective:260px;overflow:hidden;z-index:1}
.panels{position:absolute;left:0;right:0;bottom:-6px;height:260%;transform-origin:50% 100%;transform:rotateX(58deg);
  background:
    linear-gradient(90deg,#24110a 0 3%,transparent 3% 100%) 0 0/16.66% 100%,
    linear-gradient(#24110a 0 7%,transparent 7% 100%) 0 0/100% 25%,
    radial-gradient(ellipse at 50% 70%,#f3c486,#d38c4c 45%,#97502a 80%);
  box-shadow:0 0 60px 20px rgba(240,170,100,.4)}
.ceil::after{content:"";position:absolute;inset:auto 0 0;height:20px;background:linear-gradient(#24110a,#170b06)}
.store::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(130% 90% at 50% 40%,transparent 60%,rgba(8,4,2,.55))}

/* header over the ceiling, in the house script */
.st-head{position:absolute;left:0;right:0;top:calc(6px + env(safe-area-inset-top));z-index:6;text-align:center;padding:0 8px}
.st-head h1{margin:4px 0 0;font-size:var(--sign);font-weight:400;color:#fff8ee;text-shadow:0 2px 3px rgba(50,16,4,.85),0 0 22px rgba(50,16,4,.7)}
.st-head h1 .ftr-sign i{color:#fff1de}
.st-head p{display:inline-block;max-width:100%;margin:2px 0 0;padding:2px 10px;border-radius:999px;background:rgba(30,12,5,.55);font:400 clamp(11px,3.6vw,13.5px)/1.45 var(--thai);color:#fff1de;white-space:nowrap}

/* the cabinet: wood canvas behind, three shelves on top */
.cabinet{position:absolute;left:0;right:0;top:var(--top);bottom:calc(var(--cnt) - 8px);z-index:2;width:min(100%,560px);margin:0 auto;
  display:grid;grid-template-rows:repeat(3,1fr);grid-template-columns:minmax(0,1fr);gap:0;padding:8px 8px 0;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 20px 40px rgba(0,0,0,.6)}
.cab-wood{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.shelf{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.shelf:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;border-radius:2px}
.sh-back{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;gap:5px;padding:0 0 0 4px;overflow:hidden;
  background:radial-gradient(70% 80% at 50% 0%,rgba(255,196,130,.2),transparent 70%),linear-gradient(rgba(14,6,3,.66),rgba(14,6,3,.4));
  box-shadow:inset 0 16px 18px -8px rgba(0,0,0,.75),inset 8px 0 10px -8px rgba(0,0,0,.55),inset -8px 0 10px -8px rgba(0,0,0,.55);transition:background .3s}
.shelf:hover .sh-back,.shelf:focus-visible .sh-back{background:radial-gradient(70% 90% at 50% 0%,rgba(255,206,140,.34),transparent 72%),linear-gradient(rgba(14,6,3,.58),rgba(14,6,3,.34))}
.plank{flex:none;height:14px;background:linear-gradient(rgba(255,214,170,.32),rgba(255,214,170,.06) 30%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.45));box-shadow:0 7px 9px -2px rgba(0,0,0,.55)}

/* stock on the shelf */
.spines{display:flex;align-items:flex-end;gap:1px;height:86%;flex:none}
.spines.end{position:relative;z-index:0;flex:1 0 80px;min-width:80px;justify-content:flex-end;overflow:hidden;align-self:flex-end;height:90%}   /* fills from the last sleeve to the wall, behind the tag */
/* the row of sleeves: each slot shrinks so the row fits, the sleeve inside keeps its size and overlaps the next */
.row-stock{position:relative;z-index:1;flex:0 1 auto;min-width:0;align-self:stretch;display:flex;align-items:flex-end;padding-left:1.5px}
.slot{flex:0 1 calc(var(--s) * .55);min-width:calc(var(--s) * .2);height:min(var(--s),84%)}   /* every sleeve keeps a visible slice */
.slot:last-child{flex:0 0 var(--s)}
.slot:first-child .stock{animation:pull 1.4s var(--ease) both;animation-delay:calc(var(--i) * 260ms + 500ms)}
.spines i{flex:none;width:var(--sw);height:var(--sh);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#000),var(--c) 40%,color-mix(in srgb,var(--c) 60%,#000));filter:brightness(.85) sepia(.2)}
.stock{position:relative;display:block;flex:none;aspect-ratio:1;height:100%;
  box-shadow:3px 4px 8px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.25);transition:translate .3s var(--ease)}
.stock::after{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:overlay;opacity:.5;box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
/* album-cover faces (sizes follow the sleeve, --s) */
.stock{overflow:hidden;background:var(--grain-soft),var(--bg);color:var(--ink,#efe6d6);font-style:normal}
.stock span,.stock b,.stock i{font-style:normal}
.cv-cat{position:absolute;right:5%;bottom:4%;font:400 calc(var(--s) * .055)/1 var(--mono);letter-spacing:.06em;opacity:.75}
.cv-vert{position:absolute;left:3%;top:4%;bottom:4%;writing-mode:vertical-rl;transform:rotate(180deg);font:600 calc(var(--s) * .3)/.86 var(--thai);letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.cv-badge{position:absolute;right:5%;top:6%;padding:2% 3%;background:#1a1410;color:#efe6d6;font:700 calc(var(--s) * .045)/1.05 var(--thai);letter-spacing:.04em;max-width:34%;text-align:center;box-shadow:0 0 0 1px #efe6d6 inset}
.is-vertical .cv-cat{color:var(--ink)}
.cv-title{position:absolute;left:6%;top:6%;right:6%;display:flex;flex-direction:column;font:600 calc(var(--s) * .2)/.84 var(--thai);letter-spacing:-.04em;color:var(--ink)}
.cv-title b{font-weight:600}
.cv-block{position:absolute;left:6%;bottom:8%;width:36%;height:30%;background:var(--grain-soft),var(--blk)}
.cv-tracks{position:absolute;left:48%;bottom:9%;display:flex;flex-direction:column;gap:2px;font:400 calc(var(--s) * .05)/1.1 var(--mono);color:var(--ink);opacity:.8}
.is-title .cv-cat{display:none}
.cv-sun{position:absolute;left:50%;top:58%;width:74%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 45% 40%,color-mix(in srgb,var(--sun) 80%,#fff),var(--sun) 55%,color-mix(in srgb,var(--sun) 70%,#000));box-shadow:0 0 calc(var(--s) * .12) color-mix(in srgb,var(--sun) 60%,transparent)}
.cv-top{position:absolute;left:6%;right:6%;top:6%;display:flex;justify-content:space-between;font:700 calc(var(--s) * .065)/1 var(--mono);letter-spacing:.08em;color:#efe6d6}
.cv-serif{position:absolute;left:6%;bottom:5%;font:italic 500 calc(var(--s) * .15)/1 var(--serif);color:#efe6d6}
.is-neon{background:var(--grain-soft),radial-gradient(90% 70% at 50% 45%,color-mix(in srgb,var(--glow) 22%,var(--bg)),var(--bg))}
.is-neon .cv-script{position:absolute;left:4%;right:4%;top:34%;font:400 calc(var(--s) * .26)/1 var(--script);text-align:center;color:#fff4e6;white-space:nowrap;transform:rotate(-8deg);
  text-shadow:0 0 2px #fff,0 0 6px var(--glow),0 0 14px var(--glow),0 0 28px var(--glow)}
.cv-small{position:absolute;left:6%;top:6%;font:400 calc(var(--s) * .05)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#efe6d6;opacity:.8}
.is-neon .cv-cat,.is-sun .cv-cat{color:#efe6d6}
.cv-hole{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--lc) 0 13%,#120d0b 13.5% 15%,#1a1410 15.5% 30%,transparent 30.5%)}
.is-die .cv-cat{color:#1a1410}
.shelf:hover .stock,.shelf:focus-visible .stock{translate:0 -6px}
.shelf:active .stock{translate:0 -2px}
/* display stand, front view */
.stand{position:relative;flex:none;align-self:flex-end;width:calc(var(--d) * 1.16);height:calc(var(--d) * 1.22);margin-right:0;z-index:1}
.st-rack{position:absolute;left:3%;right:3%;top:0;bottom:14%;border:2px solid #c8c2b8;border-bottom:0;border-radius:3px 3px 0 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.25);opacity:.8}
.st-sl{position:absolute;bottom:16%;aspect-ratio:1;box-shadow:2px 3px 6px rgba(0,0,0,.5)}
.st-sl.a{left:6%;width:88%;background:var(--grain-soft),linear-gradient(160deg,#6e3a22,#4e2414)}
.st-sl.b{left:11%;width:82%;bottom:17%;background:var(--grain-soft),linear-gradient(160deg,#efe6d6,#d9c9ad);box-shadow:inset 0 0 0 calc(var(--d) * .06) #b5402c,2px 3px 6px rgba(0,0,0,.45)}
.st-disc{position:absolute;left:50%;bottom:8%;width:var(--d);height:var(--d);margin-left:calc(var(--d) * -.5);border-radius:50%;
  background:radial-gradient(circle,transparent 30%,#0a0807 30.5% 32%,transparent 32.5%),repeating-radial-gradient(circle,#1c1613 0 .7px,#0b0908 .7px 2px);
  box-shadow:0 0 0 1px rgba(255,235,210,.08),3px 4px 10px rgba(0,0,0,.6)}
.st-disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 25deg,transparent,rgba(255,238,210,.14) 7%,transparent 15%,transparent 50%,rgba(255,238,210,.1) 57%,transparent 65%)}
.st-disc b{position:absolute;left:34%;top:34%;width:32%;height:32%;border-radius:50%;background:var(--grain-soft),var(--lc);box-shadow:0 0 0 2px #0d0a08}
.st-disc b::after{content:"";position:absolute;left:44%;top:44%;width:12%;height:12%;border-radius:50%;background:#0a0807}
.st-ticket{position:absolute;right:6%;bottom:13%;transform:rotate(5deg);transform-origin:50% 100%}
.st-ticket .ticket{--tw:calc(var(--d) * .26);filter:drop-shadow(1px 2px 3px rgba(0,0,0,.55))}
.st-base{position:absolute;left:0;right:0;bottom:0;height:24%;display:grid;place-items:center;border-radius:2px;
  background:var(--grain-soft),linear-gradient(#e0b07a 0 9%,#c98f5c 10%,#a8703f 70%,#8a5a32);box-shadow:0 4px 8px rgba(0,0,0,.55),inset 0 -2px 0 rgba(0,0,0,.2)}
.st-base::before{content:"";position:absolute;inset:-30% -10% 0;background:radial-gradient(60% 60% at 50% 70%,rgba(255,150,60,.35),transparent 70%);pointer-events:none}
.st-neon{position:relative;font:900 calc(var(--d) * .2)/1 var(--dot);font-variation-settings:"ROND" 100;letter-spacing:.02em;word-spacing:-.1em;white-space:nowrap;color:#fff1dc;
  -webkit-text-stroke:.03em #fff1dc;text-shadow:0 0 2px #ffcf8e,0 0 6px #ff9a3c,0 0 12px rgba(255,120,40,.8);animation:neon 5s steps(1) infinite}
@keyframes neon{0%,93%,97%{opacity:1}95%{opacity:.55}}
.shelf:hover .st-disc,.shelf:focus-visible .st-disc{translate:0 -4px}
.st-disc{transition:translate .3s var(--ease)}
@keyframes pull{35%{translate:0 -12px}70%{translate:0 0}}


/* hanging price tag (from the first version, tidied up) */
.tag{position:absolute;right:14px;bottom:8px;z-index:3;display:flex;flex-direction:column;align-items:center;width:72px;padding:14px 6px 7px;
  background:var(--grain-soft),linear-gradient(#f4ecdc,#e4d6bd);color:var(--ink);border-radius:5px 5px 3px 3px;clip-path:polygon(22% 0,78% 0,100% 16%,100% 100%,0 100%,0 16%);
  box-shadow:0 4px 8px rgba(0,0,0,.45);transform-origin:50% -18px;transform:rotate(-4deg);transition:transform .4s var(--ease)}
.tag::before{content:"";position:absolute;top:5px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#3a2418;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.tag .string{position:absolute;bottom:100%;left:50%;width:1px;height:18px;background:rgba(240,225,200,.7)}
.tg-name{font:400 10.5px/1.2 var(--thai);color:#5a4434}
/* LED price panel: yellow dots on dark brown */
.tag .tg-led{display:flex;justify-content:center;width:100%;margin:3px 0 4px;padding:4px 0 3px;border-radius:3px;background:radial-gradient(120% 140% at 50% 0%,#3b2216,#22120a);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.5);
  font:900 22px/1 var(--dot);color:#f7c843;text-shadow:0 0 5px rgba(247,200,67,.55)}
.tg-sec{font:400 10px/1 var(--mono);color:#6b5646}
.shelf:hover .tag,.shelf:focus-visible .tag{transform:rotate(3deg)}
.tag{animation:sway 2.4s ease-in-out both;animation-delay:calc(var(--i) * 260ms + 700ms)}
@keyframes sway{25%{rotate:7deg}55%{rotate:-4deg}80%{rotate:2deg}}

/* counter */
.counter{position:absolute;left:0;right:0;bottom:0;height:var(--cnt);z-index:5}
.ct-top{height:16px;background:linear-gradient(#8a4a2a,#5e2f17 55%,#341a0c);box-shadow:0 -1px 0 rgba(255,200,150,.3),0 8px 16px rgba(0,0,0,.55)}
.ct-front{height:calc(100% - 16px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 16px calc(8px + env(safe-area-inset-bottom));
  background:repeating-linear-gradient(90deg,#33190c 0 46px,#271308 46px 48px),#33190c;box-shadow:inset 0 14px 18px -8px rgba(0,0,0,.6)}
.ct-hint{display:flex;align-items:center;gap:10px;margin:0;font:400 15px/1.4 var(--thai);color:#ffe9d2}
.ct-hint .tap{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(224,168,103,.6);animation:tap 1.6s ease-out infinite}
@keyframes tap{70%,100%{box-shadow:0 0 0 12px rgba(224,168,103,0)}}
.soldout{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px;border-radius:12px;background:rgba(194,70,46,.22);border:1px solid rgba(255,160,120,.45);text-align:center}
.soldout b{font:600 15px/1.3 var(--thai);color:#ffd2bd}
.soldout span{font:300 12.5px/1.4 var(--thai);color:#ffe9d2}
.ct-plate{padding:3px 10px;border-radius:3px;background:linear-gradient(#e6c48c,#b48a4a);color:#2a160a;font:700 11px/1.4 var(--mono);letter-spacing:.08em;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.resume{display:flex;align-items:center;gap:.6rem;min-height:44px;max-width:100%;padding:0 1rem;border-radius:999px;border:1px solid rgba(255,200,150,.45);
  background:rgba(20,8,3,.55);color:#ffd09a;font:400 14px var(--thai);cursor:pointer}
.resume .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#ffb070;box-shadow:0 0 10px #ffb070}

/* below the fold */
.receipt{position:relative;z-index:3;width:min(calc(100% - 32px),340px);margin:30px auto 0;padding:20px 22px 16px;color:var(--ink);transform:rotate(-1deg);
  background:var(--grain-soft),linear-gradient(var(--paper),var(--paper-2));box-shadow:0 14px 30px -10px rgba(0,0,0,.7);
  -webkit-mask:radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/14px 100%;mask:radial-gradient(circle 5px at 50% 100%,transparent 98%,#000) 0 0/14px 100%}
.receipt h2{margin:0 0 10px;padding-bottom:8px;border-bottom:1.5px dashed rgba(26,20,16,.35);text-align:center;font:500 16px/1.3 var(--thai)}
.receipt ol{margin:0;padding:0;list-style:none;counter-reset:r}
.receipt li{counter-increment:r;display:flex;gap:10px;padding:5px 0;font:400 15px/1.5 var(--thai)}
.receipt li::before{content:counter(r) ".";min-width:1.4em;font:700 14px/1.6 var(--mono);color:var(--rust)}
.receipt .r-foot{margin:10px 0 4px;padding-top:8px;border-top:1.5px dashed rgba(26,20,16,.35);text-align:center;font:400 12px var(--mono);color:#5a4a3c}
.foot{text-align:center;margin-top:34px;color:rgba(242,237,228,.62);font:400 22px/1.2 var(--script)}