/* Dope Dash customer site: header, cart drawer, home rows, menu, orders, promo, footer */
:root{--ink:#f4f7ff;--muted:#a1b0c7;--lime:#23f778;--cyan:#47eaff;--pink:#eb54dc;--panel:#0f1626;--line:#ffffff14}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.5 'DM Sans',system-ui,sans-serif;background:radial-gradient(ellipse at 5% 0,#15332e80,transparent 32%),radial-gradient(ellipse at 90% 18%,#47217a45,transparent 38%),#080c16;overflow-x:clip}
body.drawer-open,body.gated{overflow:hidden}
a{color:inherit}
.page{max-width:1500px;margin:0 auto;padding:0 4vw 40px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#080c16d9;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.site-header-inner{max-width:1500px;margin:0 auto;padding:12px 4vw;display:flex;align-items:center;gap:20px}
.site-brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:700 19px/1.05 'Space Grotesk',sans-serif;letter-spacing:-.4px}
.site-brand img{border-radius:50%;object-fit:cover}
.site-brand small{display:block;font:700 9px 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--lime);margin-top:3px}
.site-nav{display:flex;gap:4px;margin-left:12px}
.site-nav a{padding:9px 16px;border-radius:99px;text-decoration:none;font:700 14px 'Space Grotesk',sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#c9d5e6}
.site-nav a:hover{background:#ffffff0f;color:#fff}
.site-nav a[aria-current=page]{background:#ffffff14;color:#fff;box-shadow:inset 0 -2px 0 var(--lime)}
.site-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.staff-links{display:flex;gap:4px}.staff-links a{padding:7px 11px;border-radius:99px;border:1px solid var(--line);font-size:12px;font-weight:700;text-decoration:none;color:var(--muted)}
.header-button{padding:10px 16px;border-radius:99px;border:1px solid #ffffff22;background:transparent;font-weight:700;cursor:pointer}
.header-button:hover{background:#ffffff0f}
.cart-button{position:relative;display:flex;align-items:center;gap:8px;padding:10px 18px 10px 14px;border:0;border-radius:99px;background:linear-gradient(120deg,#8bffb2,#23f778);color:#061c10;font:800 14px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 6px 24px #23f77830;transition:transform .2s}
.cart-button:hover{transform:translateY(-1px)}
.cart-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.cart-count{min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#061c10;color:#8bffb2;display:grid;place-items:center;font-size:12px}
.cart-count.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{40%{transform:scale(1.45)}}

/* ---------- cart drawer ---------- */
.cart-scrim{position:fixed;inset:0;z-index:60;background:#03060dcc;backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.cart-scrim.open{opacity:1}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(440px,100%);display:flex;flex-direction:column;background:linear-gradient(160deg,#141f33,#0b1120);border-left:1px solid #a4ffce22;box-shadow:-30px 0 80px #000a;transform:translateX(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cart-drawer.open{transform:none}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 4px}
.cart-head h2{margin:0;font:800 30px 'Space Grotesk',sans-serif;letter-spacing:-.04em;text-transform:uppercase}
.cart-close{width:42px;height:42px;border-radius:50%;border:1px solid #ffffff22;background:transparent;font-size:24px;cursor:pointer}
.cart-store{margin:0 22px 8px;color:var(--lime);font-size:13px;font-weight:700}
.cart-store:empty{display:none}
.cart-lines{flex:1;overflow:auto;padding:6px 22px}
.cart-line{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-thumb{width:58px;height:58px;border-radius:16px;background:var(--card-bg);display:grid;place-items:center;overflow:hidden;font-size:28px}
.cart-thumb img{max-width:80%;max-height:80%;object-fit:contain}
.cart-info strong{display:block;font-size:15px}.cart-info span{color:var(--muted);font-size:13px}
.cart-empty{text-align:center;padding:40px 0;color:var(--muted)}
.qty{display:flex;align-items:center;gap:8px;font-weight:700}
.qty button{width:30px;height:30px;border-radius:50%;border:1px solid #ffffff25;background:#ffffff08;cursor:pointer}
.cart-foot{padding:16px 22px 22px;border-top:1px solid var(--line);display:grid;gap:12px;background:#0a0f1ccc}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.cart-total strong{font:700 26px 'Space Grotesk',sans-serif;letter-spacing:-.04em}
.cart-field{display:grid;gap:5px;font-size:12px;font-weight:700;color:#d6e0f0}
.cart-field input,.cart-field select{padding:12px 13px;border-radius:12px;border:1px solid #40516b;background:#0b1220;color:#fff;font:inherit;font-size:14px;font-weight:400}
#addressFields{display:grid;gap:12px}
#addressFields[hidden]{display:none}
.checkout-button{padding:15px;border:0;border-radius:99px;background:linear-gradient(120deg,#8bffb2,#23f778);color:#061c10;font:800 16px 'DM Sans',sans-serif;cursor:pointer}
.checkout-button:disabled{opacity:.5;cursor:not-allowed}
.cart-fine{margin:0;color:var(--muted);font-size:11px;line-height:1.5}

/* ---------- home ---------- */
.home-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:30px 0 22px}
.home-intro h1{margin:4px 0 0;font:800 clamp(38px,5vw,64px)/.95 'Space Grotesk',sans-serif;letter-spacing:-.05em;text-transform:uppercase}
.home-intro p{margin:8px 0 0;color:var(--muted)}
.eyebrow{font:700 11px 'DM Sans',sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--lime)}
.shelf{margin:54px 0 0}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.shelf-head h2{margin:2px 0 0;font:800 clamp(34px,4.6vw,64px)/.92 'Space Grotesk',sans-serif;letter-spacing:-.05em;text-transform:uppercase}
.shelf-head p{margin:6px 0 0;color:var(--muted)}
.shelf-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.menu-link{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:99px;background:#fff;color:#07120c;text-decoration:none;font:800 15px 'DM Sans',sans-serif;box-shadow:0 8px 30px #ffffff22;transition:transform .2s}
.menu-link:hover{transform:translateX(3px)}
.row-nav{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff25;background:#0a0f1c99;font-size:18px;cursor:pointer}
.product-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,23%);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent;perspective:1400px}
.product-row>.menu-card{scroll-snap-align:start}
.shelf.new .shelf-head h2{background:linear-gradient(100deg,#fff 20%,var(--pink) 70%,#ffb86b);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu-card-tag.rank{background:#fff;color:#07120c;font-size:14px}
.menu-card-tag.hot{background:linear-gradient(120deg,var(--pink),#ffb86b);color:#1a0712}
.row-prompt{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px;border-radius:24px;border:1px dashed #ffffff26;color:var(--muted)}
.row-prompt p{margin:0}
.social{margin:64px 0 0;padding:32px;border-radius:30px;background:radial-gradient(ellipse at 0 0,#eb54dc26,transparent 55%),radial-gradient(ellipse at 100% 100%,#47eaff1f,transparent 55%),#0f1626;border:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.social h2{margin:4px 0 6px;font:800 clamp(30px,3.6vw,48px)/.95 'Space Grotesk',sans-serif;letter-spacing:-.04em;text-transform:uppercase}
.social p{margin:0;color:var(--muted)}
.social-links{display:flex;flex-wrap:wrap;gap:10px}
.social-link{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:18px;background:#ffffff0d;border:1px solid #ffffff1c;text-decoration:none;font-weight:700}
.social-link svg,.footer-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social-link small{display:block;font-size:10px;color:var(--muted);font-weight:600}
.social-link.soon{opacity:.6}
a.social-link:hover{background:#ffffff1a}

/* ---------- menu page ---------- */
.menu-hero{margin:34px 0 18px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.menu-hero h1{margin:4px 0 0;font:800 clamp(52px,8vw,120px)/.86 'Space Grotesk',sans-serif;letter-spacing:-.06em;text-transform:uppercase}
.store-picker{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.store-chip{display:grid;text-align:left;padding:12px 16px;border-radius:18px;border:1px solid var(--line);background:#ffffff08;cursor:pointer;color:inherit;font:inherit}
.store-chip small{color:var(--muted);font-size:12px}
.store-chip.selected{border-color:#23f77880;background:#23f7780f}
.menu-controls{position:sticky;top:69px;z-index:30;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 0 14px;background:linear-gradient(#080c16 70%,#080c1600)}
.menu-search{flex:0 1 280px;padding:13px 18px;border-radius:99px;border:1px solid #40516b;background:#0b1220;color:#fff;font:inherit}
.menu-search:focus{outline:2px solid var(--lime);outline-offset:2px}
#categoryTabs.filters{position:static;flex:1 1 auto;margin:0;overflow-x:auto;flex-wrap:nowrap;display:flex}
#categoryTabs .filter{white-space:nowrap;border:0;border-radius:99px;color:inherit;cursor:pointer;background:transparent}
#categoryTabs .filter.active{background:var(--lime);color:#07180e}
#menuGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;perspective:1400px;margin-top:8px}
.menu-count{color:var(--lime);font-weight:700}

/* ---------- orders page ---------- */
.orders-wrap{display:grid;gap:16px;margin:8px 0 40px}
.order-card{padding:22px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(140deg,#ffffff09,#ffffff03)}
.order-card header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.order-card header strong{font:800 22px 'Space Grotesk',sans-serif;letter-spacing:-.03em}
.order-card header span{display:block;color:var(--muted);font-size:13px}
.order-items{margin:10px 0 4px;color:#d6e0f0}
.order-actions{display:flex;gap:8px;margin-top:12px}

/* ---------- promo ad + footer ---------- */
.promo-ad{position:relative;isolation:isolate;overflow:hidden;max-width:1500px;margin:70px auto 0;min-height:420px;border-radius:36px;display:flex;align-items:center;width:calc(100% - 8vw)}
.promo-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.promo-ad:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#05080fef 0%,#05080fc0 45%,#05080f30 100%)}
.promo-copy{padding:48px clamp(24px,5vw,64px);max-width:640px}
.promo-kicker{font:700 12px 'DM Sans',sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--lime)}
.promo-copy h2{margin:12px 0 14px;font:800 clamp(52px,8vw,118px)/.86 'Space Grotesk',sans-serif;letter-spacing:-.06em;text-transform:uppercase;text-shadow:0 8px 40px #000a}
.promo-copy p{margin:0 0 24px;color:#d6e0f0;max-width:420px}
.promo-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.promo-actions .button{padding:15px 26px;font-weight:800}
.promo-chip{padding:8px 14px;border-radius:99px;border:1px dashed #ffffff40;font-size:12px;font-weight:700;color:#e6d7ff;background:#b48cff1f}
.site-footer{max-width:1500px;margin:0 auto;padding:40px 4vw 50px}
.site-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line)}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}.site-footer nav a{text-decoration:none;color:var(--muted);font-weight:700}
.site-footer nav a:hover{color:#fff}
.footer-social{display:flex;gap:12px}
.footer-legal{margin:18px 0 0;color:#7d8ca3;font-size:12px;line-height:1.6;max-width:880px}
.gate-links{display:flex;justify-content:center;gap:18px;margin-top:12px}.gate-links a{color:var(--cyan);font-weight:700;text-decoration:none}

/* ---------- responsive ---------- */
@media(max-width:1100px){.product-row{grid-auto-columns:minmax(240px,32%)}}
@media(max-width:860px){
  .site-header-inner{flex-wrap:wrap;gap:10px 14px;padding:10px 16px}
  .site-nav{order:3;width:100%;margin:0;justify-content:space-between}
  .site-nav a{flex:1;text-align:center;padding:8px 6px}
  .staff-links{display:none}
  .page{padding:0 16px 30px}
  .product-row{grid-auto-columns:minmax(230px,62%)}
  .menu-controls{top:112px}
  .social{grid-template-columns:1fr;padding:24px}
  .promo-ad{width:calc(100% - 32px);min-height:460px;align-items:flex-end;border-radius:28px}
  .promo-ad:after{background:linear-gradient(0deg,#05080ff2 15%,#05080f99 60%,#05080f30)}
}
@media(max-width:520px){
  .cart-label{display:none}
  .site-brand{font-size:17px}
  .header-button{padding:9px 12px;font-size:13px}
  .shelf-head{flex-wrap:wrap}
  .row-nav{display:none}
  .product-row{grid-auto-columns:78%}
  .menu-search{flex:1 1 100%}
  #menuGrid{grid-template-columns:1fr 1fr;gap:12px}
  #menuGrid .menu-card h3{font-size:18px}
  #menuGrid .menu-card p{display:none}
  #menuGrid .menu-card-add{padding:9px 12px;font-size:12px}
  #menuGrid .menu-card-price{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.cart-drawer,.cart-scrim{transition:none}.cart-count.bump{animation:none}}