/* Scroggyverse — shared base stylesheet.
   Structure + components for every Scroggy storefront (Dopamart, DopaDash…).
   Contains NO colour literals and NO :root block: every brand ships its own
   theme.css defining the tokens this file consumes. Change layout here once,
   both sites get it. */

/* Scroggy's Dopamart — house style. Screenprinted wizard-arcade attitude
   applied to a chaotic Wish-style bazaar. No real money lives here. */


/* Dop Coin symbol = the logo star. Inherits the surrounding text colour. */
.dop-mark{display:inline-block; width:.8em; height:.8em; margin-right:.08em;
  background:currentColor; vertical-align:-0.07em;
  -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); font-weight:300; line-height:1.6;
  color:var(--paper); background:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3{margin:0}
.wrap{width:min(100% - 40px,var(--wrap)); margin-inline:auto}
.display{font-family:var(--display); font-weight:400; letter-spacing:-.02em}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 6px;
}

/* grain + backdrop -------------------------------------------------------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* star glyph -------------------------------------------------------------- */
.star{width:1em; height:1em; fill:currentColor; flex:none}

/* ===== header ============================================================ */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--ink) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap:18px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:10px; flex:none}
.brand .star{color:var(--accent); font-size:30px}
.brand-word{font-family:var(--display); font-size:23px; line-height:1; color:var(--paper)}
.brand-word .dop{color:var(--accent)}
.brand-word small{display:block; margin-top:5px; font-family:var(--body); font-weight:700;
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}

.searchbar{
  flex:1 1 auto; display:flex; align-items:center; gap:8px; min-width:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:8px 8px 8px 16px;
}
.searchbar:focus-within{border-color:var(--accent)}
.searchbar input{
  flex:1; background:none; border:0; outline:0; color:var(--paper);
  font-size:15px; min-width:0;
}
.searchbar input::placeholder{color:var(--muted)}
.searchbar button{
  border:0; border-radius:999px; background:var(--accent); color:var(--ink);
  font-weight:700; padding:8px 16px; white-space:nowrap;
}

.header-tools{display:flex; align-items:center; gap:10px; flex:none}
.coin-chip{
  display:flex; align-items:center; gap:7px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:7px 14px;
}
.coin-chip .star{color:var(--coin); font-size:15px}
.coin-chip b{font-weight:700; color:var(--paper); font-variant-numeric:tabular-nums}
.coin-chip small{color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.cart-btn{
  position:relative; display:flex; align-items:center; gap:8px;
  background:var(--accent); color:var(--ink); border:0; font-weight:700;
  border-radius:999px; padding:9px 16px;
}
.cart-count{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:999px;
  background:var(--deal); color:var(--on-deal); font-size:11px; font-weight:700;
  border:2px solid var(--ink);
}
.cart-count[hidden]{display:none}

/* category rail */
.cat-rail{
  display:flex; gap:8px; overflow-x:auto; padding:10px 0; scrollbar-width:none;
  border-bottom:1px solid var(--line);
}
.cat-rail::-webkit-scrollbar{display:none}
.chip{
  flex:none; border:1px solid var(--line); background:var(--surface);
  color:var(--paper); border-radius:999px; padding:8px 14px; font-size:13px;
  font-weight:700; white-space:nowrap; transition:.15s;
}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--ink); border-color:var(--accent)}

/* ===== scroggygames.com corner badge ===================================== */
#sgBadge{
  position:fixed; right:14px; bottom:14px; z-index:50; display:flex; align-items:center; gap:8px;
  background:color-mix(in srgb,var(--ink) 88%,transparent); border:1px solid var(--line);
  border-radius:999px; padding:7px 14px 7px 10px; backdrop-filter:blur(8px);
  font-family:var(--display); font-size:14px; color:var(--paper); transition:.15s;
}
#sgBadge svg{ width:18px; height:18px; fill:var(--accent); flex:none; }
#sgBadge i{ font-style:normal; color:var(--accent); }
/* On a phone the full badge is a 145px-wide fixed overlay sitting on top of
   whatever content is at the bottom of the screen — which means it quietly
   swallows taps meant for the card underneath. Shrink it to just the star. */
@media (max-width:640px){
  #sgBadge{ right:10px; bottom:10px; padding:7px; font-size:12px; opacity:.85; }
  #sgBadge span{ display:none; }
  #sgBadge svg{ width:20px; height:20px; }
}
/* the badge must never sit on top of an open sheet or the cart drawer */
body:has(.pay.open) #sgBadge,
body:has(.wheel.open) #sgBadge,
body:has(.deals.open) #sgBadge,
body:has(.sheet.open) #sgBadge,
body:has(.drawer.open) #sgBadge{opacity:0; pointer-events:none}

/* ===== poke the wizard (quake + dop coin burst) ========================== */
@keyframes quake {
  8%   { transform: translate(-7px, 4px) rotate(-.45deg); }
  16%  { transform: translate(6px, -5px) rotate(.4deg); }
  24%  { transform: translate(-8px, -3px) rotate(-.35deg); }
  32%  { transform: translate(7px, 5px) rotate(.45deg); }
  40%  { transform: translate(-6px, 2px) rotate(-.3deg); }
  48%  { transform: translate(5px, -4px) rotate(.3deg); }
  56%  { transform: translate(-4px, 3px) rotate(-.25deg); }
  64%  { transform: translate(4px, -2px) rotate(.2deg); }
  72%  { transform: translate(-2px, 2px) rotate(-.15deg); }
  86%  { transform: translate(1px, -1px) rotate(.1deg); }
}
body.quake { animation: quake .12s linear 6; }
.dop-burst-star { position: fixed; }

/* ===== language toggle =================================================== */
.lang-toggle{
  flex:none; border:1px solid var(--line); background:var(--surface); color:var(--paper);
  border-radius:999px; padding:7px 12px; font-size:12px; font-weight:700; transition:.15s;
}

/* ===== sound effects toggle ============================================== */
.sfx-btn{
  flex:none; border:1px solid var(--line); background:var(--surface); color:var(--paper);
  border-radius:999px; padding:7px 10px; font-size:13px; line-height:1; transition:.15s;
}
.sfx-btn[data-on="0"]{opacity:.5}

/* ===== hero strip ======================================================== */
.hero{
  position:relative; z-index:2; overflow:hidden;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
/* animating night sky: deep gradient + moon glow, two twinkling star fields,
   two cloud banks drifting on a seamless one-tile loop */
.night-sky{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle 130px at 76% 20%, var(--sky-glow), transparent 70%),
    radial-gradient(120% 150% at 78% -12%, var(--sky-1) 0%, var(--sky-2) 42%, var(--sky-3) 74%, var(--ink) 100%);
}
.sky-stars{position:absolute; inset:0; background-repeat:repeat}
.sky-stars-a{
  background-image:
    radial-gradient(1px 1px at 22px 34px,#fff,transparent),
    radial-gradient(1px 1px at 110px 12px,#dfe8ff,transparent),
    radial-gradient(1px 1px at 64px 90px,#fff,transparent),
    radial-gradient(1px 1px at 160px 70px,#cfdcff,transparent),
    radial-gradient(1px 1px at 190px 130px,#fff,transparent),
    radial-gradient(1px 1px at 40px 150px,#dfe8ff,transparent),
    radial-gradient(1px 1px at 130px 175px,#fff,transparent);
  background-size:210px 190px;
  opacity:.7; animation:twinkle 2.6s ease-in-out infinite;
}
.sky-stars-b{
  background-image:
    radial-gradient(1.6px 1.6px at 80px 40px,#fff,transparent),
    radial-gradient(1.6px 1.6px at 220px 110px,#ffe9a8,transparent),
    radial-gradient(1.6px 1.6px at 30px 140px,#fff,transparent),
    radial-gradient(1.6px 1.6px at 170px 190px,#dfe8ff,transparent),
    radial-gradient(1.6px 1.6px at 260px 30px,#fff,transparent);
  background-size:300px 220px;
  animation:twinkle 4.4s ease-in-out infinite reverse;
}
.sky-clouds{
  position:absolute; top:0; bottom:0; left:0; width:calc(100% + 1900px);
  background-image:
    radial-gradient(240px 70px at 260px 90px, var(--cloud-1), transparent 70%),
    radial-gradient(330px 85px at 900px 50px, var(--cloud-2), transparent 70%),
    radial-gradient(280px 80px at 1560px 160px, var(--cloud-3), transparent 70%);
  background-size:1900px 420px; background-repeat:repeat-x;
  animation:cloud-drift 150s linear infinite;
}
.sky-clouds::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:calc(100% + 2400px);
  background-image:
    radial-gradient(430px 120px at 400px 300px, var(--cloud-4), transparent 70%),
    radial-gradient(520px 140px at 1500px 350px, var(--cloud-5), transparent 70%);
  background-size:2400px 520px; background-repeat:repeat-x;
  animation:cloud-drift-slow 240s linear infinite;
}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes cloud-drift{from{transform:translateX(0)}to{transform:translateX(-1900px)}}
@keyframes cloud-drift-slow{from{transform:translateX(0)}to{transform:translateX(-2400px)}}

/* spiral emanating from behind Scroggy — anchored to his centre, masked so it
   fades out before it leaves the sky block */
.hero-spiral{
  position:absolute; z-index:2; pointer-events:none;
  --artw:min(34vw,440px);
  --inset:max(20px,(100% - min(100% - 40px,1240px))/2);
  width:min(960px,120vw); aspect-ratio:1;
  right:calc(var(--inset) + var(--artw)/2);
  bottom:calc(var(--artw)*.452 + 90px);
  transform:translate(50%,50%);
  -webkit-mask-image:radial-gradient(circle closest-side,#000 34%,transparent 76%);
  mask-image:radial-gradient(circle closest-side,#000 34%,transparent 76%);
}
.hero-spiral svg{width:100%; height:100%; overflow:visible;
  animation:spiral-spin 80s linear infinite}
.spiral-line{fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; opacity:.4}
.spiral-glow{fill:none; stroke:var(--spiral-glow); stroke-width:12; stroke-linecap:round; opacity:.09}
@keyframes spiral-spin{to{transform:rotate(1turn)}}

.hero-inner{position:relative; z-index:3; display:flex; align-items:center; gap:40px}
.hero-copy{flex:1; min-width:0; padding:60px 0 52px}
.hero .eyebrow{margin-bottom:18px}
.hero h1{font-family:var(--display); font-weight:400; line-height:1.05;
  font-size:clamp(30px,5vw,54px); color:var(--paper)}
.hero h1 em{color:var(--accent); font-style:normal}
.hero p{color:var(--muted); max-width:52ch; margin:12px 0 0}
/* Scroggy stands on the ticker: bottom edge flush with the marquee */
.hero-art{width:min(34vw,440px); flex:none; align-self:flex-end;
  filter:drop-shadow(0 14px 24px var(--scrim-1))}
.marquee{
  position:relative; z-index:3;
  background:var(--accent); color:var(--ink); overflow:hidden; white-space:nowrap;
  font-weight:700; font-size:13px; letter-spacing:.04em;
}
.marquee div{display:inline-block; padding:8px 0; animation:scroll 28s linear infinite}
.marquee span{padding:0 26px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== rails (recommendation shelves) ==================================== */
.rail{position:relative; z-index:2; padding:22px 0 4px}
.rail-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.rail-head h2{font-family:var(--display); font-weight:400; font-size:clamp(20px,2.6vw,30px)}
.rail-head .hint{color:var(--muted); font-size:13px}
.rail-track{display:flex; gap:var(--gap); overflow-x:auto; padding-bottom:10px; scrollbar-width:thin}
.rail-track > *{flex:0 0 210px}

/* ===== product grid ====================================================== */
.feed{position:relative; z-index:2; padding:22px 0 60px}
.feed-title{font-family:var(--display); font-weight:400; font-size:clamp(22px,3vw,34px); margin-bottom:4px}
.feed-sub{color:var(--muted); margin:0 0 16px; font-size:14px}
.feed-tools{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.feed-tools-label{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:2px}
.sort-chip{
  border:1px solid var(--line); background:var(--surface); color:var(--paper);
  border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:700;
  white-space:nowrap; display:inline-flex; align-items:center; gap:5px; transition:.15s;
}
.sort-chip[aria-pressed="true"]{background:var(--accent); color:var(--ink); border-color:var(--accent)}
.sort-chip[aria-pressed="true"] .dop-mark{filter:none}
.grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}

/* ===== product card ====================================================== */
.card{
  display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.card-media{position:relative; aspect-ratio:1/1; background:var(--media-bg); overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.badge-deal{
  position:absolute; top:8px; left:8px; background:var(--deal); color:var(--on-deal);
  font-weight:700; font-size:12px; padding:4px 8px; border-radius:var(--r-control);
}
.badge-cat{
  position:absolute; top:8px; right:8px; background:var(--scrim-1); color:var(--paper);
  font-size:14px; width:28px; height:28px; display:grid; place-items:center;
  border-radius:999px; backdrop-filter:blur(4px);
}
.card-body{display:flex; flex-direction:column; gap:6px; padding:11px 12px 13px; flex:1}
.card-title{
  font-size:13.5px; font-weight:700; line-height:1.35; color:var(--paper);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-price{display:flex; align-items:baseline; gap:7px; margin-top:2px}
.price-now{font-family:var(--display); font-size:19px; color:var(--accent)}
.price-was{font-size:12px; color:var(--muted); text-decoration:line-through}
.card-meta{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
.stars{color:var(--gold); letter-spacing:1px; font-size:12px}
.card-sold{margin-top:auto; padding-top:6px; font-size:11px; color:var(--muted)}
.card-pitch{font-size:11.5px; font-style:italic; color:var(--muted); line-height:1.4}
.card-add{
  margin-top:8px; border:0; border-radius:var(--r-control); background:var(--accent);
  color:var(--ink); font-weight:700; padding:9px; font-size:13px; transition:.15s;
}
.card-add.added{background:var(--gold)}

/* sentinel + loader */
.sentinel{height:1px}
.loader{text-align:center; color:var(--muted); padding:26px; font-size:14px}
.loader .display{color:var(--accent)}

/* ===== product detail page =============================================== */
.pdp{position:relative; z-index:2; padding:26px 0 60px; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start}
.pdp-media{border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden;
  background:var(--media-bg); position:sticky; top:90px}
.pdp-media img{width:100%; aspect-ratio:1/1; object-fit:cover}
.pdp-info h1{font-family:var(--display); font-weight:400; line-height:1.1;
  font-size:clamp(24px,3.2vw,38px); margin-bottom:10px}
.pdp-price{display:flex; align-items:baseline; gap:12px; margin:14px 0}
.pdp-price .now{font-family:var(--display); font-size:40px; color:var(--accent)}
.pdp-price .was{font-size:16px; color:var(--muted); text-decoration:line-through}
.pdp-price .save{background:var(--deal); color:var(--on-deal); font-weight:700; font-size:13px;
  padding:4px 9px; border-radius:var(--r-control)}
.pdp-meta{display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:13px; margin:8px 0 18px}
.pdp-meta b{color:var(--paper)}
.pitch-box{
  border-left:3px solid var(--accent); background:var(--surface); padding:14px 16px;
  border-radius:0 var(--r-panel) var(--r-panel) 0; margin:18px 0; font-style:italic;
}
.buy-row{display:flex; gap:12px; margin:20px 0}
.btn{border:0; border-radius:var(--r-control); font-weight:700; padding:15px 24px;
  display:inline-flex; align-items:center; gap:9px; font-size:15px; transition:.15s}
.btn-primary{background:var(--accent); color:var(--ink)}
.btn-ghost{background:transparent; color:var(--paper); border:1px solid var(--line)}
.spec{width:100%; border-collapse:collapse; margin-top:20px; font-size:13.5px}
.spec td{padding:9px 0; border-bottom:1px solid var(--line); vertical-align:top}
.spec td:first-child{color:var(--muted); width:38%}
.tagline-row{display:flex; flex-wrap:wrap; gap:7px; margin:16px 0}
.tag{background:var(--surface); border:1px solid var(--line); color:var(--muted);
  font-size:12px; padding:5px 11px; border-radius:999px}
.credit-note{font-size:11.5px; color:var(--muted); margin-top:22px}
.credit-note a{color:var(--accent)}
.back-link{display:inline-flex; gap:7px; align-items:center; color:var(--muted);
  font-size:13px; margin:18px 0 4px; position:relative; z-index:2}

/* ===== cursed commentary (product comments) ============================== */
.comments{position:relative; z-index:2; padding:6px 0 44px; max-width:820px}
.comment-form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel);
  padding:14px; margin:14px 0 20px; display:grid; gap:10px;
}
.comment-form-row{display:flex; gap:10px}
.comment-form input{
  flex:1; min-width:0; background:var(--ink); border:1px solid var(--line); outline:0;
  color:var(--paper); border-radius:var(--r-control); padding:10px 13px; font-family:inherit; font-size:14px;
}
.comment-form input:focus{border-color:var(--accent)}
.comment-form textarea{
  resize:vertical; background:var(--ink); border:1px solid var(--line); outline:0;
  color:var(--paper); border-radius:var(--r-control); padding:10px 13px;
  font-family:inherit; font-size:14.5px; line-height:1.5;
}
.comment-form textarea:focus{border-color:var(--accent)}
.comment-form .btn{padding:11px 18px; font-size:14px}
.comment-note{margin:0; font-size:12.5px; color:var(--accent); min-height:1em}
.comment-list{display:grid; gap:10px}
.comment{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-panel); padding:12px 15px}
.comment-seed{border-left:3px solid var(--accent)}
.comment-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.comment-who{color:var(--paper); font-weight:700; font-size:13.5px}
.comment-when{color:var(--muted); font-size:11.5px}
.comment-badge{color:var(--accent); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700}
.comment-del{
  margin-left:auto; border:0; background:none; color:var(--muted); font-size:11.5px;
  font-weight:700; letter-spacing:.06em; cursor:pointer; text-decoration:underline;
}
.comment-text{margin:6px 0 0; color:var(--paper); font-size:14.5px; line-height:1.55; overflow-wrap:anywhere}
.comment-empty{color:var(--muted); font-style:italic}

/* ===== cart drawer ======================================================= */
.drawer-scrim{position:fixed; inset:0; background:var(--scrim-1); z-index:60; opacity:0;
  pointer-events:none; transition:.2s}
.drawer-scrim.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); z-index:61;
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .25s; display:flex; flex-direction:column;
}
.drawer.open{transform:none}
.drawer-head{display:flex; align-items:center; justify-content:space-between;
  padding:18px; border-bottom:1px solid var(--line)}
.drawer-head h2{font-family:var(--display); font-weight:400; font-size:24px}
.drawer-close{background:none; border:0; color:var(--muted); font-size:26px; line-height:1}
.drawer-body{flex:1; overflow-y:auto; padding:8px 18px}
.drawer-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.drawer-item img{width:64px; height:64px; object-fit:cover; border-radius:var(--r-control)}
.drawer-item .di-title{font-size:13px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.drawer-item .di-price{color:var(--accent); font-weight:700; font-size:14px; margin-top:2px}
.qty{display:flex; align-items:center; gap:8px; margin-top:6px}
.qty button{width:24px; height:24px; border-radius:var(--r-control); border:1px solid var(--line);
  background:var(--ink); color:var(--paper); font-weight:700; line-height:1}
.qty span{font-variant-numeric:tabular-nums; min-width:18px; text-align:center}
.di-remove{background:none; border:0; color:var(--muted); font-size:11px; margin-top:6px; text-align:left}
.drawer-empty{text-align:center; color:var(--muted); padding:50px 20px}
.drawer-empty img{width:120px; margin:0 auto 14px; opacity:.85}
.drawer-foot{border-top:1px solid var(--line); padding:18px}
.drawer-total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.drawer-total .display{font-size:26px; color:var(--accent)}
.drawer-note{color:var(--muted); font-size:11.5px; margin:0 0 14px}
.checkout-btn{width:100%; justify-content:center}
.checkout-btn:disabled{opacity:.5; cursor:not-allowed}

/* ===== checkout celebration ============================================== */
.celebrate{position:fixed; inset:0; z-index:80; display:none; place-items:center;
  background:var(--scrim-2); padding:20px}
.celebrate.open{display:grid}
.celebrate-card{background:var(--surface); border:1px solid var(--accent);
  border-radius:var(--r-panel); padding:30px; max-width:440px; text-align:center;
  box-shadow:var(--shadow)}
.celebrate-card img{width:150px; margin:0 auto 8px}
.celebrate-card h2{font-family:var(--display); font-weight:400; font-size:30px; color:var(--accent)}
.celebrate-card p{color:var(--muted); margin:10px 0 20px}
.celebrate-card .btn{width:100%; justify-content:center}

/* toast */
/* pointer-events:none matters: the toast sits bottom-centre at z-index 90, which
   is exactly where the cart drawer's checkout button and the sheets' primary
   buttons live on a phone. Without this it silently swallowed those taps for the
   three seconds after every add-to-cart. */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--paper); color:var(--ink); font-weight:700; padding:12px 20px;
  border-radius:999px; z-index:90; opacity:0; transition:.25s; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:9px; max-width:90vw;
  pointer-events:none;}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast .star{color:var(--accent); font-size:16px}

/* footer */
.site-foot{position:relative; z-index:2; border-top:1px solid var(--line);
  padding:30px 0; color:var(--muted); font-size:13px; text-align:center}
.site-foot .brand{justify-content:center; margin-bottom:10px}
.site-foot a{color:var(--accent)}
.disclaimer{max-width:60ch; margin:12px auto 0; line-height:1.6}

/* confetti */
.confetti{position:fixed; inset:0; z-index:79; pointer-events:none; overflow:hidden}
.confetti i{position:absolute; top:-20px; width:9px; height:14px; opacity:.9;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}

/* ===== imaginary payment sheet =========================================== */
.pay{position:fixed; inset:0; z-index:85; display:none; place-items:center;
  background:var(--scrim-2); padding:20px; overflow:auto}
.pay.open{display:grid}
.pay-card{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:26px 24px 20px; width:min(460px,100%);
  box-shadow:var(--shadow); max-height:calc(100vh - 40px); overflow:auto}
.modal-x{position:absolute; top:10px; right:12px; background:none; border:0;
  color:var(--muted); font-size:26px; line-height:1; cursor:pointer}
.pay-head{display:flex; align-items:center; gap:10px; margin-bottom:4px}
.pay-head .star{width:30px; height:30px; color:var(--accent); flex:none}
.pay-head h2{font-family:var(--display); font-weight:400; font-size:26px; color:var(--paper); margin:0}
.pay-sub{color:var(--muted); font-size:13px; margin:0 0 16px}
.pay-due{display:flex; justify-content:space-between; align-items:baseline;
  border:1px dashed var(--line); border-radius:var(--r-control);
  padding:10px 14px; margin-bottom:16px}
.pay-due span{color:var(--muted); font-size:13px}
.pay-due b{font-family:var(--display); font-weight:400; font-size:26px; color:var(--accent)}
.pay-form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pay-form .pf-full{grid-column:1 / -1}
.pay-form label{display:flex; flex-direction:column; gap:5px;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.pay-form input{background:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-control); color:var(--paper); font-family:var(--body);
  font-size:15px; padding:10px 12px; outline:0; transition:.15s}
.pay-form input::placeholder{color:var(--placeholder)}
.pay-form input:focus{border-color:var(--accent)}
.pay-form input.filled{color:var(--accent); border-style:dashed;
  border-color:var(--accent); font-weight:700}
.pay-confirm{width:100%; justify-content:center; margin-top:16px}
.pay-note{color:var(--muted); font-size:11px; line-height:1.5; margin:12px 0 0; text-align:center}
#payFilledNote{color:var(--accent)}
.pay-due-amt{display:flex; align-items:baseline; gap:8px}
.pay-due-amt s{color:var(--muted); font-size:14px; text-decoration-color:var(--deal)}
.pay-due-amt s .dop-mark{width:.7em; height:.7em}

/* coupon row inside the pay sheet */
.pay-coupon{margin:0 0 16px}
.pc-row{display:flex; gap:8px}
.pc-row input{flex:1; background:var(--ink); border:1px solid var(--line);
  border-radius:var(--r-control); color:var(--paper); font-family:var(--body);
  font-size:14px; letter-spacing:.06em; text-transform:uppercase; padding:10px 12px; outline:0}
.pc-row input::placeholder{color:var(--placeholder); text-transform:none; letter-spacing:0}
.pc-row input:focus{border-color:var(--accent)}
.pc-apply{flex:none; border:0; border-radius:var(--r-control); background:var(--accent);
  color:var(--ink); font-weight:700; padding:0 16px; cursor:pointer}
.pc-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.pc-chip{border:1px solid var(--accent); background:transparent; color:var(--accent);
  border-radius:999px; font-size:12px; font-weight:700; padding:5px 11px; cursor:pointer}
.pc-chip.on{background:var(--accent); color:var(--ink)}
.pc-none{color:var(--muted); font-size:12px}
.pc-note{font-size:12px; margin:8px 0 0}
.pc-note.ok{color:var(--accent)}
.pc-note.bad{color:var(--deal)}

/* celebrate extras */
.cel-save{color:var(--accent); font-weight:700}
.cel-unlock{margin-top:12px; padding:10px 12px; border:1px dashed var(--accent);
  border-radius:var(--r-control); color:var(--paper); font-size:13px}
.cel-unlock b{color:var(--accent)}

/* header Deals pill */
.deals-btn{position:relative; display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--accent); color:var(--accent);
  border-radius:999px; font-weight:700; padding:8px 14px; cursor:pointer}
.deals-count{position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:999px; background:var(--deal); color:var(--on-deal);
  font-size:11px; font-weight:700; border:2px solid var(--ink)}
.deals-count[hidden]{display:none}

/* ===== Smokin' Deal Stash =============================================== */
.deals{position:fixed; inset:0; z-index:86; display:none; place-items:center;
  background:var(--scrim-2); padding:20px; overflow:auto}
.deals.open{display:grid}
.deals-card{position:relative; background:var(--surface); border:1px solid var(--accent);
  border-radius:var(--r-panel); padding:26px 24px 20px; width:min(460px,100%);
  box-shadow:var(--shadow); max-height:calc(100vh - 40px); overflow:auto}
.deals-progress{margin:0 0 16px}
.dp-bar{height:10px; border-radius:999px; background:var(--ink); border:1px solid var(--line);
  overflow:hidden}
.dp-bar i{display:block; height:100%; background:var(--accent); transition:width .4s}
.dp-label{font-size:12px; color:var(--muted); margin-top:7px}
.dp-label b{color:var(--accent)}
.deals-list{display:flex; flex-direction:column; gap:8px}
.deal-row{position:relative; border:1px solid var(--line); border-radius:var(--r-control);
  padding:11px 13px}
.deal-row.ready{border-color:var(--accent)}
.deal-row.used, .deal-row.locked{opacity:.55}
.dr-main{display:flex; align-items:baseline; gap:10px}
.dr-code{font-weight:700; color:var(--paper); letter-spacing:.04em}
.deal-row.ready .dr-code{color:var(--accent)}
.dr-pct{font-size:12px; color:var(--muted)}
.dr-blurb{font-size:12px; color:var(--muted); margin-top:3px; max-width:32ch}
.dr-tag{position:absolute; top:11px; right:13px; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.deal-row.ready .dr-tag{color:var(--accent)}
.deal-row.used .dr-tag{color:var(--deal)}

/* ===== Scroggy's Skint Wheel ============================================= */
.wheel{position:fixed; inset:0; z-index:88; display:none; place-items:center;
  background:var(--scrim-3); padding:20px; overflow:auto}
.wheel.open{display:grid}
.wheel-card{position:relative; background:var(--surface); border:1px solid var(--accent);
  border-radius:var(--r-panel); padding:26px 24px; width:min(400px,100%);
  text-align:center; box-shadow:var(--shadow)}
.wheel-card h2{font-family:var(--display); font-weight:400; font-size:28px;
  color:var(--accent); margin:0 0 4px}
.wheel-sub{color:var(--muted); font-size:13px; margin:0 auto 18px; max-width:34ch; min-height:34px}
.wheel-stage{position:relative; width:240px; height:240px; margin:0 auto 6px}
.wheel-disc{position:absolute; inset:0; border-radius:50%;
  border:6px solid var(--ink); box-shadow:0 0 0 3px var(--accent), var(--shadow);
  transform:rotate(0deg)}
.wheel-disc .wl{position:absolute; top:50%; left:50%; width:88px; margin:-9px 0 0 -44px;
  text-align:center; font-family:var(--display); font-size:14px; line-height:1.05;
  color:var(--paper); transform-origin:44px 9px; pointer-events:none}
.wheel-disc .wl .dop-mark{width:.7em; height:.7em}
.wheel-disc .wl-x{font-size:12px}
/* per-wedge label colours; themes set the *-ink tokens to match their wedges */
.wheel-disc .wl-a{color:var(--wheel-a-ink,var(--paper))}
.wheel-disc .wl-b{color:var(--wheel-b-ink,var(--paper))}
.wheel-disc .wl-x{color:var(--wheel-x-ink,var(--ink))}
.wheel-hub{position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px;
  border-radius:50%; background:var(--ink); border:3px solid var(--accent);
  display:grid; place-items:center}
.wheel-hub .star{width:24px; height:24px; color:var(--accent)}
.wheel-pointer{position:absolute; top:-6px; left:50%; margin-left:-11px; z-index:2;
  width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:20px solid var(--accent); filter:drop-shadow(0 2px 2px var(--scrim-soft))}
.wheel-result{min-height:24px; margin:12px 0 4px; color:var(--paper); font-size:15px;
  opacity:0; transform:translateY(6px); transition:.3s}
.wheel-result.show{opacity:1; transform:none}
.wheel-result b{color:var(--accent)}
.wheel-spin{width:100%; justify-content:center; margin-top:8px}
.wheel-spin:disabled{opacity:.6; cursor:progress}

/* ===== responsive ======================================================== */
@media (max-width:900px){
  .pdp{grid-template-columns:1fr; gap:22px}
  .pdp-media{position:static}
  .hero-art{width:170px}
  .hero-copy{padding:44px 0 40px}
  .hero-spiral{--artw:170px; width:560px}
}
/* phones + small tablets: brand/tools on row one, search gets its own row */
@media (max-width:760px){
  .header-inner{flex-wrap:wrap; row-gap:10px; column-gap:12px; padding:10px 0}
  .header-tools{margin-left:auto}
  .searchbar{order:10; flex:1 1 100%}
  .searchbar input{font-size:16px} /* stops iOS Safari zoom-on-focus */
  .brand-word{font-size:20px}
  .cat-rail{scroll-snap-type:x proximity}
  .cat-rail .chip{scroll-snap-align:start}
}
@media (max-width:640px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
  .brand-word small{display:none}
  .searchbar button span{display:none}
  .searchbar button::after{content:"🔍"}
  .coin-chip small{display:none}
  .deals-btn span:not(.deals-count){display:none}
  /* phones: copy first, then Scroggy + spiral below, still standing on the ticker */
  .hero-inner{flex-direction:column; align-items:stretch}
  .hero-art{display:block; width:min(70vw,300px)}
  .hero-spiral{display:block; --artw:min(70vw,300px); width:min(140vw,560px)}
  .rail-track > *{flex-basis:160px}
}
@media (max-width:420px){
  .brand-word{font-size:18px}
  .coin-chip{padding:6px 10px; gap:5px}
  .cart-btn,.deals-btn{padding:8px 12px}
  .hero-copy{padding:36px 0 32px}
}
@media (max-width:360px){
  .coin-chip{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto}
}


/* ===== hover, for pointers only ==========================================
   A touch browser applies :hover on tap and leaves it applied until the
   next tap elsewhere, so every hover style here used to stick to the
   button you just pressed — a tapped primary button stayed inverted.
   Gating them on (hover:hover) means fingers never trigger them; the
   :active block underneath gives touch its own, briefer feedback.
========================================================================== */
@media (hover:hover) and (pointer:fine){
  .cart-btn:hover{background:var(--accent-hover)}
  .chip:hover{border-color:var(--muted)}
  #sgBadge:hover{ border-color:var(--accent); transform:translateY(-2px); }
  .lang-toggle:hover{border-color:var(--accent); color:var(--accent)}
  .sfx-btn:hover{border-color:var(--accent)}
  .sort-chip:hover{border-color:var(--muted)}
  .card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--muted)}
  .card:hover .card-media img{transform:scale(1.05)}
  .card-add:hover{background:var(--accent-hover)}
  .btn-primary:hover{background:var(--accent-hover); transform:translateY(-2px)}
  .btn-ghost:hover{border-color:var(--accent)}
  .back-link:hover{color:var(--accent)}
  .comment-del:hover{color:var(--deal)}
  .di-remove:hover{color:var(--deal)}
  .modal-x:hover{color:var(--paper)}
  .pc-apply:hover{background:var(--accent-hover)}
  .pc-chip:hover{background:var(--accent); color:var(--ink)}
  .deals-btn:hover{background:var(--accent); color:var(--ink)}
}

/* touch feedback: a quick press-in, no lingering state */
@media (hover:none){
  .btn:active, .card-add:active, .cart-btn:active, .chip:active,
  .sort-chip:active, .pc-apply:active, .pc-chip:active, .deals-btn:active,
  .qty button:active, .sfx-btn:active, .lang-toggle:active,
  .searchbar button:active, .dish:active, .opt-row:active,
  .when-chip:active, .tip-chip:active{
    transform:scale(.97);
    transition:transform .06s ease;
  }
  /* no sticky lift on cards either */
  .card:active{transform:none}
}
/* let a tap register instantly instead of waiting out the double-tap delay */
button, a, .chip, .sort-chip, .dish, .opt-row, .card{touch-action:manipulation}
/* and kill the grey flash iOS paints over every tapped element */
html{-webkit-tap-highlight-color:transparent}

/* ===== phones: modals become bottom sheets ===============================
   The bug this fixes: every modal used to be a centred card with its own
   `overflow:auto` INSIDE an overlay that also scrolled. Two nested scrollers
   on a touch screen means the outer one usually wins, so the primary button —
   "Confirm imaginary order", "Spin the wheel" — sat hundreds of pixels below
   the fold and simply could not be reached. On a 390x844 phone the confirm
   button started at y=881 (Dopamart) and y=1327 (DopaDash, whose delivery
   panel makes the sheet much taller).

   The fix has three parts:
     1. one scroller only — the overlay stops scrolling, the card scrolls;
     2. the card is a flex column pinned to the bottom of the screen, sized in
        dvh so iOS's collapsing toolbar can't clip it;
     3. the primary action is sticky at the bottom of that scroller, so it is
        on screen from the moment the sheet opens however long the content is.
========================================================================== */
@media (max-width:760px){
  .pay, .deals, .wheel, .celebrate{
    padding:0;
    overflow:hidden;                    /* the card is the only scroller */
    overscroll-behavior:contain;
  }
  .pay.open, .deals.open, .wheel.open, .celebrate.open{
    place-items:end stretch;            /* sit on the bottom edge, full width */
  }
  .pay-card, .deals-card, .wheel-card, .celebrate-card{
    width:100%;
    max-width:none;
    max-height:92vh;
    max-height:92dvh;                   /* dvh where supported; vh is the fallback */
    border-radius:var(--r-panel) var(--r-panel) 0 0;
    border-bottom:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    display:flex;
    flex-direction:column;
    padding-bottom:0;
    animation:sheet-fade .2s ease;
  }
  .pay-card > *, .deals-card > *, .wheel-card > *, .celebrate-card > *{flex:none}
  /* Fade only — deliberately NOT a translate. A transform-based entrance leaves
     the sheet displaced (and its pinned button clipped off the bottom of the
     screen) on any device where the animation is throttled, paused or never
     gets a frame. Opacity can't move anything, so the resting layout is always
     the layout. */
  @keyframes sheet-fade{from{opacity:.35} to{opacity:1}}

  /* a grab handle, so it reads as a sheet you can dismiss */
  .pay-card::before, .deals-card::before, .wheel-card::before, .celebrate-card::before{
    content:""; flex:none; width:40px; height:4px; margin:0 auto 12px;
    border-radius:999px; background:var(--line);
  }

  /* the primary action is pinned to the bottom of the sheet and always tappable.
     The trailing legal note is reordered above it so it isn't hidden underneath. */
  .pay-card > .pay-note:last-child{order:8; margin-bottom:8px}
  .pay-confirm, .wheel-spin{
    order:9;
    position:sticky;
    bottom:0;
    z-index:3;
    margin:12px -24px 0;
    width:calc(100% + 48px);
    border-radius:0;
    min-height:52px;
    padding-bottom:calc(15px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 22px -6px var(--surface);
  }
  /* the sheet's own close button needs to clear the grab handle */
  .modal-x{top:14px; right:10px; width:44px; height:44px; font-size:28px}

  /* the cart drawer: same dvh treatment + a safe-area aware footer */
  .drawer{height:100vh; height:100dvh}
  .drawer-foot{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .drawer-body{overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  .checkout-btn{min-height:52px}

  /* ---- touch targets ---------------------------------------------------
     Everything a thumb has to hit gets at least 44px of height, which is the
     iOS/Android minimum. Several of these were 28-40px. */
  .cart-btn, .deals-btn, .lang-toggle, .sfx-btn, .searchbar button{min-height:44px}
  .searchbar{padding:6px 6px 6px 16px}
  .chip, .sort-chip{min-height:44px; display:inline-flex; align-items:center}
  .card-add{min-height:44px}
  .qty button{width:44px; height:44px; font-size:18px}
  .di-remove{min-height:36px; padding:4px 0}
  .pc-apply{min-height:44px}
  .pc-chip{min-height:38px; display:inline-flex; align-items:center}
  .drawer-close{width:44px; height:44px}
  /* iOS zooms the page when a font-size under 16px is focused */
  .pay-form input, .pc-row input, .comment-form input, .comment-form textarea{font-size:16px}

  /* the toast was a pill sized to its text: on a narrow screen the text wrapped
     to four lines and border-radius:999px turned it into a black circle sitting
     over the order total. Make it a proper full-width banner, and float it above
     whatever primary button is pinned to the bottom. */
  .toast{
    left:12px; right:12px; bottom:calc(84px + env(safe-area-inset-bottom));
    transform:translateY(16px);
    max-width:none; border-radius:14px;
    justify-content:center; text-align:center;
    padding:12px 16px; font-size:14px; line-height:1.35;
  }
  .toast.show{transform:none}
}

/* very short screens (landscape phones): let the sheet use the full height */
@media (max-height:520px){
  .pay-card, .deals-card, .wheel-card, .celebrate-card{max-height:100dvh}
  .wheel-stage{width:170px; height:170px}
  .wheel-disc .wl{transform-origin:44px 9px; font-size:12px}
}

/* ===== cart line modifiers (sites with options: DopaDash) ================ */
.di-opts{font-size:11.5px; color:var(--muted); line-height:1.4; margin-top:2px}
.di-note{font-size:11.5px; color:var(--muted); font-style:italic; margin-top:2px;
  overflow-wrap:anywhere}
.card-noimg{display:grid; place-items:center; width:100%; height:100%; font-size:54px}

/* itemised fees in the payment sheet (delivery, tip…) */
.pay-fees{margin:0 0 10px; display:grid; gap:4px}
.pay-fees[hidden]{display:none}
.pf-line{display:flex; justify-content:space-between; font-size:13px; color:var(--muted)}
.pay-extra:empty{display:none}