/* The Whole Shop */
.sh-hero{position:relative;overflow:hidden;isolation:isolate;padding:70px 0 54px;text-align:center;background:radial-gradient(ellipse at 50% -10%,rgba(243,198,110,.32),transparent 60%),var(--maroon-deep)}
.sh-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(90deg,var(--red) 0 22px,var(--popcorn) 22px 44px);opacity:.9}
.sh-kick{margin:0 0 10px;font:700 13px var(--label);letter-spacing:.32em;text-transform:uppercase;color:var(--butter)}
.sh-kick .mq-star{color:var(--red)}
.sh-hero h1{position:relative;display:inline-block;margin:0;padding:30px 50px 22px;font:400 clamp(44px,8vw,104px)/1 "Limelight","Rye",serif;letter-spacing:.04em;color:var(--popcorn);text-shadow:4px 4px 0 var(--shadow);
  border:4px solid var(--butter);border-radius:18px;box-shadow:0 0 0 6px var(--red),0 0 0 10px var(--butter),8px 14px 0 10px var(--shadow)}
.sh-hero h1::before,.sh-hero h1::after{content:"";position:absolute;inset:7px;border-radius:12px;pointer-events:none;border:6px dotted #FFE7A3;filter:drop-shadow(0 0 4px #FFD36B)}
.sh-hero h1::after{border-color:transparent;border-top-color:#FFE7A3;border-bottom-color:#FFE7A3;opacity:0;animation:mqBlink 1.2s steps(1) infinite}
.sh-hero h1::before{animation:mqDim 1.2s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.sh-hero h1::before,.sh-hero h1::after{animation:none}}
.sh-hero .lede{max-width:56ch;margin:28px auto 0;font-size:clamp(17px,1.6vw,20px);color:var(--muted);text-wrap:balance}
.sh-search{position:relative;max-width:640px;margin:28px auto 0}
.sh-search svg{position:absolute;left:20px;top:50%;width:22px;height:22px;transform:translateY(-50%);color:var(--maroon-ink)}
.sh-search input{width:100%;font:500 18px var(--body);padding:19px 20px 18px 56px;border-radius:40px;border:3px solid var(--butter);background:var(--popcorn);color:var(--maroon-ink);box-shadow:5px 5px 0 var(--shadow);-webkit-appearance:none}
.sh-search input::placeholder{color:#8a6a63}
.sh-search input:focus{outline:3px solid var(--red);outline-offset:3px}
.sh-perks{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:22px 0 0;padding:0;font:700 13px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sh-perks b{color:var(--butter)}
html[data-world="candy"] .sh-hero{background:radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.8),transparent 60%),#FFD9EA}
html[data-world="candy"] .sh-hero h1{font-family:"Shrikhand","Limelight",cursive;color:#fff;text-shadow:4px 4px 0 #3A1152;background:linear-gradient(90deg,#C2105F,#7A2BC9);border-color:#3A1152;box-shadow:0 0 0 6px #FFE14D,0 0 0 10px #3A1152,8px 14px 0 10px rgba(58,17,82,.25)}
html[data-world="candy"] .sh-hero::after{background:repeating-linear-gradient(90deg,#FF5FA2 0 22px,#fff 22px 44px)}
html[data-world="candy"] .sh-search input{border-color:#3A1152;background:#fff;box-shadow:5px 5px 0 #3A1152}
html[data-world="candy"] .sh-perks b,html[data-world="candy"] .sh-kick{color:#C2105F}

/* aisles: ticket stubs that stick under the header */
.sh-bar{position:sticky;top:var(--hh,72px);z-index:15;background:var(--maroon-ink);border-bottom:1.5px solid var(--line);box-shadow:0 10px 20px -14px rgba(0,0,0,.6)}
.sh-aisles{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 92%,transparent)}
.sh-aisles::-webkit-scrollbar{display:none}
.sh-aisles button{flex:none;display:inline-flex;align-items:baseline;gap:7px;cursor:pointer;color:var(--popcorn);background:transparent;border:2px dashed var(--line);border-radius:8px;padding:10px 14px 8px;font:700 13px var(--label);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  -webkit-mask:radial-gradient(circle 6px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.sh-aisles button small{font:600 11px var(--body);letter-spacing:0;opacity:.7}
.sh-aisles button:hover{border-color:var(--butter)}
.sh-aisles button[aria-pressed=true]{background:var(--butter);color:var(--maroon-ink);border-style:solid;border-color:var(--butter)}
html[data-world="candy"] .sh-aisles button[aria-pressed=true]{background:#C2105F;border-color:#C2105F;color:#fff}

.sh-shop{padding-bottom:80px}
.sh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:30px 0 18px}
.sh-head h2{margin:0;font:700 clamp(26px,3.4vw,40px)/1.05 var(--label);letter-spacing:.06em;text-transform:uppercase}
.sh-head p{margin:6px 0 0;color:var(--muted);font-size:14px}
.sh-sort{display:flex;align-items:center;gap:8px;font:700 12px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sh-sort select{font:600 14px var(--body);color:var(--popcorn);background:transparent;border:2px solid var(--line);border-radius:8px;padding:9px 10px}
.sh-sort select option{color:#240503}

.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.sh-card{display:flex;flex-direction:column;background:var(--popcorn);color:var(--maroon-ink);border-radius:14px;border:2.5px solid var(--popcorn);overflow:hidden;box-shadow:5px 5px 0 var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.sh-card:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--shadow)}
.sh-card.in{border-color:var(--red)}
.sh-pic{position:relative;display:block;aspect-ratio:1;padding:0;border:0;background:#fff;cursor:zoom-in;overflow:hidden}
.sh-pic img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .3s}
.sh-card:hover .sh-pic img{transform:scale(1.05)}
.sh-pic .nb-ph{display:grid;width:100%;height:100%;font-size:54px}
.sh-n,.sh-low{position:absolute;left:8px;top:8px;font:700 11px var(--label);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px 4px;border-radius:6px;background:var(--red);color:#fff}
.sh-low{left:auto;right:8px;background:#240503}
.sh-card h3{margin:0;padding:12px 14px 4px;flex:1}
.sh-card h3 a{color:inherit;text-decoration:none;cursor:pointer;font:700 15px/1.3 var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sh-card h3 a:focus-visible{outline:2px solid var(--red)}
.sh-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 14px 14px}
.sh-row b{font:700 18px var(--label)}
.sh-row b small{font:600 11px var(--label);letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.sh-add{cursor:pointer;font:700 12px var(--label);letter-spacing:.14em;text-transform:uppercase;padding:10px 13px 8px;border-radius:8px;border:2px solid #240503;background:#8E0B0B;color:#fff;box-shadow:2px 2px 0 #240503;transition:transform .1s}
.sh-add:hover{transform:translate(-1px,-1px)}
.sh-add:active{transform:translate(1px,1px);box-shadow:none}
.sh-add.alt{background:#F3C66E;color:#240503}
html[data-world="candy"] .sh-card{background:#fff;border-color:#3A1152;box-shadow:5px 5px 0 #3A1152}
html[data-world="candy"] .sh-card.in{border-color:#C2105F}
html[data-world="candy"] .sh-add{background:#C2105F;border-color:#3A1152;box-shadow:2px 2px 0 #3A1152}
html[data-world="candy"] .sh-add.alt{background:#FFE14D;color:#3A1152}
.sh-none{text-align:center;padding:50px 10px;color:var(--muted)}
.sh-more{display:block;margin:30px auto 0;cursor:pointer;font:700 14px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--popcorn);background:none;border:2px solid var(--line);border-radius:8px;padding:14px 22px 12px}
.sh-live{text-align:center;margin-top:26px;font-size:12px;color:var(--muted)}
.sh-fly{position:fixed;z-index:99;width:28px;height:28px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 35%,#fff,#F3C66E 60%,#C9963A);box-shadow:0 0 0 2px #240503}
@media (max-width:640px){
  .sh-hero{padding:46px 0 40px}.sh-hero h1{padding:16px 22px 12px}
  .sh-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sh-card h3{padding:10px 10px 2px}.sh-card h3 button{font-size:14px}
  .sh-row{padding:6px 10px 10px;flex-wrap:wrap}.sh-row b{font-size:16px}
  .sh-add{padding:9px 10px 7px;font-size:11px}
  .sh-head{flex-wrap:wrap;padding-top:22px}
}
/* Everything view: one shelf per aisle */
.sh-grid.grouped{display:block}
.sh-sec{margin:0 0 44px}
.sh-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;padding-bottom:10px;border-bottom:2px dashed var(--line)}
.sh-sec-h h3{margin:0;font:400 clamp(24px,3vw,34px)/1.1 "Limelight","Rye",serif;letter-spacing:.02em;color:var(--butter)}
html[data-world="candy"] .sh-sec-h h3{font-family:"Shrikhand",cursive;color:#C2105F}
.sh-sec-h button{flex:none;background:none;border:0;cursor:pointer;color:var(--popcorn);font:700 13px var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.sh-sec-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
@media (max-width:640px){.sh-sec-g{grid-template-columns:repeat(2,1fr);gap:12px}.sh-sec-h{flex-wrap:wrap}}
.sh-pm{margin-left:auto;margin-right:16px;font:700 13px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--butter)}
html[data-world="candy"] .sh-pm{color:#C2105F}
@media (max-width:640px){.sh-pm{order:3;width:100%;margin:6px 0 0}}
/* cards always use dark ink, in both the Popcorn and Candy looks */
.sh-card{color:#240503}
html[data-world="candy"] .sh-card{color:#3A1152}
.sh-add{white-space:nowrap}
.sh-row b{white-space:nowrap}
.sh-row b small{white-space:nowrap}
html[data-world="candy"] .sh-search svg{color:#3A1152}
.sh-row b small{display:block;margin-top:2px}
html[data-world="candy"] .sh-aisles button[aria-pressed=true] small{opacity:1;color:#fff}