/* =====================================================================
   CANDY NEO-BRUTAL SKIN (owner's pick 2026-11-02: redesign 2 with the sky-blue pop)
   Loaded after site.css and overrides it: cream ground, 3px black outlines,
   hard offset shadows, square corners, Archivo Black headings, Space Grotesk body.
   ===================================================================== */
:root {
  --bg: #fff4d6; --paper: #fff; --ink: #111; --text: #1f1f1f; --muted: #4b4b4b;
  --line: #111; --line2: #111; --blue: #111; --blue-d: #111; --blue-soft: #e0f5ff;
  --pop: #38bdf8; --lime: #a3e635; --lilac: #c4b5fd; --pink: #ff6b9d; --sun: #ffd23f;
  --amber: #111; --amber-soft: #fff1b8;
  --r: 0px; --r-sm: 0px; --shadow: 6px 6px 0 #111; --b: 3px solid #111;
  --head: "Archivo Black", "Arial Black", system-ui, sans-serif; --body: "Space Grotesk", system-ui, sans-serif;
}
body { background: var(--bg); color: var(--text); }
::selection { background: var(--pop); color: #111; }
a { color: #111; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; }
h3 { text-transform: none; }
.kicker { color: #111; background: var(--pop); display: inline-block; padding: 3px 8px; border: 2px solid #111; letter-spacing: .1em; }
.muted { color: var(--muted); }

/* buttons: outlined slabs with a hard shadow that "presses" on tap */
.btn { border: var(--b); border-radius: 0; box-shadow: 4px 4px 0 #111; font-weight: 700; transition: transform .08s, box-shadow .08s, background .15s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #111; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111; }
.btn.primary { background: #111; color: #fff; box-shadow: 5px 5px 0 var(--pop); }
.btn.primary:hover { background: #111; box-shadow: 6px 6px 0 var(--pop); }
.btn.primary:disabled { background: #8a8a8a; box-shadow: none; transform: none; }
.btn.outline, .btn.white, .btn.ghost { background: #fff; border-color: #111; color: #111; }
.btn.outline:hover { border-color: #111; background: var(--sun); }
.btn.wa { background: #25d366; color: #111; }
.btn.insta { background: var(--pink); color: #111; }
.btn.uber { background: #111; color: #fff; border-color: #111; box-shadow: 4px 4px 0 var(--lime); }
.btn.uber:hover { background: #06c167; color: #111; border-color: #111; }
.btn.sm { border-width: 2px; box-shadow: 3px 3px 0 #111; border-radius: 0; }

/* header: sky-blue bar */
.top { background: var(--pop); backdrop-filter: none; border-bottom: var(--b); }
.logo img { display: block; height: 44px; width: auto; border: 3px solid #111; box-shadow: 3px 3px 0 #111; background: #0043b6; }
.logo.light img { height: 56px; border-color: var(--pop); box-shadow: 4px 4px 0 var(--pop); }
.top .logo { overflow: visible; padding: 2px 4px 4px 0; }
.foot .handle { color: #e8e2d0; margin: 10px 0 12px; }
.logo { font-family: var(--head); color: #111; text-transform: uppercase; font-weight: 400; letter-spacing: 0; }
.logo.light { color: var(--pop); }
.nav a { color: #111; font-weight: 700; }
.nav a:hover { color: #111; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.bag-btn { background: #fff; color: #111; border: var(--b); border-radius: 0; box-shadow: 4px 4px 0 #111; }
.bag-btn .count { background: var(--pink); color: #111; border: 2px solid #111; border-radius: 0; }

/* hero */
.hero { background: var(--bg); border-bottom: var(--b); }
.eyebrow-line { color: #111; }
.hero h1 { font-size: clamp(46px, 13vw, 96px); line-height: .92; text-transform: uppercase; }
.hero h1 .hl { background: #111; color: var(--bg); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { color: #1f1f1f; font-size: 17px; font-weight: 500; }
.stats { border-top: var(--b); border-bottom: var(--b); }
.stat { border: var(--b); border-radius: 0; box-shadow: 4px 4px 0 #111; }
.stat:nth-child(1) { background: var(--sun); } .stat:nth-child(2) { background: var(--pink); } .stat:nth-child(3) { background: var(--pop); }
.stat b, .stat b.amber, .stat b.blue, .stat span { color: #111; }
.search { border: var(--b); border-radius: 0; box-shadow: 4px 4px 0 #111; }
.search:focus-within { border-color: #111; box-shadow: 4px 4px 0 var(--pop); }
.search svg { stroke: #111; }
.assure { color: #111; font-weight: 500; }
.hero-card { border: var(--b); border-radius: 0; box-shadow: 10px 10px 0 #111; transform: rotate(-1.5deg); overflow: visible; background: #111; }
.hero-card figcaption { background: linear-gradient(transparent, rgba(0, 0, 0, .9) 70%); }
.hero-card figcaption .mono { color: var(--pop); }
.sticker { position: absolute; z-index: 2; top: -16px; right: 16px; background: var(--lime); color: #111; border: var(--b); padding: 6px 12px; font: 700 14px var(--body); transform: rotate(5deg); box-shadow: 3px 3px 0 #111; }
.open-badge { border: 2px solid #111; border-radius: 0; background: var(--lime); color: #111; box-shadow: 3px 3px 0 #111; }
.open-badge.shut { background: var(--pink); color: #111; }
.open-badge::before, .open-badge.shut::before { background: #111; border-radius: 0; }

/* flavour marquee */
.marquee { background: #111; color: var(--bg); border-top: var(--b); border-bottom: var(--b); overflow: hidden; white-space: nowrap; padding: 14px 0; font: 400 clamp(18px, 4vw, 28px)/1 var(--head); text-transform: uppercase; }
.marquee div { display: inline-block; padding-left: 100%; animation: marquee 22s linear infinite; }
.marquee span { color: var(--pop); padding: 0 .4em; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* menu */
.cats-bar { background: var(--bg); }
.cats-bar.stuck { box-shadow: 0 3px 0 #111; }
.cats { padding: 2px 4px 6px 2px; }
.cats button { border: var(--b); border-radius: 0; background: #fff; color: #111; font-weight: 700; box-shadow: 3px 3px 0 #111; }
.cats button.on { background: var(--pop); border-color: #111; color: #111; box-shadow: 3px 3px 0 #111; }
.moq-bar { border: var(--b); border-radius: 0; background: var(--sun); color: #111; }
.card { border: var(--b); border-radius: 0; box-shadow: 5px 5px 0 #111; transition: transform .12s, box-shadow .12s; }
.card:hover { box-shadow: 7px 7px 0 #111; transform: translate(-2px, -2px); }
.card .ph { background: #fff; border-bottom: var(--b); }
.badge { background: var(--lime); color: #111; border: 2px solid #111; border-radius: 0; transform: rotate(4deg); }
.card .meta i { color: #111; font-weight: 700; }
.card h3 { font-family: var(--body); font-weight: 700; font-size: 19px; text-transform: none; }
.variants button { border: 2px solid #111; border-radius: 0; }
.variants button.on { background: var(--pop); color: #111; border-color: #111; }
.price b { color: #111; }
.stepper { border: 2px solid #111; border-radius: 0; }
.stepper button { background: var(--pop); color: #111; }
.c-cookies { background: var(--sun); } .c-smash { background: var(--pink); } .c-donuts { background: #ffb3cf; } .c-cupcakes { background: var(--lilac); }
.c-brownies { background: #d6b38f; } .c-bento { background: var(--pop); } .c-cakes { background: #ffc9a3; } .c-gifts { background: var(--lime); } .c-more { background: #e5e5e5; }

/* gifts / reheat / reviews */
.gifts { background: var(--pop); border-top: var(--b); border-bottom: var(--b); }
.gifts .kicker { background: #fff; }
.gifts .muted { color: #111; }
.seg { background: #fff; border: var(--b); border-radius: 0; }
.seg button { border-radius: 0; font-weight: 700; }
.seg button.on { background: #111; color: #fff; }
.gift-card { border: var(--b); border-radius: 0; box-shadow: 8px 8px 0 #111; }
.gift-img { border: var(--b); border-radius: 0; }
.gift-img .pill { background: var(--sun); color: #111; border: 2px solid #111; border-radius: 0; }
.inside { background: var(--bg); border: 2px solid #111; border-radius: 0; }
.inside .mono { color: #111; }
.gift-foot { border-top: 2px dashed #111; }
.price-big { color: #111; }
.reheat-card { border: var(--b); border-radius: 0; box-shadow: 8px 8px 0 #111; }
.reheat-facts div { background: var(--sun); border: 2px solid #111; border-radius: 0; }
.tip { background: var(--lilac); border: 2px solid #111; color: #111; border-radius: 0; }
.reviews { background: #fff; border-top: var(--b); }
.ig-card { border: var(--b); border-radius: 0; box-shadow: 5px 5px 0 #111; }
.ig-track { padding: 4px 8px 10px 4px; }
.ig-nav { border: var(--b); border-radius: 0; box-shadow: 3px 3px 0 #111; background: var(--pop); }
.g-head { background: var(--lilac); border: var(--b); box-shadow: 6px 6px 0 #111; padding: 16px; max-width: 760px; margin: 0 auto 22px; }
.g-head .muted { color: #111; }
.g-logo { border: 2px solid #111; border-radius: 0; }
.g-score { font-size: 34px; }
.stars { color: #111; }
.rev { background: var(--bg); border: var(--b); border-radius: 0; box-shadow: 5px 5px 0 #111; }
.rev figcaption em { background: var(--pop); color: #111; border-radius: 0; border: 2px solid #111; }

/* footer */
.foot { background: #111; color: #e8e2d0; border-top: var(--b); }
.foot h4 { color: var(--pop); font-family: var(--head); font-weight: 400; }
.foot a { color: #fff; }
.copy { border-top: 2px solid #333; }
.app-row .btn { box-shadow: 4px 4px 0 var(--pop); }

/* bag drawer + checkout */
.scrim { background: rgba(0, 0, 0, .5); }
.drawer { border: var(--b); border-bottom: 0; border-radius: 0; box-shadow: none; }
.drawer-head { background: var(--pop); border-bottom: var(--b); }
.x { background: #fff; border: 2px solid #111; border-radius: 0; color: #111; }
.line { border-bottom: 2px solid #111; }
.line .th { border: 2px solid #111; border-radius: 0; }
.line .nm, .totals b { color: #111; }
.warn { background: var(--sun); border: 2px solid #111; color: #111; border-radius: 0; }
.form label, .form .lbl { color: #111; }
.form input, .form textarea, .form select, .chat-form input { border: 2px solid #111; border-radius: 0; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: #111; box-shadow: 3px 3px 0 var(--pop); }
.addr { border: 2px solid #111; border-radius: 0; background: var(--bg); }
.times button { border: 2px solid #111; border-radius: 0; font-weight: 700; }
.times button.on { background: var(--pop); color: #111; border-color: #111; }
.done .no { color: #111; background: var(--pop); border: var(--b); display: inline-block; justify-self: center; padding: 4px 14px; }

/* chat */
.chat-fab { background: #111; color: #fff; border: var(--b); border-radius: 0; box-shadow: 4px 4px 0 var(--pop); }
.chat { border: var(--b); }
.chat-head { background: var(--pop); color: #111; border-bottom: var(--b); }
.chat-head b { text-transform: uppercase; }
.chat-head span { opacity: 1; }
.chat-head .x { background: #fff; color: #111; }
.chat-log { background: var(--bg); }
.msg { border-radius: 0; border: 2px solid #111; box-shadow: 3px 3px 0 #111; }
.msg.bot { background: #fff; border-bottom-left-radius: 0; }
.msg.me { background: var(--pop); color: #111; border-bottom-right-radius: 0; }
.summary { border: var(--b); border-radius: 0; box-shadow: 4px 4px 0 #111; }
.chips { background: var(--bg); padding-top: 4px; }
.chip { border: 2px solid #111; border-radius: 0; background: #fff; font-weight: 700; }
.chat-form { border-top: var(--b); }
.chat-form button { background: #111; border-radius: 0; box-shadow: 3px 3px 0 var(--pop); }
.toast { background: #111; color: #fff; border: 2px solid var(--pop); border-radius: 0; }

/* order tracking page */
.panel-card { border: var(--b); border-radius: 0; box-shadow: 6px 6px 0 #111; }
.status { background: var(--pop); color: #111; border: 2px solid #111; border-radius: 0; }
.status.cancelled { background: var(--pink); color: #111; }
.bar i { border-radius: 0; background: #fff; border: 2px solid #111; height: 10px; }
.bar i.on { background: var(--pop); }

@media (max-width: 559px) {
  .card .ph { border-bottom: 0; border-right: var(--b); }
  .hero-card { transform: rotate(-1deg); }
}
@media (min-width: 900px) {
  .drawer { border-left: var(--b); border-top: 0; }
  .chat { border-radius: 0; box-shadow: 10px 10px 0 #111; }
}
@media (prefers-reduced-motion: reduce) { .marquee div { animation: none; padding-left: 16px; } }