/* Dope Dash — bold menu: full-screen showcase, image-led cards, overlay type */
body{overflow-x:clip}
.art-green{--card-bg:radial-gradient(circle at 62% 42%,#35d58a59,transparent 58%),linear-gradient(155deg,#124232,#07140f 70%);--glow:#23f778}
.art-blue{--card-bg:radial-gradient(circle at 62% 42%,#47b6ff59,transparent 58%),linear-gradient(155deg,#143462,#070e1d 70%);--glow:#47eaff}
.art-rose{--card-bg:radial-gradient(circle at 62% 42%,#ff6fb059,transparent 58%),linear-gradient(155deg,#5a1a3d,#16070f 70%);--glow:#ff7ab8}
.art-purple{--card-bg:radial-gradient(circle at 62% 42%,#b48cff59,transparent 58%),linear-gradient(155deg,#3a2270,#0f0920 70%);--glow:#b48cff}
.art-gold{--card-bg:radial-gradient(circle at 62% 42%,#ffd25a59,transparent 58%),linear-gradient(155deg,#574213,#161006 70%);--glow:#ffe265}

/* ---------- Full-screen showcase ---------- */
.showcase{position:relative;width:100vw;margin:0 calc(50% - 50vw) 56px}
.showcase-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline-offset:-4px}
.showcase-track::-webkit-scrollbar{display:none}
.slide{--off:0;--abs:0;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;height:min(calc(100svh - 110px),920px);min-height:560px;padding:0 6vw;background:var(--card-bg);perspective:1400px}
.slide:before{content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--glow) 22%,transparent),transparent 65%);z-index:-1;pointer-events:none}
.slide-index{position:absolute;right:3vw;bottom:-5vw;font:800 26vw/1 'Space Grotesk',sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #ffffff16;z-index:-1;pointer-events:none;user-select:none}
.slide-stage{grid-column:2;grid-row:1;position:relative;height:100%;display:grid;place-items:center;animation:slideFloat 7s ease-in-out infinite}
.slide-product{max-width:92%;max-height:80%;object-fit:contain;filter:drop-shadow(0 50px 45px #000b) drop-shadow(0 0 60px color-mix(in srgb,var(--glow) 20%,transparent));transform:translateX(calc(var(--off) * -35%)) rotateY(calc(var(--off) * -38deg)) scale(calc(1 - var(--abs) * .3));transition:opacity .4s}
.slide-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s}
.slide-stage.gl-on .slide-gl{opacity:1}
.slide-stage.gl-on .slide-product{opacity:0}
.slide-copy{grid-column:1;grid-row:1;position:relative;z-index:2;max-width:760px;transform:translateX(calc(var(--off) * 45%));opacity:calc(1 - var(--abs) * 1.3)}
.slide-kicker{display:inline-block;padding:8px 14px;border-radius:99px;background:#ffffff14;border:1px solid #ffffff22;backdrop-filter:blur(10px);font:700 12px 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--glow)}
.slide-title{margin:18px -14vw 18px 0;font:800 clamp(56px,8.6vw,156px)/.86 'Space Grotesk',sans-serif;letter-spacing:-.055em;text-transform:uppercase;color:#fff;text-shadow:0 8px 50px #000a;overflow-wrap:anywhere}
.slide-desc{max-width:420px;margin:0 0 26px;color:#c9d5e6;font-size:15px;line-height:1.6}
.slide-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.slide-price{font:700 clamp(30px,3vw,44px) 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin-right:8px}
.slide-buy .button{padding:15px 26px;font-weight:800;text-decoration:none}
.showcase-controls{position:absolute;right:6vw;bottom:28px;display:flex;align-items:center;gap:14px;z-index:3}
.showcase-nav{width:52px;height:52px;border-radius:50%;border:1px solid #ffffff30;background:#0a0f1c99;backdrop-filter:blur(12px);font-size:20px;transition:background .2s,transform .2s}
.showcase-nav:hover{background:#ffffff1f;transform:scale(1.06)}
.showcase-dots{display:flex;gap:8px}
.showcase-dots button{width:10px;height:10px;padding:0;border:0;border-radius:99px;background:#ffffff45;transition:width .3s,background .3s}
.showcase-dots button[aria-selected=true]{width:34px;background:var(--lime,#23f778)}
@keyframes slideFloat{0%,100%{translate:0 -10px}50%{translate:0 12px}}

/* ---------- Bold menu header & categories ---------- */
#shopSection{margin-top:56px}
#shopSection h2{font:800 clamp(40px,5.5vw,76px)/.95 'Space Grotesk',sans-serif;letter-spacing:-.05em;text-transform:uppercase}
#shopSection span{font-weight:700;color:var(--lime,#23f778)}
.filters{position:sticky;top:0;z-index:20;backdrop-filter:blur(16px);background:#080c16d9!important;border-color:#ffffff14!important}
.filter{font:800 15px 'Space Grotesk',sans-serif!important;letter-spacing:.02em;text-transform:uppercase;padding:13px 22px!important}

/* ---------- Image-led menu cards with overlay text ---------- */
#productGrid.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;perspective:1400px}
.menu-card{--rx:0deg;--ry:0deg;position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;isolation:isolate;background:var(--card-bg);border:1px solid #ffffff14;box-shadow:0 18px 40px #0005;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease,box-shadow .3s,border-color .3s}
.menu-card:hover{border-color:color-mix(in srgb,var(--glow) 45%,transparent);box-shadow:0 28px 60px #0007,0 0 40px color-mix(in srgb,var(--glow) 14%,transparent)}
.menu-card-stage{position:absolute;inset:0;display:grid;place-items:center;padding:9% 12% 40%}
.menu-card-img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 26px 22px #000a);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.menu-card:hover .menu-card-img{transform:translateY(-8px) scale(1.08) rotate(-2deg)}
.menu-card-emoji{font-size:110px;filter:drop-shadow(0 20px 20px #0008);transition:transform .5s}
.menu-card:hover .menu-card-emoji{transform:translateY(-8px) rotate(-8deg)}
.menu-card-tag{position:absolute;top:16px;left:16px;padding:7px 12px;border-radius:99px;background:var(--glow);color:#07120c;font:800 11px 'DM Sans',sans-serif;letter-spacing:1.2px;text-transform:uppercase;z-index:2}
.menu-card-overlay{position:absolute;inset:auto 0 0;padding:22px 20px 20px;background:linear-gradient(to top,#04070ef7 0%,#04070ed0 58%,transparent);z-index:2}
.menu-card-kicker{font:700 11px 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--glow)}
.menu-card h3{margin:6px 0 6px;font:800 clamp(22px,2.1vw,30px)/1 'Space Grotesk',sans-serif;letter-spacing:-.035em;text-transform:uppercase;color:#fff}
.menu-card p{margin:0;font-size:12px;line-height:1.45;color:#a9b8cc;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.menu-card-buy{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.menu-card-price{font:700 24px 'Space Grotesk',sans-serif;letter-spacing:-.04em}
.menu-card-add{padding:11px 18px;border:0;border-radius:99px;background:var(--glow);color:#07120c;font:800 14px 'DM Sans',sans-serif;box-shadow:0 6px 22px color-mix(in srgb,var(--glow) 30%,transparent);transition:transform .2s}
.menu-card-add:hover{transform:scale(1.06)}
.menu-enter{animation:menuArrival .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*35ms)}
#staffLinks{display:inline-flex;gap:6px}#staffLinks a{text-decoration:none}
.account-tabs a{text-decoration:none;text-align:center}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  /* The page header stays compact so the slide fills the first screen. */
  .pagehead{margin:14px 0 18px!important;gap:12px!important}.pagehead h1{font-size:30px!important}.pagehead p{display:none}
  .slide{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:end;height:calc(100svh - 210px);min-height:540px;max-height:860px;padding:12px 20px 92px}
  .slide-stage{grid-column:1;grid-row:1;height:100%;min-height:0}
  .slide-product{max-height:84%}
  .slide-copy{grid-column:1;grid-row:2;margin-top:-6vh}
  .slide-title{margin:14px 0 12px;font-size:clamp(46px,13vw,84px)}
  .slide-desc{font-size:13px;margin-bottom:18px}
  .slide-index{font-size:44vw;bottom:auto;top:4vh}
  .showcase-controls{left:20px;right:20px;bottom:24px;justify-content:space-between}
}
@media(max-width:520px){
  #productGrid.product-grid{grid-template-columns:1fr;gap:18px}
  .menu-card{aspect-ratio:1/1.05}
  .menu-card h3{font-size:28px}
  .filter{padding:11px 16px!important;font-size:13px!important}
  .slide-buy .button.ghost{display:none}
}
@media(prefers-reduced-motion:reduce){
  .slide-stage{animation:none}
  .slide-product,.slide-copy{transform:none;opacity:1}
  .menu-card{transform:none}
}