/*==============================================================
  The online store's clothes, second cut: white like the main
  site, a grid of small cards under category headings, sheets
  that become proper modals on a desktop, and a checkout that
  spreads out when the screen allows it.
==============================================================*/
:root {
  --theme-color: #EB1400;
  --theme-color2: #153143;
  --theme-color3: #FF9924;
  --title-color: #121212;
  --body-color: #6C6C6C;
  --smoke-color3: #F2F2F2;
  --smoke-color4: #FDE1B9;
  --white-color: #ffffff;
  --success-color: #54aea6;
  --error-color: #dc3545;
  --line: #e6e6e6;
  --title-font: "Barlow Condensed", sans-serif;
  --body-font: "Inter", sans-serif;
  --banger-font: "Bangers", system-ui;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white-color);
  color: var(--title-color);
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: 96px;
}

/* A sheet is open: the page behind it holds still. */
body.held { overflow: hidden; }

img { max-width: 100%; }

button { font: inherit; cursor: pointer; }

/*---------- The top bar ----------*/

.shop-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--theme-color2);
  color: #fff;
}

.shop-top__home {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-family: var(--title-font);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-top__home img { width: 34px; height: auto; }

.shop-top__bag {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--theme-color3);
  display: grid;
  place-items: center;
}

.shop-top__count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--theme-color);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

/*---------- Shell states ----------*/

.shop, .shop-closed { max-width: 1080px; margin: 0 auto; padding: 16px; }

.shop-closed h1 { font-family: var(--title-font); font-size: 2rem; margin: 24px 0 8px; }

.shop-loading { color: var(--body-color); text-align: center; padding: 40px 0; }

.shop-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--smoke-color4);
  border: 1px solid #f3d8a8;
  font-weight: 600;
  text-align: center;
}

.shop-note--stop { background: #fde4e1; border-color: #f3b6ae; }

/* Busy is not broken. Warmer than the red that means "we have stopped
   taking orders", so a queue does not read as a closed door. */
.shop-note--busy { background: #fdf0d8; border-color: #efc978; }

/* A discount that arrived in the link: good news, in green. */
.shop-note--code { background: #e3f4e7; border-color: #9fd3ab; }

/* Proving a phone belongs to whoever typed it: the robot box, the code,
   and the resend button with a clock on it. */
/* The number and the ask about it, in ONE pill. The border lives on the
   wrapper so the two do not read as separate questions. */
.phonewrap {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.phonewrap .field:last-child { margin-bottom: 0; }

/* A saved number reads as settled rather than merely disabled, and the
   X sits inside the field's own right edge. */
.phonefield { position: relative; }
.phonefield input { padding-right: 44px; }

.phonefield input.is-saved {
  background: var(--smoke-color4);
  border-color: #f3d8a8;
  font-weight: 700;
  cursor: default;
}

.phonekill {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--body-color);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.phonekill:hover { background: rgba(0, 0, 0, 0.06); color: var(--theme-color); }

.provebox {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

/* Nothing to ask: no rule, no gap. */
.provebox:empty { display: none; }

.provebox strong { display: block; margin-bottom: 4px; color: var(--theme-color2, #14212e); }
.provebox .fineline { margin: 0 0 10px; }

/* The proved number, said back inside the same pill that confirms it. */
.provebox__num {
  margin: 0 0 6px;
  font-family: var(--title-font);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--theme-color2, #14212e);
}
.provebox .field { margin-bottom: 10px; }

/* Google draws a 304px iframe and will not be talked out of it, so on a
   narrow phone it is scaled down rather than allowed to widen the page. */
.provebox__robot { margin: 0 0 10px; }

@media (max-width: 360px) {
  .provebox__robot { transform: scale(0.86); transform-origin: 0 0; height: 68px; }
}

.trustopt {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 12px;
  font-size: 0.84rem;
  color: var(--body-color);
  cursor: pointer;
}

.trustopt input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; }
.trustopt em { display: block; font-style: normal; opacity: 0.75; }

.proverow { display: flex; gap: 8px; flex-wrap: wrap; }
.proverow .bigbtn { flex: 1 1 auto; }

.shop-note button {
  margin-left: 8px;
  border: 0;
  background: var(--theme-color2);
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
}

/*---------- The menu: categories of small cards ----------*/

.shop-head {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 800;
  font-size: 1.7rem;
  margin: 6px 0 12px;
}

.cat-head {
  font-family: var(--title-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  font-size: 1.25rem;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--smoke-color3);
  color: var(--theme-color2);
}

.dishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.dish {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white-color);
  overflow: hidden;
}

.dish[disabled] { opacity: 0.55; }

.dish__shot {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0 0 8px;
}

.dish__noshot {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--smoke-color3);
  display: grid;
  place-items: center;
  font-family: var(--banger-font);
  color: var(--body-color);
  margin: 0 0 8px;
}

.dish__name {
  font-family: var(--title-font);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 10px 2px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dish__price { font-weight: 800; color: var(--theme-color); margin: 0 10px; font-size: 0.92rem; }

.dish__badge {
  display: inline-block;
  margin: 0 10px 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--theme-color3);
  color: #4a2500;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  align-self: flex-start;
}

.dish__gone { font-weight: 800; color: var(--error-color); margin: 0 10px; font-size: 0.85rem; }

/*---------- Sheets: bottom cards on a phone, modals on a desk ----------*/

.veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18, 18, 18, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--white-color);
  border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}

.sheet h2 {
  margin: 0 0 4px;
  font-family: var(--title-font);
  font-size: 1.5rem;
  text-transform: uppercase;
}

.sheet__desc { margin: 0 0 12px; color: var(--body-color); font-size: 0.9rem; }

.sheet__label {
  margin: 14px 0 6px;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--theme-color2);
}

/* The way out, riding the sheet's top right corner. */
.sheet { position: relative; }

.sheet__x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.55);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* The dish sheet: the photo WHOLE, never cropped. The soft backdrop
   owns whatever space the photo's own shape leaves over. */
.sheet--dish .dishsheet__shot {
  width: calc(100% + 32px);
  margin: -18px -16px 12px;
  margin-inline: auto;
  height: auto;
  max-height: 42vh;
  object-fit: contain;
  object-position: center;
  background: var(--smoke-color3);
  display: block;
}

@media (min-width: 760px) {
  .veil { align-items: center; padding: 24px; }

  .sheet { border-radius: 18px; }

  .sheet--dish { max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }

  /* A dish with no photo is one column, not two. The right hand column
     exists to sit beside the picture; with no picture the choices flow
     into both and a list's heading ends up adrift from its options. */
  .sheet--dish.sheet--noshot { max-width: 470px; display: block; }

  .sheet--dish .dishsheet__shot {
    grid-row: 1 / 20;
    width: calc(100% + 16px);
    height: 100%;
    max-height: none;
    object-fit: contain;
    margin: -18px 0 -18px -16px;
    object-position: center;
    border-radius: 18px 0 0 18px;
  }
}

.pickrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 12px;
  margin: 0 0 8px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white-color);
  font-weight: 600;
}

.pickrow[aria-pressed="true"] { border-color: var(--theme-color); background: #fff4f2; }

.pickrow__price { color: var(--body-color); font-weight: 700; }

.qtyline { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0; }

.qtyline button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 1.2rem;
  font-weight: 800;
}

.qtyline output { font-weight: 800; font-size: 1.1rem; min-width: 24px; text-align: center; }

.bigbtn {
  display: block;
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 12px;
  background: var(--theme-color);
  color: #fff;
  font-weight: 800;
  font-size: 1.02rem;
}

.bigbtn[disabled] { opacity: 0.5; }

.bigbtn--quiet { background: transparent; color: var(--theme-color2); font-weight: 700; }

/* Breadcrumbs live on the left, like breadcrumbs do. */
.crumb {
  display: inline-block;
  width: auto;
  padding: 8px 0;
  margin: 0 0 4px;
  text-align: left;
}

/*---------- The cart bar and cart ----------*/

.cartbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cartbar button {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: space-between;
  padding: 15px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--theme-color2);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(21, 49, 67, 0.35);
}

.cartline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.cartline__name { font-weight: 700; }

.cartline__mods { grid-column: 1; color: var(--body-color); font-size: 0.84rem; }

.cartline__end { text-align: right; font-weight: 800; }

.cartline .orderline__tag { grid-column: 1; justify-self: start; }

.cartline__tools { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }

.cartline__tools button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 4px 11px;
  font-weight: 800;
}

/* The catering signpost at the foot of the menu. */
.cater-note {
  display: flex;
  /* Stacked and centred: the shout goes on its own line, the
     invitation sits under it. */
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--theme-color2);
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}

.cater-note strong {
  font-family: var(--title-font);
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: var(--theme-color3);
}

/* The drinks aisle: a one-row shelf that scrolls sideways. */
.drinkrow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  margin: 0 0 6px;
}

.drinkcard {
  flex: 0 0 auto;
  width: 104px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white-color);
  padding: 0 0 8px;
  text-align: left;
  overflow: hidden;
}

.drinkcard__shot {
  width: 100%;
  height: 62px;
  object-fit: cover;
  display: block;
  margin: 0 0 6px;
}

.drinkcard__noshot {
  width: 100%;
  height: 62px;
  background: var(--smoke-color3);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  margin: 0 0 6px;
}

.drinkcard__name {
  display: block;
  padding: 0 8px;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.2;
}

.drinkcard__price {
  display: block;
  padding: 2px 8px 0;
  color: var(--theme-color);
  font-weight: 800;
  font-size: 0.8rem;
}

.nudge__count { position: absolute; top: 8px; right: 12px; font-size: 0.72rem; font-weight: 800; color: #9a6b0f; background: rgba(255, 255, 255, 0.65); border-radius: 999px; padding: 2px 9px; letter-spacing: 0.04em; }

.nudge {
  position: relative;
  margin: 10px 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--smoke-color4);
  border: 1px dashed var(--theme-color3);
  font-size: 0.9rem;
}

.nudge strong { display: block; }

.nudge button {
  display: block;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  background: var(--theme-color);
  color: #fff;
  font-weight: 800;
}

.nudge__was { color: var(--body-color); }

.nudge button.nudge__pass {
  display: inline-block;
  margin-right: 8px;
  background: transparent;
  color: var(--body-color);
  border: 1px solid var(--line);
}

.nudge button.nudge__pass + button { display: inline-block; }

/* The answer row: No thanks on the left, the deal's button beside it,
   one line on every screen. */
.nudge__acts { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

.nudge__acts button { display: inline-block; margin: 0; white-space: nowrap; }

.nudge__now { color: #1d7a43; font-weight: 800; }

/*---------- Checkout ----------*/

.checkout {
  display: grid;
  gap: 0 28px;
}

/*
 * Grid children refuse to shrink below their content by default, and
 * the rewards band's content is a dozen cards wide: without min-width
 * zero the band inflates the page sideways on a phone instead of
 * scrolling inside its own box.
 */
.checkout > * { min-width: 0; }

.points { min-width: 0; }

.prizeband { max-width: 100%; }

@media (min-width: 900px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }

  .checkout__side {
    position: sticky;
    top: 84px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    background: var(--white-color);
    box-shadow: 0 6px 18px rgba(18, 18, 18, 0.05);
  }
}

.field { margin: 0 0 12px; }

/* State and ZIP side by side, the way an envelope reads. State is the
   narrow one because it only ever holds two letters. */
.addrpair { display: flex; gap: 10px; }
.addrpair .field { flex: 1 1 0; margin-bottom: 12px; }
.addrpair .field:first-child { flex: 0 0 92px; }
.addrpair input { text-transform: uppercase; }
.addrpair .field:last-child input { text-transform: none; }

.field label {
  display: block;
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--theme-color2);
  margin: 0 0 5px;
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  background: #fff;
}

.howline { color: var(--body-color); font-size: 0.85rem; margin: 6px 0 0; }

.tips { display: flex; gap: 8px; }

.tips button {
  flex: 1;
  padding: 10px 0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-weight: 800;
}

.tips button[aria-pressed="true"] { border-color: var(--theme-color); background: #fff4f2; }

/* What the percentage comes to, said under the row. */
.tipsaid { margin: 8px 0 0; }

/* Shut, not merely unchosen: the same grey the checkout wears when the
   cart is under the delivery minimum, so the two read as one rule. */
.tips button[disabled] {
  opacity: 0.35;
  filter: grayscale(1);
  cursor: default;
  pointer-events: none;
}

/* The custom tip grows open under the buttons instead of popping up. */
.tipother {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, margin 0.25s ease;
  margin: 0;
}

.tipother.is-open { max-height: 70px; margin-top: 8px; }

.tipother__row {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding-left: 12px;
}

.tipother__sign { font-weight: 800; color: var(--theme-color2); }

.tipother input {
  flex: 1;
  width: 100%;
  padding: 12px 12px 12px 6px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  outline: none;
}

.codegrab { display: flex; gap: 8px; }

.codegrab input { text-transform: uppercase; font-size: 16px; }

.codegrab button {
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  background: var(--theme-color2);
  color: #fff;
  font-weight: 800;
}

.sumline { display: flex; justify-content: space-between; padding: 4px 0; gap: 12px; }

.sumline--total { font-weight: 800; font-size: 1.15rem; border-top: 2px solid var(--line); margin-top: 6px; padding-top: 10px; }

.sumline__good { color: var(--success-color); font-weight: 700; }

.orderlist { margin: 0 0 10px; }

/* Count, dish and price across the top; the buttons on their own row
   underneath, so they sit in the same place whatever the line holds. */
.orderline { display: grid; grid-template-columns: auto 1fr auto; gap: 0 12px; padding: 7px 0; border-bottom: 1px solid var(--smoke-color3); }

.orderline__qty { color: var(--body-color); font-weight: 700; flex: none; }

.orderline__what { flex: 1; }

.orderline__name { font-weight: 700; }

.orderline__mods { color: var(--body-color); font-size: 0.84rem; }

.orderline__name { display: block; }

/* A dot before each choice, hung in the indent so a choice that wraps
   lines up under its own first word. */
.orderline__mod {
  display: block;
  position: relative;
  padding-left: 24px;
  color: var(--body-color);
  font-size: 0.84rem;
  line-height: 1.45;
}

.orderline__mod::before { content: "\2022"; position: absolute; left: 12px; }

.orderline__tag { color: var(--theme-color); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }

.orderline__price { font-weight: 800; flex: none; }

.problem { color: var(--error-color); font-weight: 700; margin: 8px 0; }

.fineline { color: var(--body-color); font-size: 0.82rem; }

#card-slot { margin: 10px 0; min-height: 44px; }

/*---------- Loyalty ----------*/

.points {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef7f6;
  border: 1px solid #cfe8e6;
}

.points strong { color: var(--theme-color2); }

.points select { margin-top: 8px; width: 100%; padding: 10px; border: 1.5px solid #cfe8e6; border-radius: 10px; font: inherit; }

.points label { display: flex; gap: 8px; align-items: center; font-weight: 600; margin-top: 8px; }

.points input[type="checkbox"] { width: 18px; height: 18px; }

/*---------- Confirmation ----------*/

.done { text-align: center; padding: 26px 0; max-width: 520px; margin: 0 auto; }

.done__mark {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--success-color);
  color: #fff;
  display: grid;
  place-items: center;
}

.done__mark svg { width: 74px; height: 74px; display: block; }

/* The tick is a stroke so it can draw itself; without motion it is
   simply there. 48 is comfortably longer than the path. */
.done__tick {
  fill: none;
  stroke: #fff;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 0;
}

/* The halo that ripples out once the check is in. */
.done__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--success-color);
  opacity: 0;
  pointer-events: none;
}

.done h2 { font-family: var(--title-font); font-size: 1.8rem; margin: 0 0 6px; text-transform: uppercase; }

.done__state {
  display: inline-block;
  margin: 12px 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--smoke-color4);
  font-weight: 800;
}

/* The slim store footer: the door, the phone, the way home. */
/* The texting program, stated on the page rather than hidden behind the
   checkout. A2P review reads this, and so does anybody curious about
   what they are agreeing to before they agree to it. */
.smsnote {
  max-width: 760px;
  margin: 34px auto 0;
  padding: 18px 18px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white-color, #fff);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--body-color, #4c5560);
}

.smsnote h2 {
  margin: 0 0 8px;
  font-family: var(--title-font);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--theme-color2, #14212e);
}

.smsnote ul { margin: 0 0 10px; padding-left: 20px; }
.smsnote li { margin: 0 0 6px; }
.smsnote a { color: var(--theme-color, #eb1400); font-weight: 600; }

.storefoot { border-top: 1px solid var(--line); margin-top: 34px; padding: 16px 16px 0; text-align: center; }
.storefoot__links { margin: 0; font-size: 0.9rem; color: var(--body-color, #4c5560); display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.storefoot__links a { color: var(--theme-color2, #14212e); font-weight: 600; text-decoration: none; }
.storefoot__links a:hover { text-decoration: underline; }

/* The Square credit, quiet at the very bottom of the page. */
.poweredby-foot {
    margin: 0;
    text-align: center;
    color: var(--muted, #8a8f98);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    padding: 26px 0 30px;
}

/* The rewards band: what the points buy, pictured, right at checkout. */
.prizeband { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0 4px; -webkit-overflow-scrolling: touch; }
.prizecard { flex: 0 0 118px; border: 1px solid var(--line); border-radius: 12px; background: var(--white-color); padding: 0 0 8px; cursor: pointer; text-align: center; font: inherit; color: inherit; }
.prizecard img { width: 100%; height: 66px; object-fit: cover; border-radius: 11px 11px 0 0; display: block; }
.prizecard__blank { display: block; height: 66px; line-height: 66px; font-size: 1.4rem; background: #f4f1ea; border-radius: 11px 11px 0 0; }
.prizecard__points { display: block; font-weight: 800; color: #1d7a43; margin-top: 6px; font-size: 0.85rem; }
.prizecard__name { display: block; font-size: 0.8rem; line-height: 1.25; padding: 2px 6px 0; }
.prizecard--far { opacity: 0.45; cursor: default; }
.cartline__pts { color: #1d7a43; font-weight: 700; white-space: nowrap; }
.orderline__tag--reward { color: #1d7a43; }
/*
 * The cart sheet's mark on a line that sold out after it was added.
 * The sheet hangs off the body, outside #store, so it is styled by its
 * own class alone.
 */
.orderline__tag--gone { color: var(--error-color); }
/* The quiet "Show my points" tap inside a locked points box. */
#store .points__ask { width: auto; padding: 8px 0 0; text-align: left; text-decoration: underline; }
.cartline__x { border: none; background: #f6e9e8; color: #b3261e; width: 26px; height: 26px; border-radius: 50%; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.cartline__end .cartline__x { margin-left: 8px; vertical-align: middle; }
.cartline__dealsaid { font-weight: 800; }

/* The points box, line by line, and the rank pill beside the count. */
.points__row { margin: 0 0 6px; }
.points__row--head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rankpill { background: var(--theme-color2, #14212e); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.rankpill::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8.6%201.5h-4.2l4.4%208.2%203-1.6z'%20fill%3D'rgba(255%2C255%2C255%2C.72)'%2F%3E%3Cpath%20d%3D'M15.4%201.5h4.2l-4.4%208.2-3-1.6z'%20fill%3D'rgba(255%2C255%2C255%2C.55)'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'15.2'%20r%3D'6.4'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; }
.rankpill--diamond::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M6%204h12l4.2%206.2L12%2021.5%201.8%2010.2z'%20fill%3D'%23fff'%2F%3E%3Cpath%20d%3D'M1.8%2010.2h20.4L12%2021.5z'%20fill%3D'rgba(255%2C255%2C255%2C.6)'%2F%3E%3C%2Fsvg%3E"); }
.rankpill--basic { background: #6d7a86; }
.rankpill--silver { background: linear-gradient(135deg, #8a949e, #6f7a85); }
.rankpill--gold { background: linear-gradient(135deg, #d2a013, #a87908); }
.rankpill--platinum { background: linear-gradient(135deg, #6b8ba1, #4c6b80); }
.rankpill--diamond { background: linear-gradient(135deg, #35b4e3, #147bb0); }
.sheet--pickprize { max-width: 460px; }
.sheet--pickprize .prizeband { padding-top: 12px; }

/*---------- Motion: entrances and presses, kept quick and quiet ----------*/

@media (prefers-reduced-motion: no-preference) {
    @keyframes scb-rise {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes scb-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes scb-pop {
        from { opacity: 0; transform: translateY(16px) scale(0.97); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Every veil fades on, and whatever sheet rides it pops up. */
    .veil { animation: scb-fade 0.18s ease-out; }
    .veil .sheet { animation: scb-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1); }

    /* When anime.js is aboard it drives these itself. */
    .scb-anime .veil .sheet, .scb-anime .dishes .dish { animation: none; }

    /* Screens rise as they are drawn: the menu, checkout, the receipt. */
    .dishes, .shop-head, .checkout, .done { animation: scb-rise 0.28s ease-out; }

    /* The order-in mark, in three beats: the circle pops, the check
       draws itself across it, and a ring ripples out and fades. */
    .done__mark { animation: scb-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); }
    .done__tick { animation: scb-draw 0.38s cubic-bezier(0.65, 0, 0.35, 1) 0.32s both; }
    .done__mark::after { animation: scb-halo 0.7s ease-out 0.6s both; }

    @keyframes scb-draw {
        from { stroke-dashoffset: 48; }
        to { stroke-dashoffset: 0; }
    }

    @keyframes scb-halo {
        from { opacity: 0.6; transform: scale(1); }
        to { opacity: 0; transform: scale(1.7); }
    }

    /* The cart bar slides in when something first lands in the bag. */
    .cartbar { animation: scb-rise 0.26s ease-out; }

    /* Rows and cards arrive gently inside redrawn lists. */
    .orderline, .cartline, .prizecard, .drinkcard, .nudge { animation: scb-rise 0.22s ease-out; }

    /* Presses feel pressed; cards lift a hair under the finger. */
    .bigbtn, .tips button, .prizecard, .drinkcard, .nudge button, .cartline__tools button,
    .cartline__x, .sheet__x, .howpick button, .dish {
        transition: transform 0.12s ease, box-shadow 0.16s ease;
    }

    .bigbtn:active, .tips button:active, .prizecard:active, .drinkcard:active,
    .nudge button:active, .cartline__tools button:active, .cartline__x:active { transform: scale(0.96); }

    .dish:hover, .prizecard:not(.prizecard--far):hover, .drinkcard:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(20, 33, 46, 0.1);
    }

    .bigbtn:hover:not(:disabled) { transform: translateY(-1px); }

    /* The bag badge lands with a little bounce when the count moves. */
    @keyframes scb-bump {
        0% { transform: scale(1); }
        45% { transform: scale(1.35); }
        100% { transform: scale(1); }
    }

    .shop-top__count { animation: scb-bump 0.3s ease-out; }
}

/* The doors, said at the top of every view. */
.standingrow { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 14px; }
.standing { display: inline-block; border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 0.84rem; }
.standing--open { background: #e7f4ec; color: #1d7a43; }
.standing--soon { background: #fdf3e0; color: #9a6b0f; }
.standing--shut { background: #fdecea; color: #b3261e; }
.standing--where { background: #f2f2ef; color: #4c5560; font-weight: 600; }

/* The rewards pitch card: short lines, the medals, one tap. */
.joinpitch__cta { display: block; margin: 4px 0 6px; font-family: var(--title-font); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; font-size: 1.05rem; color: var(--theme-color3); }

.joinpitch { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; text-align: center; text-decoration: none; color: inherit; }
.joinpitch:hover { color: inherit; }
.joinpitch__title { display: block; font-family: var(--title-font); text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.03em; color: var(--theme-color2, #14212e); }
.joinpitch__line { display: block; color: var(--body-color, #4c5560); font-size: 0.86rem; margin: 3px 0 9px; }
.joinpitch__more { display: block; color: var(--theme-color, #e8272d); font-weight: 800; font-size: 0.88rem; margin-top: 9px; }
.medalrow { display: flex; justify-content: center; gap: 14px; }
.medalrow span { position: relative; width: 27px; height: 27px; background-image: var(--icon); background-position: center; background-repeat: no-repeat; background-size: contain; }
.medal--basic { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8.6%201.5h-4.2l4.4%208.2%203-1.6z'%20fill%3D'%23d64541'%2F%3E%3Cpath%20d%3D'M15.4%201.5h4.2l-4.4%208.2-3-1.6z'%20fill%3D'%23a83a36'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'15.2'%20r%3D'6.6'%20fill%3D'%23cd7f32'%20stroke%3D'%239c5e1f'%20stroke-width%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%2011.7l1.1%202.2%202.4.3-1.8%201.7.5%202.4-2.2-1.2-2.2%201.2.5-2.4-1.8-1.7%202.4-.3z'%20fill%3D'%23e8a55f'%2F%3E%3C%2Fsvg%3E"); }
.medal--silver { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8.6%201.5h-4.2l4.4%208.2%203-1.6z'%20fill%3D'%23d64541'%2F%3E%3Cpath%20d%3D'M15.4%201.5h4.2l-4.4%208.2-3-1.6z'%20fill%3D'%23a83a36'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'15.2'%20r%3D'6.6'%20fill%3D'%23c3c8ce'%20stroke%3D'%238e979f'%20stroke-width%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%2011.7l1.1%202.2%202.4.3-1.8%201.7.5%202.4-2.2-1.2-2.2%201.2.5-2.4-1.8-1.7%202.4-.3z'%20fill%3D'%23e6eaee'%2F%3E%3C%2Fsvg%3E"); }
.medal--gold { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8.6%201.5h-4.2l4.4%208.2%203-1.6z'%20fill%3D'%23d64541'%2F%3E%3Cpath%20d%3D'M15.4%201.5h4.2l-4.4%208.2-3-1.6z'%20fill%3D'%23a83a36'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'15.2'%20r%3D'6.6'%20fill%3D'%23f0be3f'%20stroke%3D'%23c9930f'%20stroke-width%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%2011.7l1.1%202.2%202.4.3-1.8%201.7.5%202.4-2.2-1.2-2.2%201.2.5-2.4-1.8-1.7%202.4-.3z'%20fill%3D'%23ffdd85'%2F%3E%3C%2Fsvg%3E"); }
.medal--platinum { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M8.6%201.5h-4.2l4.4%208.2%203-1.6z'%20fill%3D'%23d64541'%2F%3E%3Cpath%20d%3D'M15.4%201.5h4.2l-4.4%208.2-3-1.6z'%20fill%3D'%23a83a36'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'15.2'%20r%3D'6.6'%20fill%3D'%237d9cae'%20stroke%3D'%2354748a'%20stroke-width%3D'1.3'%2F%3E%3Cpath%20d%3D'M12%2011.7l1.1%202.2%202.4.3-1.8%201.7.5%202.4-2.2-1.2-2.2%201.2.5-2.4-1.8-1.7%202.4-.3z'%20fill%3D'%23b9d0dd'%2F%3E%3C%2Fsvg%3E"); }
.medal--diamond { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M6%204h12l4.2%206.2L12%2021.5%201.8%2010.2z'%20fill%3D'%2335b4e3'%2F%3E%3Cpath%20d%3D'M1.8%2010.2h20.4L12%2021.5z'%20fill%3D'%23147bb0'%2F%3E%3Cpath%20d%3D'M8.8%204.4l3.2%205.4%203.2-5.4z'%20fill%3D'%237fd4f2'%2F%3E%3C%2Fsvg%3E"); }

/* On a phone the checkout stacks into one long river; each section
   gets its own bank so they stop blending together. Desktop keeps
   its two-column layout untouched. */
@media (max-width: 899px) {
    .field--tips { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #fff; }
    .checkout__side { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #fff; margin-top: 20px; }
    .checkout__side > .field { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 10px; }
    .checkout__side p.sheet__label:not(:first-child) { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
}

/* The confirmation, carded instead of a run of sentences. */
.done__sub { color: var(--body-color, #4c5560); margin: 2px 0 16px; }
.done__card { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 18px 16px; max-width: 400px; margin: 0 auto 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.done__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body-color, #6b7280); }
.done__when { font-family: var(--title-font); font-size: 1.7rem; color: var(--theme-color2, #14212e); line-height: 1.1; }
.done__where { color: var(--theme-color2, #14212e); font-weight: 600; font-size: 0.9rem; text-decoration: underline; }
.done__card .done__state { margin-top: 8px; }
.done__card--points { background: #eef7f1; border-color: #cde7d6; }
.done__earned { font-family: var(--title-font); font-size: 1.6rem; color: #1d7a43; line-height: 1.1; }
.done__balance { color: #38614a; font-size: 0.9rem; }
.done__bill { display: flex; justify-content: center; align-items: baseline; gap: 14px; margin: 4px 0 16px; color: var(--body-color, #4c5560); font-size: 0.95rem; }
.done__bill a { color: var(--theme-color2, #14212e); font-weight: 600; }
.done__card--points .rankpill { margin-bottom: 4px; }
.done__card--nopoints { background: #f7f7f5; border-color: var(--line); }
.done__nopts { font-weight: 800; color: var(--theme-color2, #14212e); }
.done__card--nopoints .done__balance { color: var(--body-color, #6b7280); max-width: 320px; }

/* The pay button while the charge runs: a spinner and a pulse, so a
   slow card network never looks like a frozen screen. Deliberately
   outside the reduced-motion guard: this is feedback, not garnish. */
.bigbtn--busy { opacity: 0.88; pointer-events: none; animation: scb-busypulse 1.6s ease-in-out infinite; }
.bigbtn--busy::after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    vertical-align: -2px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: scb-spin 0.7s linear infinite;
}

@keyframes scb-spin {
    to { transform: rotate(360deg); }
}

@keyframes scb-busypulse {
    0%, 100% { opacity: 0.88; }
    50% { opacity: 1; }
}

/* The welcome back card: the last order, one tap away. */
.again {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 0 12px;
}

.again__x {
    position: absolute;
    top: 6px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 1.3rem;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}

.again__title { margin: 0 18px 10px 0; font-weight: 800; }

.again__rows { display: grid; gap: 6px; margin: 0 0 10px; }

.again__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
}

.again__what { min-width: 0; }

.again__mods { display: block; color: #777; font-size: 0.82rem; }

.again__each { font-weight: 700; white-space: nowrap; }

.again__note { margin: 0 0 10px; color: #777; font-size: 0.85rem; }

.again__btn { padding: 12px; font-size: 0.98rem; }

/* Express checkout: hidden until Square says a wallet works here. */
.express { display: none; }

.express--on { display: block; }

.express__row { display: grid; gap: 10px; }

.applepay-btn {
    display: none;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: #000;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.express--apple .applepay-btn { display: block; }

/* Safari paints the real Apple Pay button; anywhere else the labeled
   black fallback stands in so the pill is never blank. */
@supports (-webkit-appearance: -apple-pay-button) {
    .applepay-btn {
        -webkit-appearance: -apple-pay-button;
        -apple-pay-button-type: pay;
        -apple-pay-button-style: black;
    }
}

@supports not (-webkit-appearance: -apple-pay-button) {
    .applepay-btn::after { content: 'Apple Pay'; }
}

.gpay-slot { display: none; min-height: 46px; }

.express--google .gpay-slot { display: block; }

.orline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    color: #999;
    font-size: 0.85rem;
}

.orline::before,
.orline::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* The code verdict, when the code actually landed. */
.problem.verdict--good { color: #1d7a43; }

/* The way out of an applied code. */
.codeoff {
    margin-left: 8px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: #e8f2ec;
    color: #1d7a43;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

/* A fully covered order asks for no money: the pay machinery folds
   away (and simply hides for anyone who asked for less motion). */
.express.express--sleep, .freehide { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
    .express.express--sleep, .freehide { animation: scb-foldaway 0.35s ease-out forwards; }

    @keyframes scb-foldaway {
        from { opacity: 1; max-height: 360px; }
        to { opacity: 0; max-height: 0; margin: 0; padding: 0; visibility: hidden; }
    }
}

/* The card slot's floor would hold a folded gap open. */
#card-slot.freehide { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
    .express.express--sleep, .freehide { display: none; }
}

/* The driver line on a delivery confirmation. */
.done__driver { margin: 6px 0 0; font-weight: 700; color: var(--theme-color2); }

.done__driver--done { color: #1d7a43; }

/* Confetti lives on its own sheet over everything and takes no taps. */
.confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 80;
}

/*---------- The medal ladder, dropping in and catching the light ----------*/

/* The shine is a sweep of light clipped to each medal's own shape;
   every rank shines a little harder than the one before it. */
.medalrow span::after {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: linear-gradient(115deg, transparent 35%, rgba(var(--gleam, 255, 255, 255), var(--shine, 0.6)) 50%, transparent 65%);
    background-size: 250% 100%;
    background-position: 200% 0;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
}

.medal--basic { --shine: 0.55; --gleam: 255, 214, 170; }
.medal--silver { --shine: 0.7; --gleam: 240, 244, 248; }
.medal--gold { --shine: 0.85; --gleam: 255, 236, 160; }
.medal--platinum { --shine: 0.95; --gleam: 205, 228, 240; }
.medal--diamond { --shine: 1; --gleam: 170, 230, 255; }

@media (prefers-reduced-motion: no-preference) {
    .medalrow--live span {
        opacity: 0;
        animation: scb-medaldrop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
    }

    .medalrow--live span::after { animation: scb-shine 0.75s ease-out both; }

    .medalrow--live span:nth-child(1) { animation-delay: 0s; }
    .medalrow--live span:nth-child(2) { animation-delay: 0.14s; }
    .medalrow--live span:nth-child(3) { animation-delay: 0.28s; }
    .medalrow--live span:nth-child(4) { animation-delay: 0.42s; }
    .medalrow--live span:nth-child(5) { animation-delay: 0.56s; }

    /* Each shine starts as its medal settles. */
    .medalrow--live span:nth-child(1)::after { animation-delay: 0.4s; }
    .medalrow--live span:nth-child(2)::after { animation-delay: 0.54s; }
    .medalrow--live span:nth-child(3)::after { animation-delay: 0.68s; }
    .medalrow--live span:nth-child(4)::after { animation-delay: 0.82s; }
    .medalrow--live span:nth-child(5)::after { animation-delay: 0.96s; }

    /* Diamond also glows once it is in. */
    .medalrow--live .medal--diamond { animation: scb-medaldrop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.56s both, scb-diamondglow 1.3s ease-in-out 1s forwards; }

    @keyframes scb-medaldrop {
        from { opacity: 0; transform: translateY(-22px); }
        70% { opacity: 1; transform: translateY(3px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* The sweep is gone when it is done: it fades over its last
       stretch and rests at nothing, so no stripe is left behind. */
    @keyframes scb-shine {
        from { opacity: 1; background-position: 200% 0; }
        80% { opacity: 1; }
        to { opacity: 0; background-position: -100% 0; }
    }

    @keyframes scb-diamondglow {
        0%, 100% { filter: drop-shadow(0 0 0 rgba(53, 180, 227, 0)); }
        50% { filter: drop-shadow(0 0 7px rgba(53, 180, 227, 0.95)); }
    }
}

/* Diamond's sparkle: three little four-point stars that twinkle
   around it once it has landed. Still and unseen without motion. */
.medal__spark, .medal__spark::before, .medal__spark::after {
    position: absolute;
    display: block;
    background: #1f9ecf;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    pointer-events: none;
}

.medal__spark { top: -4px; right: -5px; width: 10px; height: 10px; }
.medal__spark::before { content: ''; top: 13px; left: -13px; width: 6px; height: 6px; background: #35b4e3; }
.medal__spark::after { content: ''; top: 22px; left: 2px; width: 5px; height: 5px; background: #35b4e3; }

@media (prefers-reduced-motion: no-preference) {
    /* The stars follow the one shine. */
    .medalrow--live .medal__spark { animation: scb-sparkle 0.7s ease-in-out 1.7s 2; }
    .medalrow--live .medal__spark::before { animation: scb-sparkle 0.7s ease-in-out 1.95s 2; }
    .medalrow--live .medal__spark::after { animation: scb-sparkle 0.7s ease-in-out 2.2s 2; }

    @keyframes scb-sparkle {
        0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
        50% { opacity: 1; transform: scale(1) rotate(25deg); }
    }
}

/*---------- Rank up: the moment after a checkout that crossed a rung ----------*/

.rankup {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(21, 49, 67, 0.94);
    color: #fff;
    text-align: center;
}

.rankup--out { opacity: 0; transition: opacity 0.25s ease; }

.rankup__stage { width: 100%; max-width: 420px; }

.rankup__zone { position: relative; height: 180px; margin-bottom: 6px; }

.rankup__old, .rankup__medal {
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--icon) center / contain no-repeat;
}

.rankup__old { width: 70px; height: 70px; opacity: 0.9; }

.rankup__medal { width: 150px; height: 150px; }

/* The flash ring and the shine, both on the new badge. */
.rankup__medal::after {
    content: '';
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    opacity: 0;
    pointer-events: none;
}

.rankup__medal::before {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    background: linear-gradient(115deg, transparent 35%, rgba(var(--gleam, 255, 255, 255), 0.95) 50%, transparent 65%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 200% 0;
    opacity: 0;
    pointer-events: none;
}

/* Six stars ringing the badge, all outside its silhouette so every
   one reads, wearing the badge's own metal. */
.rankup__star {
    position: absolute;
    display: block;
    background: rgb(var(--gleam, 223, 244, 255));
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    pointer-events: none;
}
.rankup__star:nth-of-type(1) { top: -12px; left: 118px; width: 22px; height: 22px; }
.rankup__star:nth-of-type(2) { top: 28px; left: -24px; width: 16px; height: 16px; }
.rankup__star:nth-of-type(3) { top: 98px; left: -20px; width: 13px; height: 13px; }
.rankup__star:nth-of-type(4) { top: 142px; left: 22px; width: 15px; height: 15px; }
.rankup__star:nth-of-type(5) { top: 122px; left: 140px; width: 18px; height: 18px; }
.rankup__star:nth-of-type(6) { top: 50px; left: 158px; width: 12px; height: 12px; }

.rankup__title {
    margin: 0;
    font-family: var(--banger-font);
    font-size: 3.4rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-color3);
}

.rankup__name {
    margin: 8px 0 0;
    font-family: var(--title-font);
    font-size: 1.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rankup__perk { margin: 6px 0 20px; color: rgba(255, 255, 255, 0.82); }

.rankup__go { max-width: 260px; margin: 0 auto; }

@media (prefers-reduced-motion: no-preference) {
    .rankup { animation: scb-fade 0.25s ease-out; }
    .rankup__old { animation: scb-rankold 1s ease-in both; }
    .rankup__medal { opacity: 0; animation: scb-rankslam 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.9s both; }
    /* The ring waits unseen (no backwards fill) while the badge slams,
       then grows out from behind it. */
    .rankup__medal::after { animation: scb-rankring 0.8s ease-out 1.35s forwards; }
    .rankup__medal::before { animation: scb-shine 0.9s ease-out 1.45s both; }
    .rankup__star { animation: scb-sparkle 0.7s ease-in-out 2; }
    .rankup__star:nth-of-type(1) { animation-delay: 1.9s; }
    .rankup__star:nth-of-type(2) { animation-delay: 2.05s; }
    .rankup__star:nth-of-type(3) { animation-delay: 2.2s; }
    .rankup__star:nth-of-type(4) { animation-delay: 2.35s; }
    .rankup__star:nth-of-type(5) { animation-delay: 2.5s; }
    .rankup__star:nth-of-type(6) { animation-delay: 2.65s; }
    .rankup__title { opacity: 0; animation: scb-rankslam 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 1.25s both; }
    .rankup__name, .rankup__perk, .rankup__go { opacity: 0; animation: scb-rise 0.35s ease-out both; }
    .rankup__name { animation-delay: 1.55s; }
    .rankup__perk { animation-delay: 1.7s; }
    .rankup__go { animation-delay: 1.9s; }

    @keyframes scb-rankold {
        0%, 45% { opacity: 0.9; transform: scale(1); }
        100% { opacity: 0; transform: scale(0.4) translateY(-46px); }
    }

    @keyframes scb-rankslam {
        from { opacity: 0; transform: scale(2.6); }
        70% { opacity: 1; transform: scale(0.94); }
        to { opacity: 1; transform: scale(1); }
    }

    @keyframes scb-rankring {
        from { opacity: 0.8; transform: scale(0.55); }
        to { opacity: 0; transform: scale(1.75); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .rankup__old { display: none; }
}

/*---------- Motion, round two: the small moments ----------*/

/* The dish on its way to the bag. */
.flychip {
    position: fixed;
    z-index: 65;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--theme-color) center / cover no-repeat;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* The menu's shape while it loads. */
.skeleton { padding: 4px 0; }

.skeleton__pill, .skeleton__head, .skeleton__card {
    display: block;
    background: linear-gradient(90deg, #eeeeee 25%, #f7f7f7 45%, #eeeeee 65%);
    background-size: 220% 100%;
    border-radius: 12px;
}

.skeleton__pill { width: 210px; height: 30px; margin: 0 auto 18px; border-radius: 999px; }

.skeleton__head { width: 140px; height: 26px; margin: 0 0 14px; }

.skeleton__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.skeleton__card { height: 190px; border-radius: 14px; }

/* The stamp on a dish that sold out. */
.dish { position: relative; }

.dish__stamp {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%) rotate(-12deg);
    padding: 4px 12px;
    border: 3px solid var(--theme-color);
    border-radius: 8px;
    color: var(--theme-color);
    background: rgba(255, 255, 255, 0.82);
    font-family: var(--banger-font);
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* On a narrow card the two words wrap, and without this "OUT" sits
       hard against the left edge under "SOLD", which reads as a
       crooked stamp rather than a tilted one. */
    text-align: center;
    line-height: 1.05;
    pointer-events: none;
}

/* Where the member stands inside their rank. */
.rankbar {
    height: 8px;
    margin: 4px 0 10px;
    border-radius: 999px;
    background: #e5e9ec;
    overflow: hidden;
}

.rankbar__fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #9aa4ad;
    transition: width 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rankbar__fill--silver { background: linear-gradient(90deg, #9aa4ad, #c3c8ce); }
.rankbar__fill--gold { background: linear-gradient(90deg, #c9930f, #f0be3f); }
.rankbar__fill--platinum { background: linear-gradient(90deg, #54748a, #7d9cae); }
.rankbar__fill--diamond { background: linear-gradient(90deg, #147bb0, #35b4e3); }

/* The check beside an applied code. */
.codetick {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -3px;
}

.codetick svg { width: 18px; height: 18px; display: block; }

.codetick path {
    fill: none;
    stroke: #1d7a43;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 26;
    stroke-dashoffset: 0;
}

/* The stamp across a bill that came to nothing. */
.covered {
    display: block;
    width: max-content;
    margin: 6px auto 2px;
    padding: 3px 14px;
    border: 3px solid #1d7a43;
    border-radius: 8px;
    color: #1d7a43;
    font-family: var(--banger-font);
    font-size: 1.35rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-6deg);
}

/* The welcome moment wears the join words a little softer. */
.rankup--join .rankup__title { color: #7fd4f2; }

@media (prefers-reduced-motion: no-preference) {
    .shop-top__bag.is-bumped { animation: scb-bagbump 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2); }

    .shop-top__count.is-tick { animation: scb-counttick 0.4s ease-out; }

    .skeleton__pill, .skeleton__head, .skeleton__card { animation: scb-shimmer 1.3s linear infinite; }

    .dish__stamp--slam { animation: scb-stamp 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }

    .covered--slam { animation: scb-stamp 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }

    .codetick--draw path { animation: scb-draw-short 0.4s ease-out 0.05s both; }

    .standing--flip { animation: scb-flip 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1); }

    @keyframes scb-bagbump {
        0% { transform: scale(1); }
        35% { transform: scale(1.28); }
        70% { transform: scale(0.94); }
        100% { transform: scale(1); }
    }

    @keyframes scb-counttick {
        0% { transform: translateY(8px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    @keyframes scb-shimmer {
        from { background-position: 120% 0; }
        to { background-position: -120% 0; }
    }

    @keyframes scb-stamp {
        from { opacity: 0; transform: translateX(-50%) rotate(-12deg) scale(2.2); }
        70% { opacity: 1; transform: translateX(-50%) rotate(-12deg) scale(0.94); }
        to { opacity: 1; transform: translateX(-50%) rotate(-12deg) scale(1); }
    }

    @keyframes scb-draw-short {
        from { stroke-dashoffset: 26; }
        to { stroke-dashoffset: 0; }
    }

    @keyframes scb-flip {
        from { transform: rotateX(90deg); opacity: 0; }
        to { transform: rotateX(0); opacity: 1; }
    }
}

/* The covered stamp is not centered by translateX, so its slam keeps
   only the rotation and the scale. */
@media (prefers-reduced-motion: no-preference) {
    .covered--slam { animation-name: scb-stamp-flat; }

    @keyframes scb-stamp-flat {
        from { opacity: 0; transform: rotate(-6deg) scale(2.2); }
        70% { opacity: 1; transform: rotate(-6deg) scale(0.94); }
        to { opacity: 1; transform: rotate(-6deg) scale(1); }
    }
}

/* The family's test switch: this band means nothing on the page is real. */
.shop-test { position: sticky; top: 0; z-index: 1300; margin: 0; padding: 8px 14px; background: #EB1400; color: #fff; font: 700 13px/1.35 Inter, sans-serif; text-align: center; }

/* Undo every deal and let them all be pitched again. Test store only. */
.shop-test__reset { display: inline-block; margin-left: 4px; padding: 2px 11px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.shop-test__reset:hover { background: rgba(255, 255, 255, 0.16); }

/* The offers ride one row: swipe sideways, or walk with the arrows. */
.nudgerow { display: flex; align-items: stretch; gap: 6px; }
.nudgetrack { display: flex; flex: 1 1 auto; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-width: 0; }
.nudgetrack::-webkit-scrollbar { display: none; }
/* No scroll-behavior smooth here: paired with a mandatory snap it
   stalls mid-animation on some engines. The jump is instant and the
   snap squares it; a finger swipe keeps its native glide. */
.nudgetrack .nudge { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.nudgearrow { flex: 0 0 auto; align-self: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.25rem; line-height: 1; padding: 0 0 3px; color: var(--theme-color2, #14212e); cursor: pointer; }
.nudgearrow:disabled { opacity: 0.35; cursor: default; }

/* The delivery facts, worn as chips instead of a paragraph. */
.shipcard { margin: 4px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.shipcard__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 0.78rem; font-weight: 700; color: var(--theme-color2, #14212e); }
.chip--min { background: #fdecec; border-color: #f3b8b8; color: #a11212; }
.chip--free { background: #e7f4ec; border-color: #bfe3cd; color: #1d7a43; }
.shipcard__line { margin: 8px 0 0; font-size: 0.82rem; color: var(--body-color, #4c5560); text-align: center; }

/* The delivery minimum, standing in the doorway: the shortfall is said
   loud, and everything past it waits in grey until the cart clears it. */
.holdcard { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed #a11212; background: #fdecec; display: flex; flex-direction: column; gap: 4px; }
.holdcard strong { color: #a11212; font-size: 1rem; }
.holdcard span { font-size: 0.85rem; color: var(--body-color, #4c5560); }
.holdcard button { margin-top: 8px; align-self: flex-start; border: 0; border-radius: 999px; background: #a11212; color: #fff; font-weight: 800; font-size: 0.9rem; padding: 9px 16px; cursor: pointer; }
.checkout__form .holdcard ~ * { opacity: 0.35; pointer-events: none; filter: grayscale(1); user-select: none; }
.is-held { opacity: 0.35; pointer-events: none; filter: grayscale(1); user-select: none; }

/* The confirmation's money line, worn under the headline. */
.done__total { margin: 2px 0 14px; font-size: 1.05rem; color: var(--body-color, #4c5560); text-align: center; }
.done__total strong { color: var(--theme-color2, #14212e); font-size: 1.25rem; }

/* The receipt, a button nobody can miss. */
.done__receipt { display: block; text-align: center; text-decoration: none; background: var(--theme-color2, #14212e); color: #fff; }
.done__receipt[aria-disabled='true'] { opacity: 0.75; cursor: default; }

/* The arrival, worn as the delivery card's headline. */
.shipcard__eta { margin: 0 0 10px; text-align: center; }
.shipcard__eta-label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body-color, #4c5560); }
.shipcard__eta strong { display: block; font-family: var(--title-font); font-size: 1.7rem; line-height: 1.2; color: var(--theme-color2, #14212e); }

/* The slide's drink deals: the old price crossed, the deal in green. */
.drinkcard__was { color: var(--theme-color, #e8272d); font-weight: 600; }
.drinkcard__now { color: #1d7a43; font-weight: 800; }

/* The marketing box at checkout: optional, unticked, never in the way. */
.smsopt { display: flex; gap: 9px; align-items: flex-start; margin: 2px 0 14px; font-size: 0.82rem; color: var(--body-color, #4c5560); cursor: pointer; }
.smsopt input { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; }

/* The legal links under the store's footer. */
.foot-legal { margin: 6px 0 0; font-size: 0.8rem; opacity: 0.75; }
.shipcard__eta-why { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 600; color: var(--body-color, #4c5560); }

/* Changing a dish's choices from the checkout, without walking back. */
.orderline__edit { display: inline-block; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 0.76rem; font-weight: 700; color: var(--theme-color2, #14212e); cursor: pointer; }
.orderline__edit:hover { border-color: var(--theme-color3, #ff9924); }

/* Edit at the left, Remove holding the right edge. Remove keeps that
   edge on its own too, on a line with nothing to edit. */
.orderline__acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 5px 0 1px; }
.orderline__acts:empty { display: none; }
.orderline__acts .orderline__drop { margin-left: auto; }

.orderline__drop { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 0.72rem; font-weight: 700; color: #b3261e; cursor: pointer; }
.orderline__drop:hover { border-color: #b3261e; background: #fdf3f2; }

/* Said in the dish sheet, while the choice is still theirs to unmake. */
.dealwarn { margin: 2px 0 10px; padding: 9px 12px; border-radius: 10px; border-left: 3px solid var(--theme-color3, #ff9924); background: #fff7ec; color: var(--theme-color2, #14212e); font-size: 0.84rem; line-height: 1.5; }
.dealwarn strong { display: block; }

/*
 * The dish sheet's buy bar. The quantity and Add to cart ride the
 * bottom of the sheet while the choices scroll under them, so the
 * button is in sight the moment the sheet opens. Sticky, not fixed: it
 * keeps its own place at the end of the list, so scrolled to the
 * bottom it sits under the last option, never over it. The sheet hangs
 * off the body, outside #store, so it is styled by its own class alone.
 */
.sheet__buy {
  position: sticky;
  /* Sticky stops at the sheet's bottom padding, which would leave a
     strip of options showing under the bar. Reaching down by that same
     padding puts the bar flush on the sheet's edge; the bar's own
     bottom padding keeps the button clear of a phone's home bar. */
  bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 12px -16px 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--white-color);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 14px -12px rgba(18, 18, 18, 0.3);
}
.sheet__buy .qtyline { margin: 0; gap: 8px; }
.sheet__buy .bigbtn { flex: 1 1 170px; width: auto; }
/* A deal warning still reads before the button, on a row of its own. */
.sheet__buy .dealwarn { flex: 1 1 100%; order: -1; margin: 0; }

/*
 * Food first on a phone. One value line, the rewards pitch as one
 * tappable line, and the delivery terms on the pill. White, like every
 * other content band.
 */
#store .shop-why { margin: 0 0 8px; text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--theme-color2); }
#store .joinline { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white-color); color: inherit; text-decoration: none; font-size: 0.86rem; }
#store .joinline:hover { color: inherit; border-color: var(--theme-color3); }
#store .joinline strong { flex: 0 0 auto; color: var(--theme-color); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
/* One line, whatever the phone: a longer sentence trails off rather than wrap. */
#store .joinline__said { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#store .joinline__go { flex: 0 0 auto; font-size: 1.3rem; line-height: 1; color: var(--theme-color); }
/* The terms can run to two lines on a phone; a full pill would pinch them. */
#store .standing--terms { border-radius: 14px; line-height: 1.35; text-align: center; }
/* At the foot of the menu now, so it needs room above rather than below. */
#store .cater-note { margin: 22px 0 14px; }
/* "The menu" stays the page's heading for screen readers, out of sight. */
#store .shop-head--menu { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* With the heading out of sight, the first category needs no gap above. */
#store .shop-head--menu + .cat-head { margin-top: 4px; }

/*
 * A shorter checkout on a phone. The total and the wallet buttons at
 * the top, and the pickup time as one line that opens into the usual
 * two boxes. A desktop keeps its two columns and never sees either.
 */
#store .payfirst { display: none; }
#store .whenline { display: none; }
/* The wallet's own message line takes no room until it has something to say. */
#store .expresswrap > .problem:empty { display: none; }
/* A wallet payment waiting on a phone number: the ask, and the way to finish. */
#store .heldpay { margin: 12px 0 0; padding: 12px 14px; border: 1.5px solid var(--theme-color3); border-radius: 12px; background: var(--white-color); }
#store .heldpay strong { display: block; color: var(--theme-color2); }
#store .heldpay .fineline { margin: 4px 0 10px; }
#store .heldpay .bigbtn--quiet { padding: 10px; }
#store .expresswrap--held .express__row { opacity: 0.35; pointer-events: none; }

@media (max-width: 899px) {
    #store .payfirst { display: block; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--white-color); }
    #store .glance__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--theme-color2); }
    #store .glance__parts { margin: 2px 0 0; color: var(--body-color); font-size: 0.82rem; }
    #store .whenline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
    #store .whenline__change { flex: none; padding: 4px 0; border: 0; background: none; color: var(--theme-color); font-weight: 800; text-decoration: underline; }
    #store .whenpick:not(.is-open) > .field { display: none; }
    #store .whenpick.is-open > .whenline { display: none; }
}