/* Raging Salads — rs-ordering.css [backend]: checkout drawer, order status, live counter lines, newsletter form.
   Loaded after styles.css and uses only its tokens. Brick is never small text: --rs-ink (the site's --brick-ink,
   #7E4C16, 5.71:1 on cream) instead. Errors use --rs-error (#A2401F, 5.09:1). Targets ≥44px, inputs 16px. */
:root { --rs-error: #A2401F; --rs-ink: var(--brick-ink, #7E4C16); }
/* dark theme (styles.css): a lighter error red, 6.4:1 on the dark paper and with the dark paper colour on it */
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rs-error: #EE8A68; } }
@media screen { :root[data-theme="dark"] { --rs-error: #EE8A68; } }

.rs-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rs-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
[data-rs-focus]:focus { outline: none; box-shadow: none; }

/* ===== Menu & featured cards: sold out ===== */
.menu-card.sold-out .visual { filter: grayscale(.85); opacity: .6; }
.menu-card .tag.out { background: var(--olive); color: var(--cream); }
.menu-card .add:disabled, .feat-add:disabled { opacity: .4; transform: none; cursor: not-allowed; }
.menu-card .add:disabled:hover { background: transparent; border-color: var(--olive); color: var(--olive); transform: none; }
.feat-add:disabled:hover { background: transparent; color: var(--olive); }

/* ===== Bag pill while an order is being tracked (the pill's text hides on phones) ===== */
.cart-pill .count.rs-tracking { font-family: var(--sans); }
@media (max-width: 640px) { .cart-pill .rs-pill-word { display: none; } }   /* "RS-1042" on phones; the name stays "Order RS-1042" */
/* Phones: the bag pill is its icon and count ("Bag" stays in its accessible name) and never shrinks, so the count can't
   be pushed out of the pill when "Order now" and the language switch share the bar */
@media (max-width: 480px) {
  .cart-pill:not(:has(.rs-tracking)) > span:not(.count) { display: none; }
  .nav-actions > .cart-pill:not(:has(.rs-tracking)) { flex-shrink: 0; }
  .cart-pill { padding: 8px 12px; gap: 6px; }                      /* …and the bar keeps fitting at 360–480px */
  .nav-actions .lang-toggle { padding-left: 12px; padding-right: 12px; }   /* after the base rule below by specificity */
}

/* ===== CTA band while there is no online ordering (app.jsx) ===== */
.rs-cta-note { max-width: 34em; margin: 0 auto; font-size: 16px; line-height: 1.55; color: var(--olive); text-wrap: pretty; }

/* ===== Live counter state (Locations cards) ===== */
.rs-live { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--olive-soft); }
.rs-live .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--olive-soft); }
.rs-live.on { color: var(--olive); }
.rs-live.on .dot { background: var(--leaf); box-shadow: 0 0 0 1px var(--leaf-deep); }

.rs-loc-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; }
.rs-loc-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--olive); text-decoration: underline; text-underline-offset: 3px;
}
.rs-loc-links a:hover { color: var(--rs-ink); }

/* ===== Drawer shell ===== */
.rs-drawer { overscroll-behavior: contain; }
.rs-drawer #rs-drawer-title:focus, .rs-status-live:focus, .rs-confirm p:focus { outline: none; box-shadow: none; }   /* programmatic focus targets */
.rs-drawer header.rs-head { flex-wrap: wrap; gap: 6px 12px; padding: 22px 28px; flex: none; }
.rs-drawer header.rs-head h3 { flex: 1; min-width: 0; line-height: 1; }
.rs-back-row { flex-basis: 100%; }
.rs-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -10px 0 0 -10px; padding: 0 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--olive); border-radius: 999px;
}
.rs-back:hover { background: var(--tint); }
.rs-tape {
  flex: none; background: var(--brick); color: var(--olive-deep); text-align: center; padding: 7px 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.rs-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* generic buttons and text links inside the drawer and the forms */
.rs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rs-actions.center { justify-content: center; margin-top: 22px; }
.rs-actions > .rs-inline { align-self: center; padding: 10px 4px; }
.rs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--olive); border-radius: 999px; background: transparent; color: var(--olive); text-align: center;
  font-family: var(--display); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rs-btn:hover { background: var(--olive); color: var(--cream); }
.rs-btn.solid { background: var(--olive); color: var(--cream); }
.rs-btn.solid:hover { background: var(--rs-ink); border-color: var(--rs-ink); }
.rs-btn.danger { border-color: var(--rs-error); background: var(--rs-error); color: var(--cream); }
.rs-btn.danger:hover { background: var(--olive-deep); border-color: var(--olive-deep); }
.rs-btn.small { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.rs-btn:disabled { opacity: .5; cursor: not-allowed; }
.rs-btn:disabled:hover { background: transparent; color: var(--olive); }
.rs-btn[aria-disabled="true"] { opacity: .6; cursor: progress; }        /* busy, but keeps focus */
.rs-btn.danger[aria-disabled="true"]:hover { background: var(--rs-error); border-color: var(--rs-error); }
.rs-inline {
  display: inline; padding: 0; color: var(--olive); font: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; cursor: pointer;
}
.rs-inline:hover { color: var(--rs-ink); }
.rs-note { font-size: 13px; line-height: 1.5; color: var(--olive-soft); }
.rs-banner {
  padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--olive-deep);
  border-left: 3px solid var(--olive); background: var(--tint);
}
.rs-banner p { margin: 0; }
.rs-banner .rs-actions { margin-top: 10px; }
.rs-banner.warn { border-left-color: var(--rs-ink); background: rgba(200, 132, 58, .14); }
.rs-banner.error { border-left-color: var(--rs-error); background: rgba(162, 64, 31, .08); }
.rs-banner.info { border-left-color: var(--olive-soft); }
.rs-pad { margin: 18px 28px 0; }
.drawer .checkout:disabled, .drawer .checkout[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.drawer .checkout:disabled:hover, .drawer .checkout[aria-disabled="true"]:hover { background: var(--olive); }
.drawer footer .checkout:not(:disabled):not([aria-disabled="true"]):hover { background: var(--rs-ink); }
.rs-drawer footer .checkout { min-height: 52px; }

/* ===== Bag view ===== */
.rs-drawer .drawer-items { padding: 0 28px; }
.rs-drawer .drawer-items > .rs-banner { margin-top: 18px; }
.rs-last { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--line-strong); font-size: 14px; color: var(--olive); }
.rs-row .info { min-width: 0; }
.rs-row .info .nm { overflow-wrap: anywhere; }
.rs-row-note { margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rs-error); }
.rs-drawer .drawer-row .info .qty { gap: 10px; margin-top: 8px; }
.rs-drawer .drawer-row .info .qty button:disabled { opacity: .35; cursor: not-allowed; }
.rs-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rs-x {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; border-radius: 50%; color: var(--olive-soft);
}
.rs-x:hover { color: var(--olive); background: var(--tint); }
.drawer-row.unavailable .pic, .drawer-row.unavailable .nm, .drawer-row.unavailable .pr { opacity: .55; }
.rs-drawer .drawer-empty { padding: 64px 0 40px; }
.rs-foot { flex: none; }
.rs-drawer footer.rs-foot { padding: 18px 28px calc(18px + env(safe-area-inset-bottom)); background: var(--cream); }
.rs-drawer footer .total { margin-top: 0; padding: 4px 0 8px; border-top: 0; align-items: baseline; }
.rs-fee { font-size: 13px; color: var(--olive-soft); margin: 0 0 6px; }
.rs-drawer footer .rs-banner { margin-top: 10px; }
.rs-drawer footer .rs-actions { margin-top: 12px; }

/* ===== Checkout form ===== */
.rs-form { display: flex; flex-direction: column; }
.rs-fs { border: 0; margin: 0; min-width: 0; padding: 22px 28px; border-bottom: 1px solid var(--line); display: block; }
.rs-fs > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 14px;
  font-family: var(--display); font-size: 24px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--olive);
}
.rs-fs > legend + * { clear: left; }
.rs-fs > * + * { margin-top: 14px; }
.rs-fs > legend + * { margin-top: 0; }
.rs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rs-field > label, .rs-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--olive-soft);
}
.rs-opt { letter-spacing: .1em; text-transform: none; }
.rs-field input, .rs-field select, .rs-field textarea {
  width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--olive-soft); border-radius: 0;
  background: transparent; color: var(--olive); font: 16px/1.4 var(--sans);
}
.rs-field input:focus-visible, .rs-field select:focus-visible, .rs-field textarea:focus-visible { outline-offset: 2px; }
.rs-field select {
  -webkit-appearance: none; appearance: none; padding-right: 28px; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232A3818' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center;
}
.rs-field select:disabled { opacity: .5; cursor: not-allowed; }
/* the list that opens (pickup times, areas): the theme's paper and ink, whatever the phone's own picker defaults to */
.rs-field select option, .rs-field select optgroup { background-color: var(--cream); color: var(--olive); }
.rs-field select option:disabled { color: var(--olive-soft); }
/* dark theme: the arrow in the light ink (the one above is drawn in the light theme's dark green) */
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rs-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ECE3C8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } }
@media screen { :root[data-theme="dark"] .rs-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ECE3C8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } }
.rs-field textarea { padding: 10px 12px; border: 1px solid var(--olive-soft); resize: vertical; min-height: 88px; }
.rs-field input::placeholder, .rs-field textarea::placeholder { color: var(--olive-soft); opacity: 1; }
.rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus { border-color: var(--olive); }
.rs-field [aria-invalid="true"] { border-bottom: 2px solid var(--rs-error); }
.rs-field textarea[aria-invalid="true"] { border: 2px solid var(--rs-error); }
.rs-field [aria-invalid="true"]:focus { border-color: var(--rs-error); }     /* the field being fixed stays red */
.rs-field.has-err .rs-store:not(.is-off) { border-color: var(--rs-error); }   /* "Pick a store." marks the cards too */
.rs-err { color: var(--rs-error); font-size: 13px; line-height: 1.4; }
.rs-hint { color: var(--olive-soft); font-size: 12px; line-height: 1.4; }
.rs-count { align-self: flex-end; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--olive-soft); }
.rs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* pickup / delivery pills and change chips (native radios, visually hidden) */
.rs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-pill { position: relative; display: block; cursor: pointer; }
.rs-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.rs-pill span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-strong);
  border-radius: 999px; font-family: var(--display); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--olive);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rs-pill.small span { min-height: 44px; font-size: 15px; padding: 0 14px; }
.rs-pill:hover span { border-color: var(--olive); }
.rs-pill input:checked + span { background: var(--olive); color: var(--cream); border-color: var(--olive); }
.rs-pill input:focus-visible { outline: none; box-shadow: none; }
.rs-pill input:focus-visible + span { outline: 3px solid var(--olive-deep); outline-offset: 3px; box-shadow: 0 0 0 3px var(--cream); }
.rs-pill.is-off { cursor: not-allowed; }
.rs-pill input:disabled + span { opacity: .4; }
.rs-pill.is-off:hover span { border-color: var(--line-strong); }

/* store cards (native radios) */
.rs-stores { display: flex; flex-direction: column; gap: 8px; }
.rs-store {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 14px; min-height: 44px;
  border: 1px solid var(--line-strong); cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.rs-store:hover { border-color: var(--olive); }
.rs-store input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--olive); cursor: inherit; }
.rs-store.is-on { border: 2px solid var(--olive); padding: 13px; background: var(--cream-2); }
.rs-store.is-off { cursor: not-allowed; }
.rs-store.is-off .rs-store-name, .rs-store.is-off .rs-store-addr { opacity: .55; }
.rs-store.is-off:hover { border-color: var(--line-strong); }
.rs-store-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rs-store-name { font-family: var(--display); font-size: 24px; line-height: 1; text-transform: uppercase; color: var(--olive); }
.rs-store-state { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--olive-soft); }
.rs-store-state.on { color: var(--olive); }
.rs-store-addr { font-size: 13px; color: var(--olive-soft); line-height: 1.45; }

/* checkboxes */
.rs-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 15px; line-height: 1.4; color: var(--olive); }
.rs-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--olive); cursor: inherit; }
.rs-check small { display: block; font-size: 12px; color: var(--olive-soft); }
.rs-geo .rs-btn { width: 100%; }

/* delivery map (RSMapPicker): the map moves under a pin that stays in the middle */
.rs-map {
  position: relative; height: 240px; border: 1px solid var(--olive-soft); border-radius: 14px; overflow: hidden;
  background: var(--cream-2); isolation: isolate;
}
.rs-map:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.rs-mapfield.has-err .rs-map { border: 2px solid var(--rs-error); }
.rs-map .rs-map-canvas { position: absolute; inset: 0; }        /* beats MapLibre's .maplibregl-map { position: relative } */
.rs-map-canvas .maplibregl-canvas:focus-visible { outline: 3px solid var(--leaf); outline-offset: -3px; }
.rs-map-pin {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 32px; height: 44px; margin: -44px 0 0 -16px;
  pointer-events: none; filter: drop-shadow(0 3px 3px rgba(var(--shade), .35)); transition: transform .15s ease;
}
.rs-map-pin path { fill: var(--olive); stroke: var(--cream); stroke-width: 2; }
.rs-map-pin circle { fill: var(--leaf); }
.rs-map:not(.is-pinned) .rs-map-pin { transform: translateY(-4px); }
.rs-map-pin::after {                                 /* the spot itself, under the pin's tip */
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 8px; height: 4px; margin-left: -4px; border-radius: 50%;
  background: rgba(var(--shade), .45);
}
.rs-map-wait {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 13px; color: var(--olive-soft);
}
.rs-map-gps { position: absolute; z-index: 3; right: 10px; bottom: 10px; min-height: 40px; padding: 6px 14px; font-size: 13px; }
html[dir="rtl"] .rs-map-gps { right: auto; left: 10px; }
.rs-map .maplibregl-ctrl-bottom-left { z-index: 2; }
html[dir="rtl"] .rs-map .maplibregl-ctrl-bottom-right { right: auto; left: 0; }
.rs-map .maplibregl-ctrl-bottom-right { bottom: 54px; }     /* the "© Navvo" credit sits above the button */
.rs-map .maplibregl-ctrl-attrib { font-size: 11px; }
.rs-mapfield .rs-hint { min-height: 1.4em; }
/* the area, set from the pin (not a list): reads like the other fields, grey until there is one */
.rs-area-auto {
  margin: 0; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--olive-soft); color: var(--olive);
  font: 16px/1.4 var(--sans); outline-offset: 2px;
}
.rs-area-auto.is-empty { color: var(--olive-soft); }
.rs-field.has-err .rs-area-auto { border-bottom: 2px solid var(--rs-error); }
.rs-map-home {                                      /* our kitchen, at the start of the road */
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF;
  border: 2px solid #4A8A1F; box-shadow: 0 2px 6px rgba(var(--shade), .35);
}
.rs-map-home img { display: block; width: 24px; height: 24px; }
@media (max-width: 479px) { .rs-map { height: 220px; } }
.rs-cash { margin: 14px 0 4px; }                 /* clear of the change pills above: the stamp is tilted */
.rs-cash .stamp { transform: rotate(-2deg); }

/* order summary + problems (end of the form) */
.rs-summary { border-bottom: 0; }
.rs-sum { list-style: none; margin: 8px 0 0; padding: 0; }
.rs-sum li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--olive); }
.rs-sum li span:last-child { flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.rs-sum li.has-problem span:last-child { flex: 0 1 auto; text-align: right; }
.rs-sum li em { font-style: normal; font-family: var(--sans); font-size: 13px; color: var(--rs-error); }
.rs-problems { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; max-height: 38vh; overflow: auto; }
.rs-problems:empty { display: none; }

/* sticky footer of the form; --rs-foot-h (its height, set by RSCheckout) keeps focused fields clear of it */
.rs-drawer .rs-form.rs-scroll { scroll-padding: 12px 0 calc(var(--rs-foot-h, 0px) + 12px); }
.rs-drawer footer.rs-sticky { position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.rs-sticky .line { padding: 2px 0; font-size: 13px; }
.rs-sticky .total { padding: 4px 0 0; }
.rs-drawer footer.rs-sticky .total .v { font-size: 32px; }
.rs-drawer footer.rs-sticky .checkout { margin-top: 10px; padding: 14px 18px; }
.rs-drawer footer.rs-sticky .rs-fine { margin-top: 8px; }
.rs-alert:empty { display: none; }
.rs-alert .rs-banner { margin: 0 0 10px; }
.rs-fine { margin: 12px 0 0; font-family: var(--mono); font-size: 10px; line-height: 1.6; letter-spacing: .1em; color: var(--olive-soft); }
.rs-fine a { color: var(--olive); text-decoration: underline; text-underline-offset: 2px; }
/* Short screens (phones up to ~700px tall): the totals scroll with the form instead of taking a third of it */
@media (max-height: 700px) { .rs-drawer footer.rs-sticky { position: static; } }
/* Very short (400% zoom, phones in landscape): the whole drawer scrolls, header and footer included, so the
   bag list can't be squeezed to nothing (WCAG 1.4.10) */
@media (max-height: 520px) {
  .rs-drawer { overflow-y: auto; }
  .rs-drawer .rs-scroll { flex: none; min-height: auto; overflow: visible; }
  .rs-drawer footer.rs-foot, .rs-drawer header.rs-head { flex: none; }
}

/* ===== Order status ===== */
.rs-status { padding: 26px 28px calc(28px + env(safe-area-inset-bottom)); }
.rs-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--olive-soft); }
.rs-orderno { margin: 6px 0 10px; font-family: var(--display); font-size: clamp(72px, 18vw, 110px); line-height: .9; color: var(--olive); letter-spacing: -.005em; }
.rs-state-row { margin: 0; }
.rs-state {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--olive); font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--olive);
}
.rs-state.s-new { background: var(--brick); border-color: var(--brick); color: var(--olive-deep); }
.rs-state.s-accepted { background: var(--olive); color: var(--cream); }
.rs-state.s-ready, .rs-state.s-out_for_delivery { background: var(--leaf); border-color: var(--leaf-deep); color: var(--olive-deep); }
.rs-state.s-completed { background: var(--cream-3); border-color: var(--cream-3); color: var(--olive-soft); }
.rs-state.s-cancelled { text-decoration: line-through; color: var(--olive-soft); border-color: var(--olive-soft); }
.rs-status-text { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--olive); }
.rs-track { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 18px 0 0; padding: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--olive-soft); }
.rs-track li { display: flex; align-items: center; }
.rs-track li + li::before { content: "·"; margin: 0 10px; color: var(--olive-soft); }
.rs-track .reached { color: var(--olive-deep); font-weight: 500; }
.rs-track [aria-current="step"] span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.rs-status > .rs-banner { margin-top: 16px; }
.rs-where { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.rs-where-l { font-family: var(--display); font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--olive); }
.rs-where-t { margin-top: 6px; font-size: 15px; color: var(--olive); }
.rs-where-a { margin-top: 2px; font-size: 13px; color: var(--olive-soft); }
.rs-status .rs-sum { margin-top: 14px; }
.rs-status .line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--olive-soft); }
.rs-status .total { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0 4px; }
.rs-status .total .l { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.rs-status .total .v { font-family: var(--display); font-size: 32px; color: var(--olive); }
.rs-pay { margin: 4px 0 0; font-size: 14px; color: var(--olive); }
.rs-cancel { margin-top: 18px; font-size: 14px; color: var(--olive-soft); }
.rs-confirm { margin-top: 18px; padding: 14px; border: 1px solid var(--rs-error); }
.rs-confirm p { font-size: 15px; color: var(--olive-deep); }
.rs-status > .rs-note { margin-top: 12px; }
.rs-test { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-ink); }

/* ===== Newsletter (footer) ===== */
.rs-news { display: block; }
.rs-news-msg { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--olive-soft); }
.rs-news-msg.ok { color: var(--olive); }
.rs-news-msg.error { color: var(--rs-error); }
.rs-news [aria-invalid="true"] { border-bottom: 2px solid var(--rs-error); }
.rs-news input[aria-invalid="true"]:focus { border-bottom-color: var(--rs-error); }   /* beats .news input:focus */
.rs-news button:disabled, .rs-news button[aria-disabled="true"] { opacity: .7; cursor: default; }
.rs-news button[aria-disabled="true"]:hover { background: var(--olive); }
.rs-news-fine { margin: 6px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--olive-soft); }
.rs-news-fine a { display: inline-block; padding: 6px 0; text-decoration: underline; text-underline-offset: 2px; }   /* a comfortable target, like .foot-bottom a */

/* ===== Phones ===== */
@media (max-width: 640px) {
  .rs-drawer header.rs-head { padding: 16px 18px; }
  .rs-drawer .drawer-items, .rs-fs, .rs-status { padding-left: 18px; padding-right: 18px; }
  .rs-drawer footer.rs-foot { padding-left: 18px; padding-right: 18px; }
  .rs-pad { margin-left: 18px; margin-right: 18px; }
  .rs-drawer .drawer-row { grid-template-columns: 52px 1fr auto; gap: 12px; }
  .rs-drawer .drawer-row .pic { width: 52px; height: 52px; }
  .rs-two { grid-template-columns: 1fr; gap: 14px; }
  /* information-carrying micro-labels: 11px minimum on phones (as styles.css does for the page's own) */
  .rs-live, .rs-loc-links a, .rs-news-fine, .rs-field > label, .rs-lbl, .rs-store-state, .rs-row-note, .rs-count,
  .rs-eyebrow, .rs-track, .rs-fine { font-size: 11px; }
  .menu-card .tag.out { white-space: nowrap; }                                  /* "SOLD OUT TODAY" on one line */
}
@media (max-width: 360px) { .menu-card .tag.out { letter-spacing: .06em; } }

/* ===== Reduced motion (OS setting or the footer's Pause motion) ===== */
@media (prefers-reduced-motion: reduce) {
  .rs-drawer, .rs-drawer *, .drawer-bg { transition: none !important; }
}
html.reduce-motion .rs-drawer, html.reduce-motion .rs-drawer *, html.reduce-motion .drawer-bg { transition: none !important; }

/* ===== Website text (dashboard → Website): announcement bar, preview tape, footer links ===== */
/* The bar is in the page flow above the fixed nav; rs-ordering.jsx keeps --rs-bar-top at the bar's visible height. */
.nav { top: var(--rs-bar-top, 0px); }
@media (max-width: 1100px) {
  .nav.menu-open .nav-links { max-height: calc(100vh - 88px - var(--rs-bar-top, 0px)); max-height: calc(100dvh - 88px - var(--rs-bar-top, 0px)); }
}
@media (max-width: 640px) {
  .nav.menu-open .nav-links { max-height: calc(100vh - 80px - var(--rs-bar-top, 0px)); max-height: calc(100dvh - 80px - var(--rs-bar-top, 0px)); }
}
.rs-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 52px; padding-left: max(52px, env(safe-area-inset-left)); padding-right: max(52px, env(safe-area-inset-right));
  background: var(--olive); color: var(--cream);
  font: 600 14px/1.4 var(--sans); text-align: center;
}
.rs-bar-brick { background: var(--brick-ink); color: var(--cream); }
.rs-bar-leaf { background: var(--leaf); color: var(--olive-deep); }
.rs-bar-text { margin: 0; overflow-wrap: anywhere; }
.rs-bar-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rs-bar-x {
  position: absolute; right: max(8px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font: 400 24px/1 var(--sans); cursor: pointer;
}
.rs-bar-x:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.rs-bar a:focus-visible, .rs-bar-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 640px) { .rs-bar { padding: 8px 48px 8px 16px; padding-left: max(16px, env(safe-area-inset-left)); justify-content: flex-start; text-align: left; } }
.rs-preview-tape {
  position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 8px;
  background: var(--olive-deep); color: var(--cream); font: 600 12px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 8px 20px -10px rgba(var(--shade, 25, 34, 14), 0.6);
}
.rs-preview-tape button {
  min-height: 32px; padding: 0 10px; border: 1px solid var(--cream); border-radius: 6px; background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.rs-preview-tape button:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.hero-sub { white-space: pre-line; }
/* Website text keeps the line breaks staff type; the quote's optional "who said it" line */
.rs-lines { white-space: pre-line; }
.rs-quote-by { margin: 28px auto 0; font: 500 12px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive-soft); }
/* Find us: the kitchen, the phone card and up to two more; the wide grid has as many columns as cards, the two-column
   grid lets an odd last card run the full width (no empty cell) */
@media (min-width: 1101px) { .locations { grid-template-columns: repeat(var(--loc-n, 4), minmax(0, 1fr)); } }
@media (max-width: 1100px) and (min-width: 641px) { .locations > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.foot-social { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-social a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

@media print { .rs-drawer, .drawer-bg, .rs-bar-x, .rs-preview-tape, .rs-sheet { display: none !important; } .rs-bar { background: none !important; color: #000 !important; padding: 0 0 8px; } }

/* ===== 1.3.0: language switch, sizes, choices ===== */
/* English / Arabic switch in the nav: the other language's name, in that language */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--olive); background: transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.lang-toggle:hover { border-color: var(--olive); background: var(--tint); }
.lang-toggle:lang(ar) { font-size: 16px; }

/* a dish without a photo yet: the logo on the card's paper colour */
.menu-card .visual.no-photo img, .rs-sheet-img.no-photo { object-fit: contain; padding: 22%; opacity: 0.85; }

/* ===== Bag: free-delivery meter and "Goes well with your order" (RSBagMore in rs-ordering.jsx) ===== */
.rs-more-wrap { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; padding: 18px 0 6px; border-top: 1px solid var(--line); }
.rs-free p { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--olive); margin: 0 0 8px; }
.rs-free.done p::before { content: "\2713  "; content: "\2713  " / ""; color: var(--leaf-deep); }
.rs-free-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.rs-free-bar span { display: block; height: 100%; border-radius: inherit; background: var(--leaf); transition: width 0.4s ease; }
.rs-more h4 { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--olive); margin: 0 0 6px; }
.rs-more ul { list-style: none; margin: 0; padding: 0; }
.rs-more-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rs-more-row:last-child { border-bottom: 0; }
.rs-more-row .pic { width: 44px; height: 44px; border-radius: 50%; background-color: var(--cream-2); background-size: cover; background-position: center; }
.rs-more-row .pic.no-photo { background-size: 70%; background-repeat: no-repeat; }
.rs-more-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-more-txt .nm { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--olive); }
.rs-more-free { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brick-ink); }
.rs-more-row .pr { font-family: var(--display); font-size: 18px; color: var(--olive); white-space: nowrap; }
.rs-more-add {
  position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--olive); background: transparent; color: var(--olive);
  font: 400 20px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.rs-more-add::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }     /* 44px tap target */
.rs-more-add:hover { background: var(--olive); color: var(--cream); }
.rs-more-add:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }

/* two sizes: one row per size, each its own button. The rows share their columns (subgrid), so the prices and the +
   line up whatever the size names; on phones the size name sits above its price, so a row fits the narrow card. */
.menu-card .foot.sizes { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 8px; align-items: center; }
.menu-card .size-add {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; width: 100%; min-height: 44px;
  padding: 4px 0; color: var(--olive); text-align: start; background: transparent; border: 0;
}
@supports not (grid-template-columns: subgrid) { .menu-card .size-add { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; } }
.menu-card .size-add .size-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive-soft); }
.menu-card .size-add .price { font-size: 24px; justify-self: end; }
@media (max-width: 479px) {
  .menu-card .foot.sizes { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-card .size-add { row-gap: 2px; }
  .menu-card .size-add .size-l { grid-column: 1 / -1; }
  .menu-card .size-add .price { justify-self: start; }
  @supports not (grid-template-columns: subgrid) { .menu-card .size-add { grid-template-columns: minmax(0, 1fr) auto; } }
}
.menu-card .size-add:enabled:hover .add { background: var(--brick-ink); border-color: var(--brick-ink); color: var(--cream); transform: rotate(90deg); }
.menu-card .size-add:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; border-radius: 8px; }
.menu-card:has(.size-add:enabled:hover), .menu-card:has(.size-add:focus-visible) { background: var(--cream-2); }
.menu-card:has(.size-add:enabled:hover) .visual, .menu-card:has(.size-add:focus-visible) .visual { transform: scale(1.06) rotate(-2deg); }
.menu-card .size-add:disabled { cursor: not-allowed; }
/* a dish with choices: "Build it +" */
.menu-card .add.build { width: auto; height: 38px; padding: 0 14px; gap: 8px; display: inline-flex; border-radius: 999px;
  font-family: var(--display); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.menu-card .add.build::after { border-radius: 999px; }
.menu-card .add.build:hover { transform: none; }

/* bag, summary and status: the size and choices under the dish */
.rs-row-desc { font-size: 12px; line-height: 1.45; color: var(--olive-soft); margin-top: 2px; }
.rs-sum-desc { display: block; font-size: 12px; line-height: 1.45; color: var(--olive-soft); }

/* ===== the size / choices dialog ===== */
.rs-sheet {
  position: fixed; z-index: 96; inset: auto 0 0 0; max-height: min(92vh, 900px); display: flex; flex-direction: column;
  background: var(--cream); border-top: 1px solid var(--olive); border-radius: 18px 18px 0 0; box-shadow: 0 -16px 48px rgba(var(--shade, 25, 34, 14), 0.25);
}
@media (min-width: 720px) {
  .rs-sheet { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 48px)); max-height: min(88vh, 860px);
    border: 1px solid var(--olive); border-radius: 18px; }
}
.rs-sheet .rs-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.rs-sheet .rs-head h3 { font-family: var(--display); font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--olive); }
.rs-sheet .rs-head h3:focus { outline: none; }
.rs-sheet .close { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--olive); display: grid; place-items: center; color: var(--olive); }
.rs-sheet .close:hover { background: var(--olive); color: var(--cream); }
.rs-sheet-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 8px 22px 16px; }
.rs-sheet-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 1px solid var(--olive); margin: 10px 0 6px; }
.rs-sheet-desc { font-size: 14px; line-height: 1.55; color: var(--olive-soft); margin: 6px 0 4px; }
.rs-choice { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.rs-choice legend { font-family: var(--display); font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--olive); margin-bottom: 6px; }
.rs-choice .rs-rule { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--olive-soft); margin-inline-start: 8px; text-transform: uppercase; }
.rs-opt-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 2px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.rs-opt-row input { width: 20px; height: 20px; accent-color: var(--olive); margin: 0; }
.rs-opt-row .rs-opt-name { font-size: 15px; line-height: 1.35; color: var(--olive); }
.rs-opt-row .rs-opt-name small { color: var(--olive-soft); }
.rs-opt-row .rs-opt-price { font-family: var(--mono); font-size: 13px; color: var(--olive-soft); white-space: nowrap; }
.rs-opt-row.is-on .rs-opt-price { color: var(--olive); }
.rs-opt-row.is-off { cursor: not-allowed; opacity: 0.55; }
/* a ticked option of a multi-pick group with its −/+ (2× avocado): the row's line moves under the pair */
.rs-opt-line { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.rs-opt-line .rs-opt-row { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.rs-qty { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.rs-qty button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--olive); background: transparent; color: var(--olive);
  font: 600 18px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.rs-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.rs-qty button:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.rs-qty-n { min-width: 26px; text-align: center; font-family: var(--mono); font-size: 14px; color: var(--olive); }
.rs-sheet-foot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rs-sheet-sum { font-size: 12px; line-height: 1.45; color: var(--olive-soft); max-height: 3.2em; overflow: hidden; }
.rs-sheet .checkout {
  width: 100%; min-height: 52px; padding: 14px 18px; border-radius: 999px; background: var(--olive); color: var(--cream);
  font-family: var(--display); font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.25s ease;
}
.rs-sheet .checkout:hover:enabled { background: var(--brick-ink); }
.rs-sheet .checkout:disabled { opacity: .5; cursor: not-allowed; }