/* Orderescu default store page (plan §A7). Brand tokens --oe-main / --oe-second / --oe-font are set by the page; everything else derives. */
:root {
  --oe-main: #1d5fbf;
  --oe-second: #f4a11d;
  --oe-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --oe-main-soft: color-mix(in oklab, var(--oe-main) 12%, white);
  --oe-main-softer: color-mix(in oklab, var(--oe-main) 6%, white);
  --oe-main-strong: color-mix(in oklab, var(--oe-main) 85%, black);
  --oe-main-ink: color-mix(in oklab, var(--oe-main) 70%, black);
  --oe-second-soft: color-mix(in oklab, var(--oe-second) 18%, white);
  --oe-ring: color-mix(in oklab, var(--oe-main) 35%, transparent);

  --oe-ink: #111827;
  --oe-muted: #6b7280;
  --oe-line: #e5e7eb;
  --oe-bg: #f6f7f9;
  --oe-card: #ffffff;
  --oe-danger: #e5484d;
  --oe-radius: 16px;
  --oe-radius-sm: 10px;
  --oe-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 24px -12px rgba(17, 24, 39, .18);
  --oe-shadow-lg: 0 24px 64px -24px rgba(17, 24, 39, .35);
  --oe-max: 1100px;      /* one column for the bar, the strip and the content, so their left edges line up */
  --oe-gutter: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, body.oe-body { margin: 0; background: var(--oe-bg); color: var(--oe-ink); font: 15px/1.5 var(--oe-font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.oe { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }   /* clip, not hidden: hidden would make .oe the scroll container and break the sticky header and sidebar */
.oe-main { flex: 1; min-width: 0; }

/* ---------- header (sticky, blurred; on desktop it tops the main column) ---------- */
.oe-header { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, white 86%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--oe-line); }
.oe-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--oe-gutter) 6px; max-width: var(--oe-max); margin: 0 auto; }
.oe-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.oe-logo, .oe-logo-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.oe-logo { object-fit: cover; }
.oe-logo-mark { background: linear-gradient(135deg, var(--oe-main), var(--oe-main-strong)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; }
.oe-title { min-width: 0; }
.oe-title-sub { display: block; color: var(--oe-muted); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.oe-title-name { display: block; font-size: 17px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-header-right { display: flex; gap: 8px; align-items: center; flex: none; }
.oe-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #15803d; background: #dcfce7; padding: 0 10px; border-radius: 999px; }
.oe-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px #bbf7d0; }
button.oe-status { border: 0; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; margin: 0; }   /* the chip is a button (opens the hours sheet, 2026-09-11) — only the browser's button defaults are reset, the chip keeps its own size and weight */
.oe-hours-sheet .oe-hours-title { display: none; }   /* the sheet head already names it */
.oe-hours-sheet .oe-hours-list { font-size: 15px; }
.oe-status--closed { color: #991b1b; background: #fee2e2; }
.oe-status--closed::before { box-shadow: 0 0 0 3px #fecaca; }
.oe-table-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--oe-main-ink); background: var(--oe-main-soft); padding: 0 10px; border-radius: 999px; white-space: nowrap; }
/* the account chip: who is signed in (initial + first name or the masked contact), or "Sign in" on a delivery store; filled by the script, never by the cached HTML */
.oe-account { display: inline-flex; align-items: center; gap: 6px; max-width: 160px; height: 28px; padding: 0 10px 0 4px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; color: var(--oe-main-ink); background: var(--oe-main-soft); cursor: pointer; white-space: nowrap; }
.oe-account--out { padding-left: 10px; }
/* the header chips sit on the hero, which may be the main colour itself: a white ring keeps them visible whatever is behind (reviewer, 2026-09-07) */
.oe-status, .oe-table-badge, .oe-account { height: 28px; line-height: 1; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .92); }   /* the same height and ring: the chips read as one family */
.oe-account-mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; background: var(--oe-main); flex: none; }
.oe-account-name { overflow: hidden; text-overflow: ellipsis; }
.oe-hero-overlay .oe-account { color: #fff; background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.oe-hero-overlay .oe-account-mark { color: var(--oe-main-ink); background: #fff; }
.oe-account-list { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 8px; }
.oe-account-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.oe-account-list .oe-account-mark { width: 28px; height: 28px; font-size: 12px; }
.oe-account-verified { margin-left: auto; font-size: 12px; color: #15803d; }
/* the language switch: two-letter pills, plain links (plan §A15.3) */
.oe-lang { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--oe-main-soft); flex: none; }
.oe-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--oe-main-ink); text-decoration: none; }
.oe-lang a.is-active { background: var(--oe-main); color: #fff; }
.oe-hero-overlay .oe-lang { background: rgba(255, 255, 255, .22); backdrop-filter: blur(6px); }
.oe-hero-overlay .oe-lang a { color: #fff; }
.oe-hero-overlay .oe-lang a.is-active { background: #fff; color: var(--oe-main-ink); }
.oe-message-card .oe-lang { margin-top: 18px; }
/* the sticky bar is short of room: its switch offers only the other languages */
.oe-header-top .oe-lang a.is-active { display: none; }

/* ---------- category tabs (every size, inside the sticky header) ---------- */
.oe-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px var(--oe-gutter) 2px; max-width: var(--oe-max); margin: 0 auto; scrollbar-width: none; }

.oe-tabs::-webkit-scrollbar { display: none; }
/* pointer devices: a thin scrollbar, and the strip fades at the edge that still has categories */
@media (hover: hover) {
  .oe-tabs { scrollbar-width: thin; scrollbar-color: var(--oe-line) transparent; padding-bottom: 6px; }
  .oe-tabs::-webkit-scrollbar { display: block; height: 4px; }
  .oe-tabs::-webkit-scrollbar-thumb { background: var(--oe-line); border-radius: 999px; }
}
.oe-tabs.is-overflow-right { mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent); }
.oe-tabs.is-overflow-left { mask-image: linear-gradient(to right, transparent, black 40px); -webkit-mask-image: linear-gradient(to right, transparent, black 40px); }
.oe-tabs.is-overflow-left.is-overflow-right { mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent); }
.oe-tab { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: none; color: var(--oe-muted); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.oe-tab:hover { color: var(--oe-main-ink); background: var(--oe-main-softer); }
.oe-tab.is-active { color: #fff; background: var(--oe-main); }   /* a filled pill, no underline */
.oe-cat-icon { width: 28px; height: 28px; border-radius: 999px; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--oe-bg); color: var(--oe-main-ink); }
.oe-cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.oe-tab.is-active .oe-cat-icon { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- content ---------- */
.oe-content { max-width: var(--oe-max); margin: 0 auto; padding: 14px var(--oe-gutter) 120px; }
.oe-hero { position: relative; width: 100%; height: clamp(220px, 38vw, 460px); background: #1f2937; overflow: hidden; }   /* full-bleed, owns the top of the page */
.oe-hero img { width: 100%; height: 100%; object-fit: cover; }
.oe-hero--placeholder img { display: none; }
.oe-hero--placeholder { background-color: var(--oe-main); background-image: radial-gradient(rgba(255, 255, 255, .22) 1.6px, transparent 1.7px), linear-gradient(to bottom, var(--oe-main), var(--oe-main-strong)); background-size: 28px 28px, 100% 100%; }   /* the dot grid, from the store's main colour */
.oe-hero-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px max(var(--oe-gutter), calc((100% - var(--oe-max)) / 2 + var(--oe-gutter)));   /* the brand lines up with the content column */ background: linear-gradient(to top, rgba(17, 24, 39, .72), rgba(17, 24, 39, .05) 55%, transparent); color: #fff; }
.oe-hero-overlay .oe-title-sub { color: rgba(255, 255, 255, .8); }
.oe-hero-overlay .oe-title-name { font-size: 24px; white-space: normal; }
.oe-hero-overlay .oe-logo-mark, .oe-hero-overlay .oe-logo { width: 48px; height: 48px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
/* the hero's chip cluster (status, account, languages) sits in the photo's top-right corner, so the brand at the bottom keeps the full width on a phone */
.oe-hero-overlay .oe-header-right { position: absolute; top: 12px; right: max(var(--oe-gutter), calc((100% - var(--oe-max)) / 2 + var(--oe-gutter))); }
.oe-hero-overlay .oe-brand { max-width: 100%; }
/* the brand row of the sticky bar exists only once the hero scrolled away (or always, when there is no hero) */
.oe-header:not(.is-stuck):not(.oe-header--static) .oe-header-top { display: none; }
.oe-tagline { margin: 4px 0 14px; color: var(--oe-muted); font-size: 14px; }
.oe-header-search { max-width: var(--oe-max); margin: 0 auto; padding: 8px var(--oe-gutter) 10px; }   /* the search stays in the sticky bar, under the categories */
.oe-search { position: relative; display: block; }
.oe-search input { width: 100%; padding: 11px 14px 11px 42px; border-radius: 14px; border: 1px solid var(--oe-line); background: #fff; font: inherit; font-size: 15px; outline: none; transition: box-shadow .15s, border-color .15s; }
.oe-search input:focus { border-color: var(--oe-main); box-shadow: 0 0 0 4px var(--oe-ring); }
.oe-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--oe-muted); }
.oe-banner { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; margin: 0 0 14px; border-radius: 14px; background: var(--oe-second-soft); border: 1px solid color-mix(in oklab, var(--oe-second) 45%, white); }
.oe-empty { color: var(--oe-muted); text-align: center; padding: 40px 0; }

.oe-section { scroll-margin-top: 172px; }   /* stuck bar: brand row + tabs + search */
.oe-section-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 26px 0 12px; }
/* two-level menus: the category is the big heading, a section inside it a small spaced label (no parent name repeated) */
.oe-category-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 30px 0 4px; }
.oe-section-label { font-size: 13px; font-weight: 700; color: var(--oe-muted); text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 10px; line-height: 1.2; }
.oe-section--in-category .oe-items { margin-top: 6px; }
.oe-items { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }

.oe-item { display: grid; grid-template-columns: 132px 1fr; background: var(--oe-card); border: 1px solid var(--oe-line); border-radius: var(--oe-radius); overflow: hidden; box-shadow: var(--oe-shadow); cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.oe-item.oe-item--noimage { grid-template-columns: 1fr; }
@media (hover: hover) { .oe-item[role="button"]:hover { transform: translateY(-2px); box-shadow: var(--oe-shadow-lg); border-color: color-mix(in oklab, var(--oe-main) 30%, var(--oe-line)); } }
.oe-item[role="button"]:active { transform: scale(.99); }
.oe-item-media { position: relative; min-height: 132px; align-self: stretch; background: #eee; }   /* fills the card's height; square at the least */
.oe-item-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* out of flow: a portrait photo must not stretch the card */
.oe-badge { position: absolute; top: 8px; right: 8px; background: var(--oe-danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.oe-item-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.oe-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.oe-item-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.oe-chip { flex: none; font-size: 11px; font-weight: 600; color: var(--oe-main-ink); background: var(--oe-main-soft); padding: 3px 8px; border-radius: 999px; }
.oe-chip--off { background: #fee2e2; color: #991b1b; }
/* labels (plan §A19): the fact icons on the card, the list in the sheet */
.oe-item-labels { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; line-height: 1; }
.oe-label { cursor: default; }
.oe-labels { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.oe-labels li { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--oe-main-ink); background: var(--oe-main-soft); padding: 3px 9px; border-radius: 999px; }
.oe-item-desc { margin: 0; color: var(--oe-muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oe-item-foot { margin-top: auto; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.oe-price { font-size: 16px; font-weight: 800; }
.oe-price-old { color: var(--oe-muted); font-size: 13px; }
/* promotions (plan §A18): the tier text and the bonus tag on the card, the promotion name in the sheet, the discount rows, the offers banner */
.oe-tier { color: var(--oe-main-ink); font-size: 12px; font-weight: 600; }
.oe-bonus-tag { font-size: 11px; font-weight: 700; color: #065f46; background: #d1fae5; padding: 2px 8px; border-radius: 999px; }
.oe-promo-name { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--oe-main-ink); background: var(--oe-main-soft); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.oe-sheet-price .oe-price-old { margin-left: 4px; font-weight: 500; }
.oe-discount, .oe-totals .oe-discount { color: #065f46; }
.oe-option-delta--free { color: #065f46; font-weight: 700; }
.oe-option-delta--free s { color: var(--oe-muted); font-weight: 400; margin-left: 4px; }
.oe-banner--offers { background: #ecfdf5; border-color: #a7f3d0; }
.oe-banner--offers .oe-offer { font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.oe-banner--offers .oe-offer em { font-style: normal; font-weight: 800; color: #065f46; }
/* a client promotion in the banner (plan §A26): the signed-in eater is told it is theirs */
.oe-banner--offers .oe-offer i { font-style: normal; font-size: 12px; font-weight: 600; color: #065f46; background: #d1fae5; padding: 1px 8px; border-radius: 999px; }
.oe-item--off { opacity: .55; filter: grayscale(.6); }
.oe-off-label { font-size: 12px; color: #991b1b; font-weight: 600; }
.oe-item.is-hidden, .oe-section.is-hidden { display: none; }

.oe-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--oe-line); color: var(--oe-muted); font-size: 13px; display: flex; flex-direction: column; gap: 10px; text-align: center; align-items: center; }
.oe-footer-block { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.oe-footer-social { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }   /* the venue's Instagram / Facebook icons and website link, next to the contact lines (2026-09-15) */
.oe-footer-social .oe-social-icon { display: inline-flex; align-items: center; color: inherit; opacity: .8; }
.oe-footer-social .oe-social-icon:hover { opacity: 1; }
.oe-footer-social .oe-social-icon svg { display: block; }
/* the weekly schedule (Pages/Shared/_Hours.cshtml): a two-column list, today in ink, a closed day in red; custom pages restyle these classes */
.oe-hours { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.oe-hours-title { color: var(--oe-ink); }
.oe-hours-list { margin: 0; display: grid; grid-template-columns: auto auto; gap: 3px 18px; }
.oe-hours-line { display: contents; }
.oe-hours-line dt { text-align: left; }
.oe-hours-line dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.oe-hours-line.is-today dt, .oe-hours-line.is-today dd { color: var(--oe-ink); font-weight: 700; }
.oe-hours-line dt small { margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oe-main); }
.oe-hours-line.is-closed dd { color: #991b1b; }
.oe-powered { display: flex; align-items: center; gap: 8px; color: var(--oe-muted); font-size: 12px; }
.oe-powered img { height: 26px; width: auto; }
.oe-powered b { color: var(--oe-ink); font-weight: 700; }

/* ---------- the cart bar (always visible where ordering is possible) ---------- */
/* bottom follows the VISUAL viewport (--oe-vv-bottom, set by the script): when a mobile browser hides its bottom toolbar on scroll the
   layout viewport that `fixed` is anchored to does not always grow with it, and the bar would float where the toolbar used to be. */
.oe-cartbar { position: fixed; left: 0; right: 0; bottom: var(--oe-vv-bottom, 0px); z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.oe-cartbar .oe-cart { pointer-events: auto; width: 100%; max-width: 560px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border: 0; border-radius: 16px; background: var(--oe-main); color: #fff; font-weight: 700; font-size: 16px; box-shadow: 0 12px 32px -8px color-mix(in oklab, var(--oe-main) 70%, transparent); cursor: pointer; transition: transform .15s, background .15s; }
.oe-cartbar .oe-cart:hover { background: var(--oe-main-strong); }
.oe-cartbar .oe-cart:active { transform: scale(.98); }
.oe-cart-count { background: rgba(255, 255, 255, .22); padding: 2px 10px; border-radius: 999px; font-size: 14px; margin-left: 8px; }
.oe-cart-total { font-variant-numeric: tabular-nums; }

/* ---------- sheets ---------- */
.oe-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(17, 24, 39, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; }
.oe-sheet-panel { position: relative; width: 100%; max-height: 92dvh; background: #fff; color: var(--oe-ink); font: 15px/1.5 var(--oe-font); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--oe-shadow-lg); animation: oe-up .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes oe-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.oe-sheet-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--oe-bg); color: var(--oe-ink); cursor: pointer; font-size: 16px; line-height: 1; z-index: 2; display: grid; place-items: center; }
.oe-sheet-head { padding: 20px 56px 0 20px; }
.oe-sheet-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.oe-sheet-portion { font-weight: 500; color: var(--oe-muted); font-size: 16px; margin-left: 8px; }
.oe-sheet-body { overflow: auto; padding: 8px 20px 12px; flex: 1; }
.oe-sheet-price { color: var(--oe-main-ink); font-weight: 800; font-size: 20px; margin: 6px 0 10px; }
.oe-sheet-media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #eee; margin: 6px 0 12px; }
.oe-sheet-media img { width: 100%; height: 100%; object-fit: cover; }
.oe-sheet-desc { color: var(--oe-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 8px; white-space: pre-line; }   /* the provider sends plain text with line breaks (Ebriza strips its editor's HTML) */
/* "Product details": allergens + nutritional information, collapsed by default */
.oe-details { margin: 4px 0 8px; border: 1px solid var(--oe-line); border-radius: 12px; padding: 0 12px; font-size: 13.5px; }
.oe-details summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--oe-main-ink); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.oe-details summary::-webkit-details-marker { display: none; }
.oe-details summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.oe-details[open] summary::after { transform: rotate(-135deg); }
.oe-details-row { display: grid; gap: 2px; padding: 0 0 10px; color: var(--oe-muted); line-height: 1.45; white-space: pre-line; }
.oe-details-row b { color: var(--oe-ink); font-weight: 600; }
.oe-item-sheet .oe-sheet-title { padding-right: 40px; margin-top: 4px; }
.oe-sheet-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--oe-line); background: #fff; }

.oe-group { margin: 18px 0 6px; }
.oe-group-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.oe-group-rule { font-size: 11px; font-weight: 600; color: var(--oe-muted); background: var(--oe-bg); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.oe-group.is-invalid .oe-group-rule { color: #991b1b; background: #fee2e2; }
.oe-option { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--oe-line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s; font-size: 15px; }
.oe-option:has(input:checked) { border-color: var(--oe-main); background: var(--oe-main-softer); }
.oe-option input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 50%; margin: 0; display: grid; place-items: center; transition: .15s; flex: none; background: #fff; cursor: pointer; }
.oe-option input[type="checkbox"] { border-radius: 6px; }
.oe-option input:checked { border-color: var(--oe-main); background: var(--oe-main); }
.oe-option input:checked::after { content: ""; width: 8px; height: 8px; background: #fff; border-radius: inherit; }
.oe-option input[type="checkbox"]:checked::after { width: 10px; height: 6px; border: 2.5px solid #fff; border-top: 0; border-right: 0; background: none; transform: rotate(-45deg) translateY(-1px); border-radius: 0; }
.oe-option-name { flex: 1; }
.oe-option-delta { color: var(--oe-main-ink); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.oe-option.is-off { opacity: .5; }
.oe-option--view { cursor: default; }

.oe-stepper { display: inline-flex; align-items: center; border: 1px solid var(--oe-line); border-radius: 12px; overflow: hidden; flex: none; }
.oe-stepper button { width: 42px; height: 44px; border: 0; background: var(--oe-main-soft); color: var(--oe-main-ink); font-size: 20px; font-weight: 700; cursor: pointer; }
.oe-stepper button:disabled { opacity: .4; cursor: default; }
.oe-stepper output { width: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.oe-stepper--small button { width: 32px; height: 34px; font-size: 17px; }
.oe-stepper--small output { width: 32px; font-size: 14px; }

.oe-field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.oe-field > span { font-weight: 700; font-size: 14px; }
.oe-field input, .oe-field textarea, .oe-field select { font: inherit; font-size: 15px; padding: 11px 12px; border: 1px solid var(--oe-line); border-radius: 12px; width: 100%; background: #fff; color: var(--oe-ink); outline: none; transition: box-shadow .15s, border-color .15s; }
.oe-field input:focus, .oe-field textarea:focus { border-color: var(--oe-main); box-shadow: 0 0 0 4px var(--oe-ring); }
.oe-field textarea { min-height: 64px; resize: vertical; }
.oe-field.is-invalid input, .oe-field.is-invalid textarea { border-color: var(--oe-danger); }
/* a field that asks a server as it is typed (the company code): the input sits in .oe-input so the icons centre on it — a spinner at its right while asking, green with a check once the answer is a match */
.oe-input { position: relative; display: block; }
.oe-field.is-busy .oe-input input, .oe-field.is-valid .oe-input input { padding-right: 40px; }
.oe-field.is-busy .oe-input::after { content: ""; position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--oe-main) 25%, transparent); border-top-color: var(--oe-main); animation: oe-spin .7s linear infinite; pointer-events: none; }
.oe-field.is-valid input { border-color: #16a34a; }
.oe-field.is-valid input:focus { box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); }
.oe-field.is-valid .oe-input::after { content: ""; position: absolute; right: 16px; top: 50%; width: 11px; height: 6px; margin-top: -5px; border: 2.5px solid #16a34a; border-top: 0; border-right: 0; transform: rotate(-45deg); pointer-events: none; }
.oe-field .oe-hint { margin: 0; font-size: 12px; }
.oe-row { display: flex; gap: 10px; }
.oe-row > * { flex: 1; }
/* the delivery address (plan §A24): Google's predictions under the street input (the classic widget appends its list to <body>, above the
   sheet's z-index 50), the newer element forced to the light scheme when a project has only that one, the map with the pin, the resolved line */
.pac-container { z-index: 1000; font-family: var(--oe-font); border-radius: 12px; box-shadow: var(--oe-shadow-lg); border: 1px solid var(--oe-line); }
.pac-item { padding: 8px 10px; font-size: 14px; cursor: pointer; }
gmp-place-autocomplete { display: block; width: 100%; color-scheme: light; background-color: #fff; color: var(--oe-ink); border: 1px solid var(--oe-line); border-radius: 12px; font: inherit; }
.oe-map { height: 220px; border: 1px solid var(--oe-line); border-radius: 12px; margin: 4px 0 6px; background: #eef1f5; }
.oe-resolved { font-size: 13px; color: var(--oe-muted); margin: 0 0 12px; }
/* the receipt on a company (plan §A25): the switch row, then the code and the registry's line */
.oe-company { margin: 4px 0 12px; }
.oe-company-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 700; font-size: 14px; cursor: pointer; }   /* the option row's checkbox, without the option row's frame */
.oe-company-toggle input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 6px; margin: 0; display: grid; place-items: center; transition: .15s; flex: none; background: #fff; cursor: pointer; }
.oe-company-toggle input:checked { border-color: var(--oe-main); background: var(--oe-main); }
.oe-company-toggle input:checked::after { content: ""; width: 10px; height: 6px; border: 2.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); }
.oe-resolved-note { color: var(--oe-danger); }
/* Google / Apple buttons in the sign-in sheet, above the code fields */
.oe-ext { display: grid; gap: 8px; margin: 4px 0 6px; }
.oe-ext-hint { margin: 0 0 2px; font-size: 12px; }
.oe-ext-btn { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.oe-ext .oe-ext-btn--apple { background: #111; color: #fff; border-color: #111; }
.oe-ext .oe-ext-btn--apple:hover { background: #000; color: #fff; }
.oe-ext-mark { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center; background: #fff; color: #4285f4; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 1px var(--oe-line); }
.oe-ext-btn--apple .oe-ext-mark { display: none; }
.oe-or { display: flex; align-items: center; gap: 10px; color: var(--oe-muted); font-size: 12px; margin: 4px 0 0; }
.oe-or::before, .oe-or::after { content: ""; flex: 1; height: 1px; background: var(--oe-line); }
.oe-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.oe-choice { padding: 8px 14px; border: 1px solid var(--oe-line); border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--oe-muted); }
.oe-choice.is-active { border-color: var(--oe-main); background: var(--oe-main-softer); color: var(--oe-main-ink); }
.oe-choice:disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }

.oe-btn { border: 0; border-radius: 14px; height: 48px; padding: 0 18px; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--oe-main); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s, transform .15s; }
.oe-btn:hover { background: var(--oe-main-strong); }
.oe-btn:active { transform: scale(.98); }
.oe-btn:disabled { opacity: .5; cursor: default; transform: none; }
/* a button doing a request: its label hides and a ring spins in its place (works on the filled, ghost and link variants) */
.oe-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; opacity: 1; }
.oe-btn.is-busy > * { visibility: hidden; }
.oe-btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: oe-spin .7s linear infinite; }
.oe-btn--ghost.is-busy::after, .oe-btn--link.is-busy::after { border-color: color-mix(in oklab, var(--oe-main) 25%, transparent); border-top-color: var(--oe-main); }
@keyframes oe-spin { to { transform: rotate(360deg); } }
.oe-btn--ghost { background: var(--oe-main-soft); color: var(--oe-main-ink); }
.oe-btn--ghost:hover { background: var(--oe-main-soft); }
.oe-btn--block { width: 100%; }
.oe-btn--split { flex: 1; justify-content: space-between; white-space: nowrap; padding: 0 14px; gap: 8px; min-width: 0; }
@media (max-width: 420px) { .oe-sheet-foot .oe-btn--split { font-size: 14px; } .oe-sheet-foot .oe-stepper button { width: 36px; } .oe-sheet-foot .oe-stepper output { width: 36px; } }
.oe-btn--link { background: transparent; color: var(--oe-main-ink); height: auto; padding: 8px; }
.oe-address-mode { padding: 0; margin: -4px 0 12px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }   /* "Adaugă adresa manual" / "Caută adresa pe hartă" under the address form */
.oe-btn--link:hover { background: transparent; }
.oe-sheet-body > .oe-btn { margin-top: 10px; }   /* stacked buttons in a sheet (send code / confirm / resend / view menu) breathe */

.oe-lines { display: flex; flex-direction: column; }
/* a basket line is a two-column grid: name | total on the first row; modifiers, the deposit (name | value, under the total), the note and the actions below */
.oe-line { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--oe-line); }
.oe-line-mods, .oe-line-note, .oe-line-actions { grid-column: 1 / -1; }
.oe-line .oe-deposit { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; }
.oe-line .oe-deposit span:last-child { font-variant-numeric: tabular-nums; }
.oe-line-name { font-weight: 700; font-size: 15px; cursor: pointer; }
.oe-line-mods { color: var(--oe-muted); font-size: 13px; margin-top: 2px; }
/* a bottle deposit the engine attached to a line (or to the product in the sheet): name left, quantity × unit = value right */
.oe-deposit { color: var(--oe-muted); font-size: 13px; margin: 2px 0 0; }
/* the product sheet's ledger of price adjustments — deposits, discounts, the bonus — a tinted box between the price and the description,
   name left / amount right, so it never reads as part of the description (review 2026-09-06) */
.oe-adjust { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--oe-main-soft); font-size: 13px; color: var(--oe-ink); }
.oe-adjust > div { display: contents; }
.oe-adjust span:nth-child(2n) { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.oe-adjust > div:not(.oe-discount) span { color: var(--oe-muted); }
.oe-adjust .oe-discount span { color: #065f46; }
.oe-adjust s { color: var(--oe-muted); font-weight: 400; }
/* the basket's rows keep the line grid, with the same left rule so they read as adjustments, not as the modifiers text */
.oe-line .oe-deposit { border-left: 3px solid var(--oe-line); padding-left: 8px; }
.oe-line .oe-discount { border-left-color: #a7f3d0; }
.oe-line-note { color: var(--oe-muted); font-size: 13px; font-style: italic; }
.oe-line-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.oe-line-total { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; justify-self: end; }
.oe-line-remove { border: 0; background: transparent; color: var(--oe-muted); cursor: pointer; font-size: 13px; padding: 4px 0; }
.oe-totals { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.oe-totals div { display: flex; justify-content: space-between; }
.oe-totals .oe-grand { font-size: 18px; font-weight: 800; margin-top: 4px; }
.oe-totals .oe-min-order { display: block; margin-top: 4px; color: var(--oe-danger); font-size: 13px; font-weight: 600; }
/* the client discount and the voucher named under the total (plan §A26 / §A27); the voucher field's hint turns into the reason when the number is refused */
.oe-totals .oe-applied { display: block; font-size: 13px; font-weight: 600; color: #065f46; }
.oe-voucher .oe-hint.oe-resolved-note { color: var(--oe-danger); }
.oe-error { color: var(--oe-danger); font-size: 13px; margin: 8px 0; }
/* a refusal written under the field it is about (2026-09-18), next to the field marked red */
.oe-field .oe-field-error { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--oe-danger); }
.oe-hint { color: var(--oe-muted); font-size: 13px; margin: 4px 0 12px; }
.oe-signed { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--oe-muted); margin: 6px 0; }
.oe-done { text-align: center; padding: 18px 0 8px; }
.oe-done-no { font-size: 40px; font-weight: 800; letter-spacing: 3px; color: var(--oe-main-ink); margin: 8px 0; }
.oe-done-state { color: var(--oe-muted); }
/* the check mark: the ring draws itself, then the tick, then the whole thing settles with a small bounce */
.oe-done-mark { display: block; width: 84px; height: 84px; margin: 0 auto 10px; }
.oe-done-ring { fill: none; stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; animation: oe-draw .6s ease-out forwards; }
.oe-done-tick { fill: none; stroke: #16a34a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: oe-draw .35s ease-out .5s forwards, oe-pop .3s ease-out .85s; }
.oe-done-mark--wait { display: grid; place-items: center; font-size: 44px; animation: oe-breathe 1.2s ease-in-out infinite; }
@keyframes oe-draw { to { stroke-dashoffset: 0; } }
@keyframes oe-pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .oe-done-ring, .oe-done-tick { animation: none; stroke-dashoffset: 0; } .oe-done-mark--wait, .oe-order-banner--pending .oe-order-banner-icon, .oe-order-track span.is-now { animation: none; } .oe-order-banner { animation: none; } }
.oe-orders { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.oe-orders li { display: flex; justify-content: space-between; padding: 8px 10px; background: var(--oe-bg); border-radius: 10px; font-size: 14px; }

.oe-toast { position: fixed; left: 50%; bottom: calc(96px + var(--oe-vv-bottom, 0px)); transform: translateX(-50%); z-index: 60; max-width: 92vw; padding: 12px 18px; border-radius: 12px; background: #111827; color: #fff; font-size: 14px; box-shadow: var(--oe-shadow-lg); }
.oe-toast.is-error { background: var(--oe-danger); }
.oe-toast code { font-size: 12px; opacity: .85; }

/* ---------- message pages (root, 404, error) ---------- */
.oe-message { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--oe-bg); }
.oe-message-card { background: #fff; border-radius: 20px; padding: 36px 32px; max-width: 460px; width: 100%; text-align: center; box-shadow: var(--oe-shadow); }
.oe-message-card h1 { font-size: 22px; margin-bottom: 10px; letter-spacing: -.02em; }
.oe-message-card p { color: var(--oe-muted); margin: 8px 0; }
.oe-message-card a { color: var(--oe-main-ink); }
.oe-message-logo { height: 40px; margin: 0 auto 16px; }
.oe-message-ref code { font-size: 13px; }

/* ---------- wider screens: two-column cards, centered sheets ---------- */
@media (min-width: 860px) {
  .oe-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oe-layout-grid .oe-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oe-layout-grid .oe-item { grid-template-columns: 1fr; }
  .oe-layout-grid .oe-item-media { aspect-ratio: 4 / 3; min-height: 0; }
  .oe-sheet { align-items: center; }
  .oe-sheet-panel { width: min(920px, 92vw); max-height: 88vh; border-radius: 24px; animation: oe-pop .22s cubic-bezier(.2, .8, .2, 1); }
  @keyframes oe-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
  .oe-sheet-panel--small { width: min(560px, 92vw); }
  .oe-sheet-head { padding: 28px 64px 0 28px; }
  .oe-sheet-body { padding: 8px 28px 16px; }
  .oe-sheet-foot { padding: 14px 28px; }
  .oe-item-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 20px; }
}
@media (min-width: 960px) {
  :root { --oe-gutter: 32px; }
  .oe-content { padding-top: 16px; }
  .oe-section-title, .oe-category-title { font-size: 30px; }
}

/* adults only (plan Part E -1): the 18+ fact is text, not an emoji, and the confirmation sheet is one paragraph and two buttons */
[data-oe-label="adult"] { font-weight: 800; font-size: 0.78em; letter-spacing: -0.02em; }
.oe-age-text { margin: 0; font-size: 15px; line-height: 1.5; }

/* the open order's status banner (plan §A21): fixed at the top; the page makes room for it — the root pads by --oe-banner-h (set by the script while the
   banner shows) and the sticky headers sit below it — so the header's badge, chips and account button stay reachable; above the header (20), below the sheets (50) */
.oe { padding-top: var(--oe-banner-h, 0px); }
.oe-header { top: var(--oe-banner-h, 0px); }
.oe-order-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: #fff; color: var(--oe-ink, #111827); border-bottom: 1px solid var(--oe-line, #e5e7eb); box-shadow: 0 6px 24px rgba(0, 0, 0, .14); font: 14px/1.35 var(--oe-font); animation: oe-drop .35s ease-out; }
.oe-order-banner-in { display: flex; align-items: stretch; max-width: var(--oe-max, 1100px); margin: 0 auto; padding: 0 var(--oe-gutter, 16px); }   /* a full-width bar; its content aligned with the page, like the header's */
@keyframes oe-drop { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
.oe-order-banner-main { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.oe-order-banner-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: color-mix(in oklab, var(--oe-main, #1d5fbf) 14%, white); }
.oe-order-banner--bad .oe-order-banner-icon { background: #fee2e2; }
.oe-order-banner--done .oe-order-banner-icon { background: #dcfce7; }
.oe-order-banner--pending .oe-order-banner-icon { animation: oe-breathe 1.2s ease-in-out infinite; }
@keyframes oe-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.oe-order-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oe-order-banner-text { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.oe-order-banner--bad .oe-order-banner-text { color: #b91c1c; }
.oe-order-banner-meta { font-size: 12px; color: var(--oe-muted, #6b7280); font-variant-numeric: tabular-nums; }
.oe-order-track { display: flex; gap: 4px; margin-top: 4px; }
.oe-order-track span { flex: 1; height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--oe-main, #1d5fbf) 14%, white); }
.oe-order-track span.is-done { background: var(--oe-main, #1d5fbf); }
.oe-order-track span.is-now { background: var(--oe-main, #1d5fbf); animation: oe-track 1.4s ease-in-out infinite; }
.oe-order-track span.is-bad { background: #b91c1c; }
@keyframes oe-track { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.oe-order-banner-close { border: 0; background: var(--oe-bg, #f3f4f6); color: inherit; width: 40px; margin: 8px 0; border-radius: 12px; cursor: pointer; font-size: 14px; }
/* the history sheet: what is happening now, then the timeline */
.oe-order-history-now { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; background: var(--oe-bg, #f3f4f6); }
.oe-order-where { font-size: 13.5px; color: var(--oe-muted); margin: -6px 0 14px 4px; }
.oe-order-history-now > div { flex: 1; min-width: 0; }
.oe-order-history-now strong { display: block; font-size: 16px; margin-bottom: 4px; }
.oe-order-history-now.is-bad strong { color: #b91c1c; }
.oe-order-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.oe-order-history-part-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 8px; }
.oe-order-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.oe-order-history-list li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; color: var(--oe-muted, #6b7280); }
.oe-order-history-list li.is-now { color: var(--oe-ink, #111827); font-weight: 600; }
.oe-order-history-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--oe-bg, #f3f4f6); }
.oe-order-history-list li.is-now .oe-order-history-icon { background: color-mix(in oklab, var(--oe-main, #1d5fbf) 14%, white); }
.oe-order-history-time { font-variant-numeric: tabular-nums; font-size: 12px; }
/* what was ordered, under a part's timeline */
.oe-order-history-items { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--oe-line, #e5e7eb); display: grid; gap: 6px; font-size: 13px; }
.oe-order-history-items li { display: grid; grid-template-columns: 36px 1fr auto; column-gap: 10px; align-items: start; }
.oe-order-history-items li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.oe-order-history-qty { color: var(--oe-muted, #6b7280); text-align: right; font-variant-numeric: tabular-nums; }
.oe-order-history-item { font-weight: 600; }
.oe-order-history-mods { color: var(--oe-muted, #6b7280); font-size: 12px; }
.oe-order-history-sum { font-variant-numeric: tabular-nums; }
/* the table sheet: one card per open order at the table, the tracked ones marked as the eater's own */
[data-oe-table-open] { border: 0; cursor: pointer; font-family: inherit; }   /* the badge's size and weight stay — `font: inherit` would make the button bigger than the chip beside it */
.oe-table-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.oe-table-order { padding: 12px 14px; border-radius: 16px; background: var(--oe-bg, #f3f4f6); }
.oe-table-order.is-mine { box-shadow: inset 0 0 0 2px var(--oe-main, #1d5fbf); }
.oe-table-order-head { display: flex; align-items: center; gap: 10px; }
.oe-table-order-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oe-table-order-who strong { font-size: 15px; }
.oe-table-mine { font-size: 11px; font-weight: 700; color: var(--oe-main-ink, #1d5fbf); background: var(--oe-main-soft, #dbeafe); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.oe-table-order-meta { font-size: 12px; color: var(--oe-muted, #6b7280); }
.oe-table-order-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.oe-table-order .oe-order-history-items { border-top-color: rgba(0, 0, 0, .08); }
.oe-table-total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--oe-ink, #111827); font-weight: 800; font-size: 16px; }
/* the account menu and the order history under it */
.oe-menu { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; }
.oe-menu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--oe-bg, #f3f4f6); color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.oe-menu-item:hover { background: color-mix(in oklab, var(--oe-main, #1d5fbf) 10%, white); }
.oe-menu-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: #fff; }
.oe-menu-arrow { margin-left: auto; color: var(--oe-muted, #6b7280); font-size: 20px; line-height: 1; }
.oe-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oe-history-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--oe-bg, #f3f4f6); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.oe-history-row:disabled { cursor: default; }
.oe-history-row.is-over { opacity: .75; }
.oe-history-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oe-history-title { font-weight: 700; }
.oe-history-meta { font-size: 12px; color: var(--oe-muted, #6b7280); }
.oe-history-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
/* the "Table" button: white while the table is empty, the main colour with the count once orders are on it — on every page, the custom ones included */
[data-oe-table-open].is-empty { color: var(--oe-main-ink, #1d5fbf); background: #fff; }   /* white while empty — green is the "open" chip's colour (reviewer, 2026-09-07) */
[data-oe-table-open].is-busy { color: #fff; background: var(--oe-main, #1d5fbf); }
.oe-table-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: #fff; color: var(--oe-main-ink, #1d5fbf); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: middle; }
/* one order per table: each part with the guest who ordered it */
.oe-table-part { margin-top: 8px; }
.oe-table-part-who { font-weight: 700; font-size: 14px; margin-top: 6px; }
.oe-table-part .oe-order-history-items { margin-top: 4px; padding-top: 6px; }