/* Lightweight ordering redesign: denser product list, bottom-sheet cart,
   sticky bag bar, manual dark mode. Dark mode uses its own dedicated
   tokens (--surface/--text/etc.) rather than redefining the site's
   --ink/--paper/--cream globally, so it stays scoped to the ordering
   experience (header/shop/cart/checkout) without breaking buttons,
   badges, and sections elsewhere on the page that use those directly. */

:root {
  --surface: var(--paper);
  --surface-alt: var(--cream);
  --text: var(--ink);
  --text-soft: #62675f;
  --text-faint: #8b8f83;
  --edge: var(--line);
  --edge-soft: #e8e2d3;
  --accent: var(--olive);
  --add-bg: var(--text);
  --add-ink: var(--surface);
  --chip-bg: #fff;
  --chip-active-bg: var(--text);
  --chip-active-ink: var(--surface);
}

:root[data-theme="dark"] {
  --surface: #1b2117;
  --surface-alt: #20261b;
  --text: #f2eee1;
  --text-soft: #b9bcac;
  --text-faint: #7c8171;
  --edge: #3a4232;
  --edge-soft: #2c3327;
  --accent: #a9b795;
  --add-bg: #f2eee1;
  --add-ink: #1b2117;
  --chip-bg: #232a1d;
  --chip-active-bg: #f2eee1;
  --chip-active-ink: #1b2117;
}

body {
  background: var(--surface);
}
.site-header, .cart, .checkout-dialog, .payment-dialog, .bottom-bar {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ---- minimal header: hamburger, logo mark, bag/theme toggle. Sticky
   plain bar - no cover photo. ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lite-header {
  height: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--edge-soft);
  position: sticky;
  top: 0;
  z-index: 25;
  overflow: visible;
}
.brand-logo {
  display: block;
  min-width: 0;
  overflow: visible;
  text-align: center;
}
/* Sized so the dog's ears hang past the header's own bottom border -
   the image is taller than the header's row needs, and the negative
   margin pulls the row's own height back down (as far as layout is
   concerned) while the ear tips still paint past the border line, on
   top of whatever scrolls beneath (percentage margins are relative to
   the container's WIDTH, not this element's own height, so the
   overflow amount is a fixed px tuned to each width below). */
.brand-logo img {
  display: inline-block;
  width: clamp(300px, 86vw, 460px);
  max-width: 100%;
  height: auto;
  /* Overlap scales with the logo's own width (not a fixed px) so the
     ears keep crossing the header border by the same proportion at
     every screen size - percentage margins are relative to the
     container's width in CSS, which happens to track this closely
     enough given the fixed image aspect ratio. Floor of 300px matches
     (never falls below) the old fixed mobile size - 64vw undershot it
     on every common phone width, which was the opposite of the ask. */
  margin-bottom: clamp(-40px, -7.48vw, -26px);
  position: relative;
  z-index: 2;
}
:root[data-theme="dark"] .brand-logo img { filter: invert(1); }
.cover-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.menu-button {
  border: 1px solid var(--edge);
  background: var(--surface-alt);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  /* mobile.css (pre-redesign) sets order:4 on .menu-button for the old
     header layout - neutralize it here so hamburger/bag stay in DOM
     order (menu left, bag/toggle right) at every width. */
  order: 0;
}
.menu-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.lite-header .cart-button { color: var(--text); flex: 0 0 auto; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font: 600 14px "DM Sans", sans-serif; padding: 0; }
.lite-header .cart-button svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lite-header .cart-button #cartCount {
  display: inline-grid;
  place-items: center;
  background: var(--text);
  color: var(--surface);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
}

.theme-toggle {
  border: 1px solid var(--edge);
  background: var(--surface-alt);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 15px;
  flex: 0 0 auto;
}

/* ---- filter chips: sticky, since the cover above scrolls away ---- */
.filter-row {
  display: flex;
  gap: 22px;
  padding: 14px 5vw 14px 0;
  max-width: 720px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--edge-soft);
}
.filter-row::-webkit-scrollbar { display: none; }
/* Minimal underline tabs, not filled pill/badge shapes - selection
   reads through weight/color/underline alone. */
.filter-chip {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  border-radius: 0;
  color: var(--text-soft);
  padding: 8px 2px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
}
.filter-chip[aria-pressed="true"] {
  color: var(--text);
  border-bottom-color: var(--text);
}
.menu-utility{max-width:720px;margin:24px auto 0;padding:16px 16px 0;text-align:center;border-top:1px solid var(--edge-soft)}
.menu-utility button{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;color:var(--text-soft);font-size:12px;text-decoration:none}
.menu-utility strong{color:var(--text);font-weight:700}
.menu-utility button:hover strong{text-decoration:underline;text-underline-offset:3px}

/* ---- dense shop list: large flush photo, name, 2-line description, price ---- */
.products {
  display: block;
  padding: 0 0 80px;
  background: var(--surface);
}
.products .product-card-list {
  max-width: 720px;
  margin: 0 auto;
}
.products .menu-note {
  margin: 0 auto 4px;
  padding: 16px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.6;
}
.menu-results-status{max-width:720px;margin:13px auto 0;padding:0 16px;color:var(--text-faint);font-size:11px;text-align:center}
.menu-more{display:block;min-height:44px;margin:12px auto 0;padding:10px 20px;border:1px solid var(--edge);border-radius:999px;background:var(--surface);color:var(--text);font:700 12px "DM Sans",sans-serif;cursor:pointer}
.menu-more:hover{background:var(--surface-alt)}
.menu-more[hidden]{display:none}
.products .product-card {
  border: 0;
  border-bottom: 1px solid var(--edge-soft);
  background: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  position: relative;
  min-height: 64px;
}
.products .product-card:last-child { border-bottom: 0; }
.products .product-card[hidden] { display: none; }
/* Photo/glyph placeholder styles below are dormant for now - no
   .product-visual is rendered while real product photos aren't ready
   (see renderCatalog in app.js). Left in place so bringing images
   back later is a one-line change, not a redesign. */
.products .product-visual {
  width: 132px;
  height: 132px;
  min-height: 0;
  flex: 0 0 auto;
  border-radius: 6px;
  overflow: hidden;
}
.products .product-visual .listing-image { width: 100%; height: 100%; object-fit: cover; }
.products .bottle {
  height: auto; width: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff7e7;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-align: center;
}
.products .bottle:before { display: none; }
.products .bottle small { background: none; color: inherit; padding: 3px 0 0; margin: 0; font-size: 9px; }
.products .loaf { font-size: 46px; }
.products .product-visual.combo { background: linear-gradient(150deg, #7c8768, #4f5a3f); }
.products .badge {
  width: auto; height: auto;
  top: 6px; right: 6px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 9px;
  transform: none;
}
.products .badge.sold-out-badge { background: #6b6156; }

/* Sold-out rows read as unavailable at a glance, not just the button */
.products .product-card:has(.add-button:disabled) {
  opacity: 0.5;
}
.products .product-card:has(.add-button:disabled) .product-visual {
  filter: grayscale(0.6);
}
.products .product-info {
  padding: 14px 52px 14px 0;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
}
.products .product-info h3 {
  font: 400 28px "Allura", cursive;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* Inline status pill used in place of the (currently unused) photo
   corner badge, since there's no image corner to anchor it to. */
.products .row-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--chip-bg);
  color: var(--text-soft);
  font: 700 9px "DM Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.products .row-status-out { background: #6b6156; border-color: #6b6156; color: #fff; }
.products .product-info > p:not(.eyebrow) {
  min-height: 0;
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.products .product-info > div {
  margin-top: auto;
  justify-content: flex-start;
  gap: 8px;
}
.products .product-info strong {
  font: 700 15px "DM Sans", sans-serif;
  color: var(--text);
}
.products .add-button {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  background: var(--add-bg);
  color: var(--add-ink);
  font-size: 0;
}
/* Drawn as CSS bars rather than a text "+" glyph: font metrics (ascent/
   descent) don't match the glyph's visual ink, so text-based centering
   is always a little off regardless of flex/grid alignment. Bars center
   on exact pixel geometry instead. */
.products .add-button:before,
.products .add-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--add-ink);
  transform: translate(-50%, -50%);
}
.products .add-button:before { width: 14px; height: 2px; }
.products .add-button:after { width: 2px; height: 14px; }
.products .add-button:disabled:before,
.products .add-button:disabled:after {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0.7;
}
.products .add-button:disabled:after { transform: translate(-50%, -50%) rotate(-45deg); }

.lite-footer {
  text-align: center;
  padding: 26px 5vw 100px;
  font-size: 12px;
}
.lite-footer a { color: var(--text-soft); text-decoration: none; }

@media(max-width:600px){.filter-row{scroll-padding-inline:16px}.menu-more{width:calc(100% - 32px);max-width:420px}}

.row-stepper.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--add-bg);
  color: var(--add-ink);
  border-radius: 999px;
  padding: 5px 8px;
}
.row-stepper.stepper button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--add-ink);
  background: none;
  color: var(--add-ink);
  font-size: 13px;
  padding: 0;
  display: grid;
  place-items: center;
}
.row-stepper.stepper .qty { min-width: 12px; text-align: center; font-weight: 700; font-size: 12.5px; color: var(--add-ink); }

/* ---- sticky bag bar ---- */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: var(--surface);
  border-top: 1px solid var(--edge-soft);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.bottom-bar.show { transform: translateY(0); opacity: 1; }
.bottom-bar-pill {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--text);
  color: var(--surface);
  border-radius: 12px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  min-height: 48px;
}
.bottom-bar-pill .left { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.bottom-bar-pill .count {
  background: var(--surface);
  color: var(--text);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.bottom-bar-pill .right { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }

/* ---- hamburger nav: slides in from the left ---- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 80%);
  background: var(--surface);
  color: var(--text);
  z-index: 40;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  box-shadow: 20px 0 60px rgba(21, 32, 20, 0.2);
  display: flex;
  flex-direction: column;
}
.site-nav.open { transform: translateX(0); }
.site-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--edge-soft);
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 17px;
}
.site-nav-header button {
  border: 0;
  background: none;
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.site-nav a {
  padding: 16px 20px;
  border-bottom: 1px solid var(--edge-soft);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

/* ---- cart as a bottom sheet instead of a right-side drawer ---- */
.cart {
  background: var(--surface);
  color: var(--text);
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  left: 0;
  height: auto;
  max-height: 82vh;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px #15201433;
  transform: translateY(105%);
}
.cart.open { transform: translateY(0); }
.cart-header { padding: 20px 20px 12px; position: relative; border-bottom-color: var(--edge-soft); }
.cart-header:before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  width: 36px; height: 4px;
  border-radius: 4px;
  background: var(--edge);
  transform: translateX(-50%);
}
.cart-header h2 { font-size: 20px; margin: 2px 0 0; color: var(--text); }
.cart-header .eyebrow { display: none; }
.cart-header button { font-size: 22px; color: var(--text); }
.cart-items { padding: 4px 20px; }
.cart-items .empty { color: var(--text-faint); }

.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  grid-template-columns: none;
  border-bottom-color: var(--edge-soft);
}
.cart-item .cart-thumb {
  width: 44px; height: 44px;
  border-radius: 9px;
  flex: 0 0 auto;
  overflow: hidden;
}
.cart-item .cart-thumb .product-visual { width: 100%; height: 100%; }
.cart-item .cart-item-body { flex: 1; min-width: 0; }
.cart-item .cart-item-body p { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--text); }
.cart-item .cart-item-body small { color: var(--text-faint); font-size: 11.5px; }
.cart-item .stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--add-bg);
  color: var(--add-ink);
  border-radius: 999px;
  padding: 5px 7px;
  grid-row: auto;
  grid-column: auto;
}
.cart-item .stepper button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--add-ink);
  background: none;
  color: var(--add-ink);
  font-size: 13px;
  padding: 0;
  display: grid;
  place-items: center;
}
.cart-item .stepper .qty { min-width: 12px; text-align: center; font-weight: 700; font-size: 12.5px; color: var(--add-ink); }
.cart-item .line-total { font-weight: 700; font-size: 13px; min-width: 46px; text-align: right; color: var(--text); }

.cart-footer { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top-color: var(--edge-soft); }
.cart-footer > div { font-size: 14px; margin-bottom: 10px; color: var(--text); }
.cart-footer small { color: var(--text-faint); }
.checkout { border-radius: 12px; padding: 14px; min-height: 48px; }

/* ---- checkout dialog: tighter, calmer, theme-aware ---- */
.checkout-dialog { background: var(--surface); color: var(--text); }
.checkout-dialog h2 { font-size: 26px; margin-bottom: 16px; }
.checkout-dialog form { padding: 28px; }
.checkout-dialog small { color: var(--text-faint); }
.form-grid label { color: var(--text-soft); }
.form-grid input, .form-grid select, .form-grid textarea {
  border: 1px solid var(--edge);
  background: var(--surface-alt);
  color: var(--text);
  border-radius: 10px;
  font-size: 14.5px;
}
.order-total { border-top-color: var(--edge-soft); font-size: 15px; }
.location-panel { background: var(--surface-alt); border-color: var(--edge); }
.location-panel p { color: var(--text-soft); }
.location-status { color: var(--text-faint); }
.form-grid .field-hint { color: var(--text-faint); }
.form-grid input:user-invalid { border-color: #a44d42; }
.form-grid input:user-valid { border-color: var(--accent); }
.bank-transfer-details { background: var(--surface-alt); border-color: var(--edge); }
.bank-transfer-details > span { color: var(--accent); }
.bank-transfer-details p { color: var(--text-soft); }
.payment-note { background: var(--surface-alt); color: var(--text-soft); }

/* ---- drink customize dialog: theme-aware to match the checkout dialog
   (catalog.css styles it with the site's static --paper/--ink tokens,
   which don't follow dark mode) ---- */
.customize-dialog { background: var(--surface); color: var(--text); }
.customize-dialog .eyebrow { color: var(--accent); }
.customize-product { color: var(--text-soft); }
.customize-dialog legend { border-bottom-color: var(--edge); color: var(--text); }
.customize-dialog fieldset label { border-bottom-color: var(--edge-soft); }
.customize-dialog fieldset input { accent-color: var(--text); }
.customize-dialog fieldset small { color: var(--text-faint); }
.customize-dialog fieldset label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.customize-dialog .dialog-close { color: var(--text); }
.customize-total { color: var(--text); }
.cart-item .cart-addons { color: var(--text-faint); }

.payment-timer {
  background: var(--surface-alt);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-soft);
  margin: 0 0 16px;
}
.payment-timer strong { color: var(--text); font-variant-numeric: tabular-nums; }
.payment-timer.expiring { border-color: #a8382f; color: #a8382f; }
.payment-timer.expiring strong { color: #a8382f; }

.proof-upload {
  border: 1px solid var(--edge);
  background: var(--surface-alt);
  border-radius: 10px;
  padding: 14px;
  margin: 16px 0;
}
.proof-upload label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.proof-upload input[type="file"] {
  display: block;
  width: 100%;
  font-size: 13px;
  color: var(--text);
}
.proof-status { margin: 8px 0 0; font-size: 12.5px; color: var(--text-faint); }
.proof-status.ok { color: #4c6b3f; font-weight: 700; }
.proof-status.error { color: #a8382f; font-weight: 700; }
.primary-button { border-radius: 12px; min-height: 48px; }

/* mobile: this is the reference layout, matched closely to Grab's own
   restaurant-menu screen — large flush photos, tight header, no chrome */
@media (max-width: 640px) {
  .filter-row { padding: 12px 16px; }
  .products .product-card-list, .products .menu-note { padding-left: 16px; }
  .products .product-visual { width: 128px; height: 128px; border-radius: 4px; }
  .products .product-info { padding: 12px 60px 12px 0; }
  .products .add-button { right: 16px; }
  /* Hide the "Bag" text at narrow widths so the header has room for
     the much bigger logo now sitting in the middle column - icon +
     count is still enough to identify the cart button. */
  .lite-header .cart-label { display: none; }
}

/* desktop/tablet: same list, just given breathing room rather than
   stretching into a wide multi-column layout. */
@media (min-width: 641px) {
  .filter-row, .products .product-card-list, .products .menu-note {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Header stays a comfortable width rather than matching the narrower
     680px/760px reading column below - a thin icon+logo row pinned to
     that exact column leaves large empty margins on wide screens
     (same reasoning as .seo-header on the content pages). */
  .lite-header { padding: 12px max(24px, calc((100% - 1200px) / 2)); }
}
@media (min-width: 900px) {
  .filter-row, .products .product-card-list, .products .menu-note {
    max-width: 760px;
  }
}