/* ------------------------------------------------------------------
   Web ordering interface for the POS.
   Self-contained: no CDN, no framework — the POS often runs on a LAN
   with no outbound internet, so everything here is local.
   ------------------------------------------------------------------ */

:root {
  /* Warm bakery-counter palette: cream paper, one red, everything else warm
     grey. Retuning these tokens is what re-skins the whole storefront. */
  --bg:         #fdf8f4;
  --surface:    #ffffff;
  --line:       #ece1d8;
  --line-soft:  #f6efe9;
  --ink:        #1c1512;
  --ink-2:      #6d635c;
  --ink-3:      #9c918a;
  --brand:      #b4232a;
  --brand-dark: #8e1b21;
  --brand-soft: #fbeaea;
  /* Sale badges, the Discount rail and the cart totals. The same red as the
     brand: the page only ever spends one hue, and shape tells a badge from a
     button. The in-stock text stays green (--ok), so those two signals still
     read apart. */
  --price:      #b4232a;
  --ok:         #17914f;
  --ok-soft:    #e6f5ed;
  --warn:       #b9791a;
  --warn-soft:  #fdf3e2;
  --danger:     #c4302b;
  --danger-soft:#fdecea;
  --radius:     16px;
  --radius-sm:  12px;
  --pill:       999px;
  --shadow:     0 1px 2px rgba(40, 24, 16, .05), 0 2px 8px rgba(40, 24, 16, .06);
  --shadow-lg:  0 14px 38px rgba(40, 24, 16, .18);
  --header-h:   64px;

  /* Display face for headlines. No CDN here — the POS often runs on a LAN
     with no route out — so this is a system serif stack. Georgia ships on
     Windows and macOS; the Khmer face follows it so non-Latin headings still
     resolve rather than falling back to a default sans. */
  --display:    Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman",
                "Noto Serif Khmer", "Noto Sans Khmer", serif;

  /* Body face. Khmer first so that script resolves to a real Khmer sans
     before the Latin fallbacks get a say. A token rather than an inline
     stack so anything that has to match body text can say so in one word. */
  --sans:       "Noto Sans Khmer", "Khmer OS Battambang", "Khmer OS", -apple-system,
                BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Footer surface. The brand red taken down to a deep oxblood shade — same
     hue (~357deg), darker and a touch more saturated, so the slab reads as
     the brand colour at ground level rather than as a second colour.
     Deliberately well below --brand in lightness: anything brand-coloured
     that lands in the footer has to stay legible against it. Body text lands
     at 12.9:1 on the light end of the gradient, headings higher. */
  --ftr-bg:     #37090b;
  --ftr-bg-2:   #210506;
  --on-ftr:     rgba(255, 255, 255, .86);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px; /* room for the mobile cart bar */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 14px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------- header ----------------------------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.hdr-in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.015em;
  white-space: nowrap;
  /* Shrinkable, with the ellipsis on .brand-name below: between 480 and
     700px a long shop name would otherwise shoulder the search pill along
     the row rather than giving way itself. */
  flex-shrink: 1;
  min-width: 0;
}

.brand img { height: 32px; width: auto; border-radius: 50%; flex-shrink: 0; }

/* The name is the whole brand when no logo is set, so it gets the ellipsis:
   it is the one thing in the header allowed to give way, and it must yield
   before the search pill does rather than shouldering it off the row. */
.brand-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------ site nav ------------------------------ */

/* Anchors into the sections further down the page, not separate routes:
   the storefront is one page plus a product detail view. */
.nav {
  display: none;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
}

.nav a {
  padding: 8px 12px;
  border-radius: var(--pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.nav a:hover { background: var(--line-soft); color: var(--ink); }

/* The pill is the container now, so the category selector can sit inside it
   next to the field rather than beside a second bordered box. */
.search {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 560px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  transition: border-color .15s, background .15s;
}

.search:focus-within {
  border-color: var(--brand);
  background: var(--surface);
}

/* Scope selector. Native arrow kept — it is the one control here a shopper
   must recognise instantly as a menu. */
.search-cat {
  flex: none;
  max-width: 165px;
  height: 38px;
  padding: 0 6px 0 15px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 999px 0 0 999px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
  outline: none;
  cursor: pointer;
  text-overflow: ellipsis;
}

.search-cat:focus-visible { color: var(--brand); }

.search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search input {
  width: 100%;
  height: 38px;
  padding: 0 38px 0 38px;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  outline: none;
}

.search .icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

.search .clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  border: 0; background: none;
  color: var(--ink-3);
  padding: 6px;
  line-height: 0;
  border-radius: 50%;
  display: none;
}

.search.has-value .clear { display: block; }
.search .clear:hover { background: var(--line-soft); color: var(--ink); }

/* The buttons at the end of the header, as one unit. Same gap as .hdr-in so
   grouping them changed no spacing. */
.hdr-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color .15s, color .15s, background .15s;
}

.login-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.login-btn .label { display: none; }

/* Ink rather than red: it is the one permanent action in the header, and the
   red is spent on the count badge and the page's own calls to action. */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--pill);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  flex-shrink: 0;
}

.cart-btn:hover { background: #362720; }
.cart-btn .label { display: none; }

.cart-count {
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--pill);
  background: var(--brand);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}

/* The header is sticky, so anything the nav or the grid jumps to needs to
   clear it — without this the section's eyebrow lands behind the header. */
#listTop, #how, #visit, #counter {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* -------------------------------- hero -------------------------------- */

.hero {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 44px 0 48px;
}

.hero-in {
  display: grid;
  gap: 34px;
  align-items: center;
}

.hero .display { font-size: clamp(40px, 11vw, 78px); }

.hero-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.hero-acts .btn { height: 46px; padding: 0 24px; font-size: 14.5px; }

/* Facts, not decoration: each one is read off the store's own settings, and
   an item whose data is missing is left out rather than filled in. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}

.hero-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-facts svg { color: var(--brand); flex-shrink: 0; }


/* One of these items is a link. It keeps the row's size and weight so the
   row still reads as one line of facts, and earns an underline on hover
   rather than being coloured differently from its neighbours. */
.hero-facts a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.hero-facts a:hover { color: var(--brand); text-decoration-color: currentColor; }

/* The rating's star is the one filled icon in the row, so it gets the amber
   a star is expected to be rather than the brand red the outline icons use.
   --warn is already that colour elsewhere in this sheet; no new token. */
.hero-facts .fact-rating svg { color: var(--warn); }
.hero-facts .fact-rating { font-weight: 600; }

/* The photo, with a red plate offset behind its top corner. Both layers are
   the same shape, so the accent reads as a second sheet of paper. */
.hero-art {
  position: relative;
  isolation: isolate;
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: -12px -12px auto auto;
  width: 62%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background: var(--brand);
  z-index: -1;
}

.hero-art img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow);
}

/* ---------------------------- counter gallery ---------------------------- */

.counter {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 54px 0 58px;
}

.counter-in {
  display: grid;
  gap: 30px;
  align-items: center;
}

.counter-say .display { font-size: clamp(28px, 5vw, 40px); }

.counter-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--brand);
  font-weight: 700;
  font-size: 14px;
}

.counter-link:hover { text-decoration: underline; }
.counter-link svg { transition: transform .15s; }
.counter-link:hover svg { transform: translateX(3px); }

/* A wide shot across the top with the rest paired beneath it. The first is
   always the full width; a second one with nothing after it takes the full
   width too, so a shop with two photographs does not get a lone half. */
.counter-art {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.counter-shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line-soft);
  box-shadow: var(--shadow);
}

.counter-shot:first-child,
.counter-shot:nth-child(2):last-child { grid-column: 1 / -1; }

.counter-shot img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.counter-shot:first-child img { aspect-ratio: 21 / 9; }

/* The label sits on the photograph, so it carries its own opaque ground
   rather than relying on whatever happens to be behind it. */
.counter-shot figcaption {
  position: absolute;
  left: 12px; bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 6px 13px;
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------ how it works ------------------------------ */

.steps-sec {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 48px 0 54px;
}

/* Both bands are cream, so they read as one stretch of page and the rule
   between them would just be a seam. */
.counter + .steps-sec {
  border-top: 0;
  padding-top: 8px;
}

.steps {
  display: grid;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}

.steps h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
}

.steps p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

/* --------------------------- category pills --------------------------- */

/* The rail is a wrapping row of pills sitting under the section heading, not
   a boxed strip of its own: the menu reads as one block of the page. */
.cats {
  background: transparent;
  border: 0;
  padding: 0;
}

.cats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Collapsed hides the overflow tiles; index.php inlines display:none on the
   ones past the visible count and #catsToggle reveals them. */
.cat {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--pill);
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

.cat:hover { border-color: var(--ink-3); color: var(--ink); }

/* Only categories with a real uploaded picture get a thumbnail — a pill with
   a placeholder disc reads as broken, so those stay text-only. */
.cat-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  overflow: hidden;
  flex-shrink: 0;
  display: grid; place-items: center;
  margin-left: -4px;
}

.cat-ico img { width: 100%; height: 100%; object-fit: cover; }

.cat-ico.all,
.cat-ico.promo {
  background: none;
  width: 15px; height: 15px;
  color: currentColor;
  margin-left: -2px;
}

.cat-ico.all svg,
.cat-ico.promo svg { width: 15px; height: 15px; }

.cat-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15ch;
}

.cat.active,
.js-promo.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.cat.active .cat-ico { background: rgba(255, 255, 255, .22); }

.cats-toggle {
  border: 1px solid transparent;
  background: none;
  color: var(--brand);
  font-weight: 700;
  font-size: 13px;
  height: 38px;
  padding: 0 6px;
  border-radius: var(--pill);
}

.cats-toggle:hover { text-decoration: underline; }

/* --------------------------- subcategories --------------------------- */

.subs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0 2px;
  scrollbar-width: none;
}

.subs::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* Sub-category picture. Round and small — it identifies the chip at a glance
   without turning the rail into a second tile row. Padding tightens on the
   image side so the chip keeps its pill proportions. */
.chip-ico {
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: -5px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.chip:hover { border-color: var(--ink-3); }

.chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* --------------------------- section heading --------------------------- */

/* Shared by every headed block on the page: a red eyebrow, a serif display
   heading, then an optional line of supporting text. */
.eyebrow {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.display {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.015em;
  color: var(--ink);
}

.lede {
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
}

/* The menu block's head. On a wide screen the pills pull up beside the
   heading; below 820px they drop under it and the row becomes one column. */
/* This class shares its element with .wrap, so it may only ever set vertical
   padding — a shorthand here would zero .wrap's side gutters and run the menu
   off both edges of a phone. */
.sec {
  padding-top: 46px;
  padding-bottom: 8px;
}

.sec-head {
  display: grid;
  gap: 18px;
  align-items: end;
  padding-bottom: 22px;
}

.sec-head .display { font-size: clamp(28px, 5.2vw, 42px); }

.sec-title .count {
  display: block;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  letter-spacing: 0;
}

/* Sort / in-stock controls. Secondary to the pills, so they sit on their own
   line under them rather than competing for the heading row. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.select {
  height: 38px;
  padding: 0 32px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239c918a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 11px center;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}

.switch input { accent-color: var(--brand); width: 15px; height: 15px; }

/* ---------------------------- product grid ---------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding-bottom: 30px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}

.card:hover {
  box-shadow: var(--shadow);
  border-color: #dfd2c7;
  transform: translateY(-2px);
}

/* Tinted media panel. Product photos here are cut-outs on white more often
   than full-bleed shots, so a warm ground behind them beats a white void. */
.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--line-soft);
  overflow: hidden;
}

.card-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 14px;
  transition: transform .3s;
}

/* Products with no picture of their own. A quiet mark on the warm ground
   beats the white "no image available" bitmap sitting in the panel like a
   sheet of paper someone left there. */
.card-media.is-empty {
  display: grid;
  place-items: center;
  color: #cbb8a6;
}

.card-media.is-empty svg { width: 34px; height: 34px; }

.card:hover .card-media img { transform: scale(1.05); }

.badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  border-radius: var(--pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.badge-promo { background: var(--price); color: #fff; }
.badge-out   { background: rgba(28, 21, 18, .8); color: #fff; left: auto; right: 10px; }

.card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

/* Category line, and the tinted tag beside it. Both are small caps; the tag
   is the one that earns a background because it is the exceptional label. */
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.card-cat {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-tag {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.card-name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-desc {
  margin: 0;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.price-was {
  color: var(--ink-3);
  font-size: 12.5px;
  text-decoration: line-through;
}

.stock {
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stock::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.stock-in  { color: var(--ok); }
.stock-low { color: var(--warn); }
.stock-out { color: var(--danger); }

/* Price and the add button share the card's last line, the way a menu prices
   a dish on the right of its name. */
.card-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

/* The card's add button sits beside the price rather than under it, so it
   shrinks to its label instead of filling the card. */
.card-foot .btn {
  height: 36px;
  padding: 0 15px;
  font-size: 12.5px;
}

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); }

.btn-ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-2);
}

.btn-ghost:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }

.btn-block { width: 100%; }
.card-foot .btn-block { width: auto; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #b32a23; }

/* Clear-cart question, asked inside the drawer footer in place of the
   Checkout / Clear buttons. Tinted rather than outlined so it reads as a
   held breath in the flow, not as another pair of things to do. */
.confirm {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
}

.confirm-q {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.confirm-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.confirm-acts .btn { width: 100%; }
.confirm-acts .btn-ghost { background: var(--surface); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-added {
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
}

/* ---------------------------- empty / skeleton ---------------------------- */

.empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--ink-3);
}

.empty svg { margin: 0 auto 14px; color: #c8ced8; }
.empty h3 { margin: 0 0 6px; color: var(--ink-2); font-size: 15px; }
.empty p { margin: 0; font-size: 13px; }

.skel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.skel-media { aspect-ratio: 1 / 1; }

.skel-line {
  height: 11px;
  margin: 10px 11px;
  border-radius: 5px;
}

.skel-media, .skel-line {
  background: linear-gradient(90deg, #eef0f3 25%, #e4e7ec 37%, #eef0f3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ------------------------------ pagination ------------------------------ */

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 0 32px;
  flex-wrap: wrap;
}

.pager button {
  min-width: 36px; height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.pager button:hover:not(:disabled):not(.active) { border-color: var(--ink-3); }
.pager button.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager .dots { color: var(--ink-3); padding: 0 2px; }

/* -------------------------------- drawer -------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
  z-index: 50;
}

.scrim.open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  z-index: 51;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
  box-shadow: var(--shadow-lg);
}

.drawer.open { transform: translateX(0); }

.drawer-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

/* The heading takes the slack, so the order link sits beside the close button
   rather than being pushed to the middle by space-between. */
.drawer-hdr h2 { margin: 0 auto 0 0; font-size: 16px; font-weight: 700; }

/* A quiet outline button: it is a way back to something already done, not a
   step in ordering, so it must not compete with Checkout below. */
.drawer-order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  height: 32px;
  padding: 0 12px;
  margin-right: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}

.drawer-order:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

/* Hidden until shop.js has an order to point at — the attribute alone loses
   to display:inline-flex above. */
.drawer-order[hidden] { display: none; }

/* What the lookup form asks for, above the two fields. */
.orders-hint {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

/* One past order. A whole row is the link, so the target is the size of the
   row on a phone rather than a few words in it. */
.order-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}

.order-row:last-child { border-bottom: 0; }
.order-row:hover { color: var(--brand); }
.order-main { flex: 1; min-width: 0; }
.order-ref { font-weight: 700; font-size: 14px; }
.order-when { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.order-amt { font-weight: 700; font-size: 14px; white-space: nowrap; }
.order-go { color: var(--ink-3); flex-shrink: 0; }
.order-row:hover .order-go { color: var(--brand); }

.icon-btn {
  border: 0;
  background: none;
  color: var(--ink-3);
  padding: 7px;
  line-height: 0;
  border-radius: 8px;
}

.icon-btn:hover { background: var(--line-soft); color: var(--ink); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px;
  -webkit-overflow-scrolling: touch;
}

.drawer-foot {
  border-top: 1px solid var(--line);
  padding: 14px 16px;
  flex-shrink: 0;
  background: var(--surface);
}

/* ------------------------------ cart lines ------------------------------ */

.line {
  display: flex;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.line:last-child { border-bottom: 0; }

.line-img {
  width: 62px; height: 62px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fafbfc;
}

.line-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

.line-main { flex: 1; min-width: 0; }

.line-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-price { font-size: 12.5px; color: var(--ink-3); }

.line-warn {
  font-size: 11.5px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 6px;
  padding: 3px 7px;
  margin-top: 5px;
  display: inline-block;
}

.line-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  height: 32px;
}

.qty button {
  width: 32px; height: 100%;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1;
  display: grid; place-items: center;
}

.qty button:hover:not(:disabled) { background: var(--line-soft); color: var(--ink); }
.qty button:disabled { opacity: .35; cursor: not-allowed; }

.qty input {
  width: 42px; height: 100%;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.line-total { font-weight: 700; font-size: 14px; }

.line-del {
  border: 0; background: none;
  color: var(--ink-3);
  font-size: 12px;
  padding: 4px 0;
  text-decoration: underline;
}

.line-del:hover { color: var(--danger); }

/* ------------------------------- totals ------------------------------- */

.totals { margin-bottom: 12px; }

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-2);
  padding: 3px 0;
}

.total-row.grand {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  border-top: 1px solid var(--line);
  margin-top: 7px;
  padding-top: 10px;
}

.total-row.grand .amount { color: var(--price); }

/* ------------------------------- forms ------------------------------- */

.field { margin-bottom: 13px; }

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 5px;
}

.field .req { color: var(--danger); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="email"],
.field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.field input:focus, .field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.field textarea { resize: vertical; min-height: 62px; }

.field .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.seg label {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  transition: border-color .15s, background .15s;
  margin: 0;
}

.seg label:hover { border-color: var(--ink-3); }

.seg input { accent-color: var(--brand); margin: 0; }

.seg input:checked + span { color: var(--brand); font-weight: 600; }

.seg label:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.alert {
  padding: 10px 13px;
  border-radius: 9px;
  font-size: 13px;
  margin-bottom: 13px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.alert-error { background: var(--danger-soft); color: #96201a; }
.alert-info  { background: var(--brand-soft); color: var(--brand-dark); }

/* --------------------------- mobile cart bar --------------------------- */

.cartbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 39;
  box-shadow: 0 -2px 12px rgba(16, 24, 40, .07);
}

.cartbar.show { display: flex; }
.cartbar-info { font-size: 12.5px; color: var(--ink-3); }
.cartbar-total { font-size: 17px; font-weight: 700; color: var(--price); }

/* ------------------------------ toast ------------------------------ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  max-width: calc(100vw - 32px);
  text-align: center;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---------------------------- detail page ---------------------------- */

.crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 0;
  font-size: 12.5px;
  color: var(--ink-3);
  flex-wrap: wrap;
}

.crumbs a:hover { color: var(--brand); }
.crumbs .sep { color: #c8ced8; }

.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 24px;
}

.detail-media {
  aspect-ratio: 1 / 1;
  background: #fafbfc;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.detail-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }

.detail h1 { margin: 0 0 8px; font-size: 19px; line-height: 1.35; }
.detail .sub { color: var(--ink-3); font-size: 13px; margin: 0 0 12px; }

.detail .price { font-size: 26px; }

.spec {
  border-top: 1px solid var(--line-soft);
  margin-top: 16px;
  padding-top: 14px;
}

.spec-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}

.spec-row dt { color: var(--ink-3); min-width: 110px; margin: 0; }
.spec-row dd { margin: 0; color: var(--ink-2); }

.detail-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ------------------------- confirmation page ------------------------- */

.receipt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin: 20px 0 32px;
  max-width: 620px;
  margin-inline: auto;
}

.receipt-top { text-align: center; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }

.tick {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  display: grid; place-items: center;
  margin: 0 auto 14px;
}

/* The mark takes the colour of the stage it reports: amber while the shop has
   not looked at the order yet, green once it is accepted, red when it is not.
   Green for all three would be a lie in one case out of three. */
.tick.is-pending  { background: var(--warn-soft);   color: var(--warn); }
.tick.is-rejected { background: var(--danger-soft); color: var(--danger); }

.order-state { margin-top: 10px; }

.order-state-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}

.receipt-top h1 { margin: 0 0 6px; font-size: 20px; }
.receipt-top p { margin: 0; color: var(--ink-2); font-size: 13.5px; }

.ref {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 16px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}

.receipt-items { padding: 6px 0; }

.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}

.receipt-line:last-child { border-bottom: 0; }
.receipt-line .qty-lbl { color: var(--ink-3); font-size: 12.5px; }

.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--warn-soft);
  color: var(--warn);
}

/* The same three colours the POS dashboard gives these stages, so staff and
   shopper read one scheme. Amber is already the default above. */
.status-pill.is-confirmed { background: var(--ok-soft);     color: var(--ok); }
.status-pill.is-rejected  { background: var(--danger-soft); color: var(--danger); }

/* --------------------------- delivery areas --------------------------- */

/* Plain text, not links: nothing in the catalogue is filterable by province,
   so linking these would promise a filter that does not exist. */
/* ------------------------------ footer ------------------------------ */

.ftr {
  margin-top: 40px;
  background: linear-gradient(180deg, var(--ftr-bg), var(--ftr-bg-2));
  color: var(--on-ftr);
  font-size: 13px;
  /* A lit top edge, so the slab reads as catching light rather than as a
     rectangle of colour butted against the page. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.ftr-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px 34px;
  padding-top: 34px;
  padding-bottom: 32px;
}

/* Small tracked caps rather than bold body size — quieter, and it separates
   the labels from the links without shouting. */
.ftr h3 {
  margin: 0 0 15px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

/* Khmer has no letter case and its clusters break apart under tracking;
   Chinese does not want it either. */
html[lang="km"] .ftr h3,
html[lang="zh"] .ftr h3 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}

/* The brand column leads with the store name, so its heading needs air. */
.ftr-brand h3 { margin-top: 26px; }

.ftr-name {
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}

/* Capped so the address wraps into a readable measure instead of running the
   full width of the column. */
.ftr-addr,
.ftr-tel {
  margin: 0 0 7px;
  max-width: 34ch;
  line-height: 1.7;
}

.ftr a { color: var(--on-ftr); transition: color .15s; }
.ftr a:hover,
.ftr a:focus-visible { color: #fff; text-decoration: underline; }

.ftr-links { margin: 0; padding: 0; list-style: none; }
.ftr-links li { margin-bottom: 11px; }
.ftr-links li:last-child { margin-bottom: 0; }
.ftr-links a { display: inline-block; }

.ftr-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.ftr-social a { display: inline-flex; align-items: center; gap: 9px; }

/* Outlined at rest so the footer stays monochrome; each brand's colour only
   appears on hover, where it reads as feedback rather than as decoration. */
.soc {
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-ftr);
  transition: background .15s, border-color .15s, color .15s;
}

.ftr-social a:hover .soc { color: #fff; }
.ftr-social a:hover .soc-fb { background: #1877f2; border-color: #1877f2; }
.ftr-social a:hover .soc-yt { background: #ff0000; border-color: #ff0000; }
.ftr-social a:hover .soc-tg { background: #229ed9; border-color: #229ed9; }

/* Standing note under the social links. Quieter than the address above it —
   it is orientation, not something to read. */
.ftr-note {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.6;
  opacity: .75;
}

/* Live viewer count. The dot carries the "right now" meaning, so it pulses —
   gently, and not at all for anyone who asked for less motion. */
.ftr-live {
  margin: 7px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.6;
}

.ftr-live-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
  animation: ftr-live-pulse 2.4s ease-out infinite;
}

@keyframes ftr-live-pulse {
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ftr-live-dot { animation: none; }
}

.ftr-qr {
  width: 128px;
  padding: 8px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 10px rgba(6, 24, 48, .28);
}

.ftr-qr img { width: 100%; height: auto; }

/* Kept at the full cream rather than a dimmed variant — anything dimmer drops
   under AA on this background. The smaller size carries the hierarchy. */
.ftr-qr-desc {
  margin: 9px 0 0;
  max-width: 210px;
  font-size: 12px;
  line-height: 1.6;
}

.ftr-bar { border-top: 1px solid rgba(255, 255, 255, .24); }

/* Centred: the legal line is the only thing left in this bar since the
   payment tiles came out, so it sits in the middle rather than hugging the
   left edge the way it did when it was one half of a split row. */
.ftr-bar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  padding-top: 20px;
  padding-bottom: 22px;
}

/* One line where there is room, stacked where there is not. The separator is
   a real element rather than a pseudo-element so it can simply be dropped at
   narrow widths — a wrapped line must not open with a dangling middot.
   Centred on both axes, so the stacked form stays centred too. */
.ftr-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 5px 10px;
  text-align: center;
}

.ftr-copy,
.ftr-dev { margin: 0; font-size: 12.5px; }

/* Set in caps, which is a styling choice rather than a wording one, so it
   lives here instead of being baked into the translated string — every
   language keeps its own sentence case in the source, and the Khmer copy is
   unaffected because the script has no upper case to transform to. Small caps
   text sets tight, so it takes a little tracking to stay readable. */
.ftr-dev {
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ftr-sep { display: none; opacity: .45; }

/* Underlined at rest, because this link sits inside a sentence rather than in
   a list where its role would be obvious — but hairline and offset, so it
   marks the link without drawing a hard line under the footer. */
.ftr-dev a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .42);
  transition: color .15s, text-decoration-color .15s;
}

.ftr-dev a:hover,
.ftr-dev a:focus-visible { color: #fff; text-decoration-color: currentColor; }

/* The map link that replaced the delivery-areas grid. Same card as that
   block used, so the footer's shape did not change - one link inside it
   instead of a wrapping list of places. */
.findus {
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.findus-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

.findus-link svg { color: var(--brand); flex-shrink: 0; }
.findus-link:hover { color: var(--brand); }
.findus-go { transition: transform .15s; }
.findus-link:hover .findus-go { transform: translateX(3px); }

.to-top {
  position: fixed;
  right: 16px;
  bottom: 84px; /* clear of the mobile cart bar */
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}

.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--brand); border-color: var(--brand); }

/* ----------------------------- responsive ----------------------------- */

/* The logo image drops on a phone and the shop name carries the brand on its
   own — a 32px disc next to 16px type is the first thing to go when the row
   gets tight, and the name is the part that actually says whose shop this is.
   The brand stays a link, so the way back to the homepage survives.

   The sign-in link goes too: a phone visitor is a customer, and staff opening
   the till on one can go straight to /login. The POS shortcut a signed-in
   member of staff sees in its place is left alone — that one is a working
   route back to the till, not an invitation. Button labels return at 700px. */
@media (max-width: 479px) {
  .brand { font-size: 16px; }
  .brand img { display: none; }
  .login-btn--signin { display: none; }
  .login-btn { padding: 0 10px; }
}

/* Keep the header's buttons hard against the right edge. Above 1000px the
   nav's auto margins already push them there — adding a third auto margin
   here would pull the nav off centre — and pages that keep the search in the
   header have its flex:1 doing the same. But the homepage moves the search
   down beside the grid it filters, so below the nav's breakpoint nothing was
   left to fill the row and Order sat next to the brand. */
@media (max-width: 999px) {
  .hdr-actions { margin-left: auto; }
}

/* A phone header has no room for the scope selector next to the field; the
   category rail sits right below and does the same job there. */
@media (max-width: 699px) {
  .search-cat { display: none; }
  .search input { border-radius: 999px; }
}

@media (min-width: 700px) {
  .cart-btn .label,
  .login-btn .label { display: inline; }
  /* Wide enough that copyright and credit are certain to share a line. */
  .ftr-sep { display: inline; }
}

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .ftr-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 820px) {
  .wrap { padding: 0 20px; }
  .grid { grid-template-columns: repeat(4, 1fr); }

  /* Room for the hero to become two columns and for the pills to pull up
     beside the menu heading. */
  .hero { padding: 68px 0 76px; }
  .counter { padding: 76px 0 80px; }
  /* Words narrower than pictures: the text is a short paragraph, the gallery
     is the point of the section. */
  .counter-in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 54px; }
  .hero-in { grid-template-columns: 1fr 1fr; gap: 56px; }
  /* No hero picture: the words take the row on their own rather than
     leaving half of it empty, and keep a readable measure instead of
     running the full page width. */
  .hero-in.solo { grid-template-columns: minmax(0, 760px); }
  .sec { padding-top: 64px; }
  /* The heading keeps a readable measure and the pills take what is left,
     wrapping within it. A shop with many categories used to squeeze the
     heading down to two or three words a line. */
  .sec-head {
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 20px 40px;
  }
  .cats-grid { justify-content: flex-end; }
  .detail { grid-template-columns: minmax(0, 420px) 1fr; gap: 28px; padding: 22px; }
  .detail h1 { font-size: 22px; }
  body { padding-bottom: 0; }
  .cartbar { display: none !important; }
  .ftr-cols {
    grid-template-columns: 1.5fr 1fr 1fr auto;
    gap: 30px 40px;
    padding-top: 48px;
    padding-bottom: 40px;
  }
  .to-top { right: 20px; bottom: 20px; } /* no cart bar to clear here */
}

/* The nav needs its own room before it appears; below this the sections are
   a short scroll away anyway. */
@media (min-width: 1000px) {
  .nav { display: flex; }
}

@media (min-width: 1080px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* Two cards to a phone screen leaves each one about 125px of content, and
   the price plus "Add to order" need more than that on one line. The button
   label is nowrap by design — a two-line button reads as broken — so the row
   used to push the button past the card edge, where .card's overflow clipped
   it. Stack the foot instead and let the button take the full width: the tap
   target gets bigger, which is the right trade on a phone anyway. */
@media (max-width: 699px) {
  .card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }
  .card-foot .btn,
  .card-foot .btn-block { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .hdr, .cats, .hero, .counter, .steps-sec, .findus, .cartbar, .drawer, .scrim, .btn, .ftr, .to-top { display: none !important; }
  body { background: #fff; padding: 0; }
  .receipt { border: 0; box-shadow: none; }
}