/*
  CityBites Market components.
  One block per Figma component family, in the order of the Figma pages:
  Actions, Forms, Feedback, Containers, Data, Navigation, Food, Operations.
  Rules: tokens only (no raw colors), no !important, states live here, not in pages.
  Reference: docs/market-design-system.md and /admin/ui-reference/market.
*/

/* ==========================================================================
   Actions
   ========================================================================== */

.cb-mk-button {
    --_cb-mk-button-bg: var(--cb-mk-color-bg-surface);
    --_cb-mk-button-fg: var(--cb-mk-color-text-primary);
    --_cb-mk-button-border: var(--cb-mk-color-border-strong);
    --_cb-mk-button-bg-hover: var(--cb-mk-color-bg-sunken);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cb-mk-space-gap-sm);
    min-height: var(--cb-mk-control-height);
    padding: 0 var(--cb-mk-space-inset-control);
    border: 1px solid var(--_cb-mk-button-border);
    border-radius: var(--cb-mk-radius-control);
    background: var(--_cb-mk-button-bg);
    color: var(--_cb-mk-button-fg);
    font: var(--cb-mk-text-label-m);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), transform var(--cb-mk-motion-fast) var(--cb-mk-motion-ease);
}

.cb-mk-button,
.cb-mk-stepper,
.cb-mk-segmented,
.cb-mk-filter-chip { width: fit-content; max-width: 100%; }
.cb-mk-button:hover { background: var(--_cb-mk-button-bg-hover); }
.cb-mk-button:active { transform: translateY(1px); }

.cb-mk-button--primary {
    --_cb-mk-button-bg: var(--cb-mk-color-bg-brand);
    --_cb-mk-button-fg: var(--cb-mk-color-text-on-brand);
    --_cb-mk-button-border: var(--cb-mk-color-bg-brand);
    --_cb-mk-button-bg-hover: var(--cb-mk-color-bg-brand-hover);
}

.cb-mk-button--accent {
    --_cb-mk-button-bg: var(--cb-mk-color-bg-accent);
    --_cb-mk-button-fg: var(--cb-mk-color-text-on-accent);
    --_cb-mk-button-border: var(--cb-mk-color-bg-accent);
    --_cb-mk-button-bg-hover: var(--cb-mk-color-bg-accent-hover);
}

.cb-mk-button--ghost {
    --_cb-mk-button-bg: transparent;
    --_cb-mk-button-border: transparent;
    --_cb-mk-button-bg-hover: var(--cb-mk-color-bg-sunken);
}

.cb-mk-button--danger {
    --_cb-mk-button-bg: var(--cb-mk-color-bg-danger);
    --_cb-mk-button-fg: var(--cb-mk-color-text-on-danger);
    --_cb-mk-button-border: var(--cb-mk-color-bg-danger);
    --_cb-mk-button-bg-hover: var(--cb-mk-color-bg-danger);
}

.cb-mk-button--sm { min-height: var(--cb-mk-control-height-sm); padding: 0 var(--cb-mk-space-inset-field); font: var(--cb-mk-text-label-s); }
.cb-mk-button--lg { min-height: var(--cb-mk-control-height-lg); padding: 0 var(--cb-mk-space-8); }
.cb-mk-button--block { display: flex; width: 100%; }

.cb-mk-button:disabled:not([aria-busy="true"]),
.cb-mk-button[aria-disabled="true"]:not([aria-busy="true"]) {
    --_cb-mk-button-bg: var(--cb-mk-color-bg-disabled);
    --_cb-mk-button-fg: var(--cb-mk-color-text-disabled);
    --_cb-mk-button-border: var(--cb-mk-color-bg-disabled);
    --_cb-mk-button-bg-hover: var(--cb-mk-color-bg-disabled);
    cursor: not-allowed;
    transform: none;
}

/* Loading (Figma: Button, State=Loading): the button keeps its own color and shows a spinner while the request runs.
   citybites.app.js sets aria-busy (and disabled) on the button that submitted a form. */
.cb-mk-button[aria-busy="true"] { cursor: progress; transform: none; opacity: 1; }
.cb-mk-button[aria-busy="true"]::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--cb-mk-radius-full); animation: cb-mk-spin 0.8s linear infinite; }

.cb-mk-icon-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--cb-mk-control-height);
    height: var(--cb-mk-control-height);
    padding: 0;
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-surface);
    color: var(--cb-mk-color-text-primary);
    cursor: pointer;
    transition: background-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease);
}

.cb-mk-icon-button:hover { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-icon-button:disabled { border-color: transparent; background: var(--cb-mk-color-bg-disabled); color: var(--cb-mk-color-text-disabled); cursor: not-allowed; }
.cb-mk-icon-button--sm { width: var(--cb-mk-control-height-sm); height: var(--cb-mk-control-height-sm); }
.cb-mk-icon-button--ghost { border-color: transparent; background: transparent; }
.cb-mk-icon-button--on-inverse { border-color: transparent; background: transparent; color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-icon-button--on-inverse:hover { background: var(--cb-mk-color-bg-overlay-hover); }
.cb-mk-icon-button--on-inverse:active { background: var(--cb-mk-color-bg-overlay-strong); }
.cb-mk-icon-button--on-inverse:focus-visible { outline: 2px solid var(--cb-mk-color-border-inverse); outline-offset: 2px; }
.cb-mk-icon-button--on-media { border-color: transparent; background: var(--cb-mk-color-bg-raised); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-icon-button[aria-pressed="true"] { color: var(--cb-mk-color-text-warning); }
.cb-mk-icon-button[aria-pressed="true"] .cb-mk-icon { fill: currentColor; }

.cb-mk-icon-button__badge {
    position: absolute;
    top: -0.125rem;
    right: -0.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 var(--cb-mk-space-2);
    border: 2px solid var(--cb-mk-color-bg-surface);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-warning);
    color: var(--cb-mk-color-text-on-brand);
    font: 700 0.6875rem/0.875rem var(--cb-mk-font-family-body);
    text-align: center;
}

.cb-mk-link {
    color: var(--cb-mk-color-text-brand);
    font: var(--cb-mk-text-label-m);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

.cb-mk-link:hover { text-decoration-thickness: 2px; }

.cb-mk-segmented {
    display: inline-flex;
    gap: var(--cb-mk-space-1);
    padding: var(--cb-mk-space-1);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-sunken);
}

.cb-mk-segmented__option { position: relative; }
.cb-mk-segmented__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }

.cb-mk-segmented__option span {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-mk-space-gap-xs);
    min-height: var(--cb-mk-control-height-sm);
    padding: 0 var(--cb-mk-space-inset-field);
    border-radius: var(--cb-mk-radius-full);
    color: var(--cb-mk-color-text-secondary);
    font: var(--cb-mk-text-label-s);
}

.cb-mk-segmented__option input:checked + span { background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-primary); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-segmented__option input:focus-visible + span { box-shadow: var(--cb-mk-focus-ring); }
/* Fill (Figma: Food / Tip picker): the control spans its container and every segment gets the same width, so the row
   never wraps. Button segments carry aria-pressed instead of a radio. */
.cb-mk-segmented--fill { display: flex; width: 100%; }
.cb-mk-segmented--fill > * { flex: 1 1 0; min-width: 0; }
.cb-mk-segmented--fill .cb-mk-segmented__option span { width: 100%; justify-content: center; padding-inline: var(--cb-mk-space-2); }
.cb-mk-segmented__button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: var(--cb-mk-control-height-sm); padding: 0 var(--cb-mk-space-2); border: 0; border-radius: var(--cb-mk-radius-full); background: transparent; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cb-mk-segmented__button:hover { color: var(--cb-mk-color-text-primary); }
a.cb-mk-segmented__button { padding-inline: var(--cb-mk-space-4); text-decoration: none; }
.cb-mk-segmented__button[aria-current="page"],
.cb-mk-segmented__button[aria-pressed="true"] { background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-primary); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-segmented__button:focus-visible { outline: none; box-shadow: var(--cb-mk-focus-ring); }

/* ==========================================================================
   Forms
   ========================================================================== */

.cb-mk-field { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-xs); min-width: 0; }
.cb-mk-field__label { font: var(--cb-mk-text-label-m); color: var(--cb-mk-color-text-primary); }
.cb-mk-field__label small { font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-field__hint { font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-field__error { display: flex; align-items: center; gap: var(--cb-mk-space-gap-xs); font: var(--cb-mk-text-label-s); color: var(--cb-mk-color-text-danger); }
.cb-mk-field__error:empty { display: none; }

.cb-mk-field__control { position: relative; display: flex; align-items: center; }
.cb-mk-field__control > .cb-mk-icon { position: absolute; left: var(--cb-mk-space-inset-field); color: var(--cb-mk-color-text-secondary); pointer-events: none; }
.cb-mk-field__control > .cb-mk-icon ~ .cb-mk-input { padding-left: calc(var(--cb-mk-space-inset-field) * 2 + 1.25rem); }
.cb-mk-field__suffix { position: absolute; right: var(--cb-mk-space-inset-field); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); }
.cb-mk-field__prefix { position: absolute; left: var(--cb-mk-space-inset-field); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-m); pointer-events: none; }
.cb-mk-field__prefix ~ .cb-mk-input { padding-left: calc(var(--cb-mk-space-inset-field) + 1.25rem); }
/* A button at the end of a field (Figma: Text field, Show password toggle). citybites.market.js adds it to password inputs. */
.cb-mk-field__action { position: absolute; right: var(--cb-mk-space-2); display: grid; place-items: center; width: var(--cb-mk-size-36); height: var(--cb-mk-size-36); padding: 0; border: 0; border-radius: var(--cb-mk-radius-full); background: none; color: var(--cb-mk-color-text-secondary); cursor: pointer; }
.cb-mk-field__action:hover { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-primary); }
.cb-mk-field__action:focus-visible { outline: none; box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-field__control:has(> .cb-mk-field__action) > .cb-mk-input { padding-right: calc(var(--cb-mk-size-36) + var(--cb-mk-space-3)); }

.cb-mk-input,
.cb-mk-select,
.cb-mk-textarea {
    width: 100%;
    min-height: var(--cb-mk-control-height);
    padding: 0 var(--cb-mk-space-inset-field);
    border: 1px solid var(--cb-mk-color-border-control);
    border-radius: var(--cb-mk-radius-field);
    background: var(--cb-mk-color-bg-raised);
    color: var(--cb-mk-color-text-primary);
    font: var(--cb-mk-text-body-m);
    transition: border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), box-shadow var(--cb-mk-motion-fast) var(--cb-mk-motion-ease);
}

.cb-mk-input::placeholder,
.cb-mk-textarea::placeholder { color: var(--cb-mk-color-text-disabled); }
.cb-mk-input:hover,
.cb-mk-select:hover,
.cb-mk-textarea:hover { border-color: var(--cb-mk-color-border-focus); }

/* Focus: the border turns brand and thickens; no ring around the box. */
.cb-mk-input:focus-visible,
.cb-mk-select:focus-visible,
.cb-mk-textarea:focus-visible { outline: none; border-color: var(--cb-mk-color-border-focus); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-focus); }

.cb-mk-textarea { min-height: 6rem; padding-block: var(--cb-mk-space-4); resize: vertical; }

/* The chevron of Figma: Dropdown (Icon/Chevron down), drawn as two thin strokes so it follows the text color. */
.cb-mk-select {
    appearance: none;
    padding-right: calc(var(--cb-mk-space-inset-field) * 2 + 1rem);
    background-image:
        linear-gradient(45deg, transparent calc(50% - 0.9px), currentColor calc(50% - 0.9px), currentColor calc(50% + 0.9px), transparent calc(50% + 0.9px)),
        linear-gradient(135deg, transparent calc(50% - 0.9px), currentColor calc(50% - 0.9px), currentColor calc(50% + 0.9px), transparent calc(50% + 0.9px));
    background-position: calc(100% - var(--cb-mk-space-inset-field) - 0.375rem) 50%, calc(100% - var(--cb-mk-space-inset-field)) 50%;
    background-size: 0.375rem 0.375rem;
    background-repeat: no-repeat;
}

[aria-invalid="true"].cb-mk-input,
[aria-invalid="true"].cb-mk-select,
[aria-invalid="true"].cb-mk-textarea { border-color: var(--cb-mk-color-border-danger); }
/* A field in error keeps its red edge while focused. */
[aria-invalid="true"]:is(.cb-mk-input, .cb-mk-select, .cb-mk-textarea):focus-visible { border-color: var(--cb-mk-color-border-danger); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-danger); }

.cb-mk-input:disabled,
.cb-mk-select:disabled,
.cb-mk-textarea:disabled { background: var(--cb-mk-color-bg-disabled); color: var(--cb-mk-color-text-disabled); border-color: var(--cb-mk-color-border-default); cursor: not-allowed; }

/* Participant select (Figma: Forms / Participant select): a select with a person tile, its hint, and the meal guidance
   (data-state="info" for the meal profile, "warning" for an allergen the person avoids), hidden until the script fills it. */
.cb-mk-participant-select__control { position: relative; display: flex; align-items: center; }
.cb-mk-participant-select__tile { position: absolute; left: var(--cb-mk-space-3); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-brand); pointer-events: none; }
.cb-mk-participant-select__control > .cb-mk-select { padding-left: calc(var(--cb-mk-space-3) * 2 + 2rem); }
.cb-mk-participant-select__guidance { margin: var(--cb-mk-space-1) 0 0; padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-participant-select__guidance[data-state="warning"] { background: var(--cb-mk-color-bg-warning-soft); color: var(--cb-mk-color-text-warning); }
.cb-mk-participant-select__guidance[hidden] { display: none; }

/* Checkbox, radio and switch share one anatomy: <label class="cb-mk-check"><input type=checkbox><span class="cb-mk-check__box"></span>Label</label> */
.cb-mk-check,
.cb-mk-radio,
.cb-mk-switch {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--cb-mk-space-gap-sm);
    font: var(--cb-mk-text-body-m);
    cursor: pointer;
}

.cb-mk-check input,
.cb-mk-radio input,
.cb-mk-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.cb-mk-check__box,
.cb-mk-radio__dot {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 0.0625rem;
    border: 1.5px solid var(--cb-mk-color-border-control);
    background: var(--cb-mk-color-bg-raised);
    color: var(--cb-mk-color-text-on-brand);
    transition: background-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease);
}

.cb-mk-check__box { border-radius: var(--cb-mk-radius-sm); }
.cb-mk-check__box .cb-mk-icon { width: 0.875rem; height: 0.875rem; stroke-width: 3; opacity: 0; }
.cb-mk-radio__dot { border-radius: var(--cb-mk-radius-full); }
.cb-mk-radio__dot::after { content: ""; width: 0.625rem; height: 0.625rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-text-on-brand); transform: scale(0); transition: transform var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }

.cb-mk-check input:checked + .cb-mk-check__box,
.cb-mk-radio input:checked + .cb-mk-radio__dot { background: var(--cb-mk-color-bg-brand); border-color: var(--cb-mk-color-bg-brand); }
.cb-mk-check input:checked + .cb-mk-check__box .cb-mk-icon { opacity: 1; }
.cb-mk-radio input:checked + .cb-mk-radio__dot::after { transform: scale(1); }
.cb-mk-check input:focus-visible + .cb-mk-check__box,
.cb-mk-radio input:focus-visible + .cb-mk-radio__dot,
.cb-mk-switch input:focus-visible + .cb-mk-switch__track { box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-check input:disabled + .cb-mk-check__box,
.cb-mk-radio input:disabled + .cb-mk-radio__dot { background: var(--cb-mk-color-bg-disabled); border-color: var(--cb-mk-color-border-default); }
.cb-mk-check:has(input:disabled),
.cb-mk-radio:has(input:disabled),
.cb-mk-switch:has(input:disabled) { color: var(--cb-mk-color-text-disabled); cursor: not-allowed; }

.cb-mk-switch__track {
    flex: none;
    position: relative;
    width: 2.75rem;
    height: 1.625rem;
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-border-control);
    transition: background-color var(--cb-mk-motion-base) var(--cb-mk-motion-ease);
}

.cb-mk-switch__track::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-raised);
    box-shadow: var(--cb-mk-shadow-raised);
    transition: transform var(--cb-mk-motion-base) var(--cb-mk-motion-ease);
}

.cb-mk-switch input:checked + .cb-mk-switch__track { background: var(--cb-mk-color-bg-brand); }
.cb-mk-switch input:checked + .cb-mk-switch__track::after { transform: translateX(1.125rem); }

.cb-mk-choice-text { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-choice-text small { font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }

.cb-mk-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-mk-space-2);
    padding: var(--cb-mk-space-1);
    border: 1px solid var(--cb-mk-color-border-control);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-raised);
}

.cb-mk-stepper button {
    display: grid;
    place-items: center;
    width: var(--cb-mk-control-height-sm);
    height: var(--cb-mk-control-height-sm);
    border: 0;
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-sunken);
    color: var(--cb-mk-color-text-primary);
    cursor: pointer;
}

.cb-mk-stepper button:hover { background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-stepper button:disabled { background: transparent; color: var(--cb-mk-color-text-disabled); cursor: not-allowed; }
.cb-mk-stepper output { min-width: 2rem; text-align: center; font: var(--cb-mk-text-label-m); font-variant-numeric: tabular-nums; }
.cb-mk-stepper input { width: 2.5rem; padding: 0; border: 0; background: transparent; color: inherit; text-align: center; font: var(--cb-mk-text-label-m); font-variant-numeric: tabular-nums; appearance: textfield; }
.cb-mk-stepper input::-webkit-inner-spin-button,
.cb-mk-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.cb-mk-stepper:has(input:focus-visible) { border-color: var(--cb-mk-color-border-focus); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-focus); }

/* Date field, calendar, time slots and day chips */
.cb-mk-date-field {
    display: flex;
    align-items: center;
    gap: var(--cb-mk-space-gap-sm);
    width: 100%;
    min-height: var(--cb-mk-control-height);
    padding: 0 var(--cb-mk-space-inset-field);
    border: 1px solid var(--cb-mk-color-border-control);
    border-radius: var(--cb-mk-radius-field);
    background: var(--cb-mk-color-bg-raised);
    color: var(--cb-mk-color-text-primary);
    font: var(--cb-mk-text-body-m);
    text-align: left;
    cursor: pointer;
}

.cb-mk-date-field > span { flex: 1; min-width: 0; }
.cb-mk-date-field > .cb-mk-icon:first-child { color: var(--cb-mk-color-text-secondary); }
.cb-mk-date-field[aria-expanded="true"] { border-color: var(--cb-mk-color-border-focus); box-shadow: var(--cb-mk-focus-ring); }

.cb-mk-date-picker {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 15rem);
    width: fit-content;
    max-width: 100%;
    gap: var(--cb-mk-space-gap-lg);
    padding: var(--cb-mk-space-inset-card);
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-card);
    background: var(--cb-mk-color-bg-raised);
    box-shadow: var(--cb-mk-shadow-overlay);
}

.cb-mk-calendar { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); min-width: 0; }
.cb-mk-calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--cb-mk-space-1); justify-items: center; text-align: center; }
.cb-mk-calendar__weekday { padding: var(--cb-mk-space-2) 0; font: var(--cb-mk-text-label-s); color: var(--cb-mk-color-text-secondary); }

.cb-mk-calendar__day {
    position: relative;
    width: 100%;
    max-width: 2.75rem;
    aspect-ratio: 1;
    border: 0;
    border-radius: var(--cb-mk-radius-full);
    background: transparent;
    color: var(--cb-mk-color-text-primary);
    font: var(--cb-mk-text-label-m);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cb-mk-calendar__day:hover { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-calendar__day[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--cb-mk-color-border-brand); }
.cb-mk-calendar__day[aria-pressed="true"] { background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-calendar__day:disabled { color: var(--cb-mk-color-text-disabled); cursor: not-allowed; background: transparent; }
.cb-mk-calendar__day--closed { text-decoration: line-through; }
.cb-mk-calendar__day--outside { color: var(--cb-mk-color-text-disabled); }
/* --compact (Figma: Calendar day instances at 36px): for a calendar inside a panel, so the panel opens without scrolling. */
.cb-mk-calendar--compact .cb-mk-calendar__weekday { padding: var(--cb-mk-space-1) 0; }
.cb-mk-calendar--compact .cb-mk-calendar__day { max-width: 2.25rem; }
.cb-mk-calendar__day--has-order::after { content: ""; position: absolute; left: 50%; bottom: 0.25rem; width: 0.3125rem; height: 0.3125rem; margin-left: -0.15625rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-warning); }

.cb-mk-time-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--cb-mk-space-gap-sm); align-content: start; }

.cb-mk-time-slot {
    min-height: var(--cb-mk-control-height-sm);
    padding: 0 var(--cb-mk-space-4);
    border: 1px solid var(--cb-mk-color-border-strong);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-raised);
    color: var(--cb-mk-color-text-primary);
    font: var(--cb-mk-text-label-s);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cb-mk-time-slot:hover { border-color: var(--cb-mk-color-border-focus); }
.cb-mk-time-slot[aria-pressed="true"] { background: var(--cb-mk-color-bg-brand); border-color: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-time-slot:disabled { background: var(--cb-mk-color-bg-disabled); border-color: transparent; color: var(--cb-mk-color-text-disabled); text-decoration: line-through; cursor: not-allowed; }

/* Time list (Figma: Forms / Time list, Time list option): a scrolling column of times on a sunken background; the chosen
   time is filled (aria-pressed="true"). */
.cb-mk-time-list { position: relative; display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-height: 0; max-height: 15.5rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--cb-mk-space-2); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-sunken); scrollbar-width: thin; }
.cb-mk-time-list__option { flex: none; min-height: 2.5rem; padding: 0 var(--cb-mk-space-3); border: 0; border-radius: var(--cb-mk-radius-field); background: transparent; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-m); font-variant-numeric: tabular-nums; cursor: pointer; }
.cb-mk-time-list__option:hover { background: var(--cb-mk-color-bg-raised); }
.cb-mk-time-list__option[aria-pressed="true"] { background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-time-list__option:disabled { background: transparent; color: var(--cb-mk-color-text-disabled); text-decoration: line-through; cursor: not-allowed; }
.cb-mk-time-list__empty { padding: var(--cb-mk-space-3); color: var(--cb-mk-color-text-secondary); text-align: center; }

/* Date and time picker (Figma: Forms / Date and time picker): a calendar beside a Time list as tall as the calendar, and the
   chosen date and time in the summary under them. Phones put the Time list under the calendar. */
.cb-mk-date-time-picker { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--cb-mk-space-4); padding: var(--cb-mk-space-5); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-primary); }
.cb-mk-date-time-picker__times { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); min-height: 0; }
.cb-mk-date-time-picker__times-head { display: flex; align-items: center; min-height: var(--cb-mk-control-height-sm); }
.cb-mk-date-time-picker__times > .cb-mk-time-list { flex: 1 1 0; max-height: none; }
.cb-mk-date-time-picker__summary { display: flex; grid-column: 1 / -1; align-items: center; gap: var(--cb-mk-space-4); margin: 0; padding: var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-date-time-picker__summary-icon { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-brand); }
.cb-mk-date-time-picker__summary-text { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-date-time-picker__summary-text strong { font: var(--cb-mk-text-label-m); }
@media (max-width: 47.99rem) {
    .cb-mk-date-time-picker { grid-template-columns: minmax(0, 1fr); }
    .cb-mk-date-time-picker__times > .cb-mk-time-list { flex: none; max-height: 12rem; }
}

.cb-mk-day-chips { display: flex; gap: var(--cb-mk-space-gap-sm); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--cb-mk-space-1); }

.cb-mk-day-chip {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cb-mk-space-1);
    min-width: 3.75rem;
    padding: var(--cb-mk-space-3) var(--cb-mk-space-4);
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-lg);
    background: var(--cb-mk-color-bg-raised);
    color: var(--cb-mk-color-text-primary);
    cursor: pointer;
}

.cb-mk-day-chip small { font: var(--cb-mk-text-label-s); color: var(--cb-mk-color-text-secondary); }
.cb-mk-day-chip strong { font: var(--cb-mk-text-number-l); font-size: 1.25rem; }
.cb-mk-day-chip[aria-pressed="true"] { background: var(--cb-mk-color-bg-brand); border-color: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-day-chip[aria-pressed="true"] small { color: var(--cb-mk-color-text-on-brand); }
.cb-mk-day-chip:disabled { color: var(--cb-mk-color-text-disabled); background: var(--cb-mk-color-bg-disabled); cursor: not-allowed; }

/* Delivery fields (Figma: Forms / Delivery segment, Delivery bar, Delivery sheet, Delivery field, Delivery office panel,
   Delivery date panel, Event details panel; partial Partials/Market/_DeliveryBar). Location, date and time, and event
   details in one rounded bar of three segments, from the start of an order; phones get a Delivery details row whose Edit
   opens the fields as a bottom sheet (data-state="open") with boxed fields. Each field opens its white panel below it;
   citybites.storefront-browse.js draws the days and slots. */
.cb-mk-delivery { position: relative; min-width: 0; }
.cb-mk-delivery__summary,
.cb-mk-delivery__backdrop,
.cb-mk-delivery__sheet-head { display: none; }
.cb-mk-delivery__form { min-width: 0; margin: 0; }
.cb-mk-delivery__fields { display: flex; gap: var(--cb-mk-space-3); min-width: 0; }
.cb-mk-delivery-field { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }

/* Delivery field: a boxed control with an icon tile, the label and the value. */
.cb-mk-delivery-field__trigger { display: flex; align-items: center; gap: var(--cb-mk-space-4); width: 100%; min-height: 3.25rem; padding: var(--cb-mk-space-3) var(--cb-mk-space-5) var(--cb-mk-space-3) var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-primary); text-align: left; cursor: pointer; transition: background-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-delivery-field__trigger:hover { border-color: var(--cb-mk-color-border-strong); }
.cb-mk-delivery-field__trigger[aria-expanded="true"] { border-color: var(--cb-mk-color-border-brand); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-brand); }
.cb-mk-delivery-field__trigger:disabled { background: var(--cb-mk-color-bg-disabled); color: var(--cb-mk-color-text-disabled); cursor: not-allowed; }
.cb-mk-delivery-field__icon { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-brand); }
.cb-mk-delivery-field__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cb-mk-delivery-field__label { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-delivery-field__value { overflow: hidden; font: var(--cb-mk-text-label-m); text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-delivery-field__chevron { display: grid; flex: none; color: var(--cb-mk-color-text-secondary); transition: transform var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-delivery-field__trigger[aria-expanded="true"] .cb-mk-delivery-field__chevron { transform: rotate(180deg); }
/* State=Error: the start form marks a missing field (data-state="error") and adds the [data-order-start-error] line. */
.cb-mk-delivery-field[data-state="error"] .cb-mk-delivery-field__trigger { border-color: var(--cb-mk-color-border-danger); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-danger); }
.cb-mk-delivery-field[data-state="error"] .cb-mk-delivery-field__icon { background: var(--cb-mk-color-bg-danger-soft); color: var(--cb-mk-color-text-danger); }
.cb-mk-delivery-field[data-state="error"] .cb-mk-delivery-field__label { color: var(--cb-mk-color-text-danger); }
.cb-mk-delivery-field > [data-order-start-error] { margin: var(--cb-mk-space-2) 0 0; color: var(--cb-mk-color-text-danger); font: var(--cb-mk-text-label-s); }
.cb-mk-delivery-field:has([aria-expanded="true"]) > [data-order-start-error] { visibility: hidden; }

/* Panels: the same white popover for all three fields, as tall as their content. Only when the window has less room below
   the field than that (--cb-browse-panel-available, set by citybites.storefront-browse.js) does the body scroll, with Apply pinned. */
.cb-mk-delivery-panel { position: absolute; top: calc(100% + var(--cb-mk-space-3)); left: 0; z-index: 30; display: flex; flex-direction: column; width: min(22rem, calc(100vw - 2rem)); max-height: var(--cb-browse-panel-available, calc(100vh - 8rem)); overflow: hidden; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-raised); box-shadow: var(--cb-mk-shadow-overlay); color: var(--cb-mk-color-text-primary); }
.cb-mk-delivery-panel--timing { width: min(24rem, calc(100vw - 2rem)); }
.cb-mk-delivery-panel--event { width: min(28rem, calc(100vw - 2rem)); }
.cb-mk-delivery-panel__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--cb-mk-space-gap); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--cb-mk-space-6); }
.cb-mk-delivery-panel__foot { flex: none; padding: var(--cb-mk-space-4) var(--cb-mk-space-6) var(--cb-mk-space-6); border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-delivery-panel__head { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); }
.cb-mk-delivery-panel__empty { color: var(--cb-mk-color-text-secondary); }
/* Delivery office panel: search, then one Office option per office (a check column, name and address). */
.cb-mk-delivery-panel--office { gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-3); }
.cb-mk-delivery-panel--office > .cb-mk-delivery-panel__empty { padding: var(--cb-mk-space-3) var(--cb-mk-space-4); }
.cb-mk-delivery-panel__options { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
.cb-mk-delivery-office { align-items: flex-start; min-height: 3.25rem; padding: var(--cb-mk-space-3) var(--cb-mk-space-4); color: var(--cb-mk-color-text-primary); text-align: left; }
.cb-mk-delivery-office > .cb-mk-icon { flex: none; margin-top: 0.1875rem; visibility: hidden; }
.cb-mk-delivery-office[aria-checked="true"] > .cb-mk-icon { visibility: visible; }
.cb-mk-delivery-office__text { display: flex; flex-direction: column; gap: 0; }
.cb-mk-delivery-office__text strong { font: var(--cb-mk-text-body-m); }
.cb-mk-delivery-office[aria-checked="true"] .cb-mk-delivery-office__text strong { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-delivery-office[data-office-ready="false"] .cb-mk-delivery-office__text strong { color: var(--cb-mk-color-text-secondary); }
.cb-mk-delivery-office__note { color: var(--cb-mk-color-text-warning); }
/* Delivery date panel: one column, the compact calendar, then Deliver by with the range and the Earlier and Later arrows
   (like the month arrows), and the slots. */
.cb-mk-delivery-panel--timing .cb-mk-calendar { padding-bottom: var(--cb-mk-space-4); border-bottom: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-delivery-panel__times { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-delivery-panel__time-head { display: flex; align-items: center; gap: var(--cb-mk-space-3); color: var(--cb-mk-color-text-secondary); }
.cb-mk-delivery-panel__time-head > [data-browse-time-range] { flex: 1; min-width: 0; }
.cb-mk-time-slots > .cb-mk-delivery-panel__empty { grid-column: 1 / -1; }
/* Event details panel: event name and headcount in one row, the group order settings under a hairline; the participant
   cutoff opens a Date and time picker. */
.cb-mk-delivery-panel__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, max-content); align-items: end; gap: var(--cb-mk-space-4); }
.cb-mk-delivery-panel__row > .cb-mk-field > .cb-mk-field__label { white-space: nowrap; }
.cb-mk-delivery-panel__group { min-width: 0; margin: 0; padding: var(--cb-mk-space-5) 0 0; border: 0; border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-delivery-panel__group > legend { float: left; width: 100%; margin-bottom: var(--cb-mk-space-4); padding: 0; }
.cb-mk-delivery-panel__group > legend + * { clear: both; }
.cb-mk-delivery-panel__group-controls { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); margin-top: var(--cb-mk-space-gap); }
.cb-mk-delivery-cutoff > .cb-mk-date-time-picker { margin-top: var(--cb-mk-space-2); }
.cb-mk-delivery-confirm { width: min(100%, 30rem); }

@media (min-width: 48rem) {
    /* Figma: Delivery bar, Layout=Bar: one raised, fully rounded control; the segments have no icon or border and hairlines
       between them; the date and event panels open toward the left because the bar sits at the right. */
    .cb-mk-delivery .cb-mk-delivery__form { width: fit-content; max-width: 100%; padding: var(--cb-mk-space-2); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-raised); box-shadow: var(--cb-mk-shadow-raised); }
    .cb-mk-delivery .cb-mk-delivery__fields { gap: 0; }
    .cb-mk-delivery .cb-mk-delivery-field { flex: 0 1 auto; }
    .cb-mk-delivery .cb-mk-delivery-field + .cb-mk-delivery-field::before { content: ""; position: absolute; top: var(--cb-mk-space-4); bottom: var(--cb-mk-space-4); left: 0; width: 1px; background: var(--cb-mk-color-border-default); pointer-events: none; }
    .cb-mk-delivery .cb-mk-delivery-field:is(:hover, :has([aria-expanded="true"]))::before,
    .cb-mk-delivery .cb-mk-delivery-field:is(:hover, :has([aria-expanded="true"])) + .cb-mk-delivery-field::before { opacity: 0; }
    .cb-mk-delivery .cb-mk-delivery-field__trigger { gap: var(--cb-mk-space-4); padding: var(--cb-mk-space-3) var(--cb-mk-space-6); border: 0; border-radius: var(--cb-mk-radius-full); background: transparent; box-shadow: none; }
    .cb-mk-delivery .cb-mk-delivery-field__trigger:hover { background: var(--cb-mk-color-bg-sunken); }
    .cb-mk-delivery .cb-mk-delivery-field__trigger[aria-expanded="true"] { background: var(--cb-mk-color-bg-accent-soft); box-shadow: none; }
    /* Delivery segment, State=Error: the red ring, and the missing message under the segment without growing the bar. */
    .cb-mk-delivery .cb-mk-delivery-field[data-state="error"] .cb-mk-delivery-field__trigger { box-shadow: inset 0 0 0 2px var(--cb-mk-color-border-danger); }
    .cb-mk-delivery .cb-mk-delivery-field > [data-order-start-error] { position: absolute; top: calc(100% + var(--cb-mk-space-4)); left: var(--cb-mk-space-6); margin: 0; white-space: nowrap; }
    .cb-mk-delivery .cb-mk-delivery-field__icon { display: none; }
    .cb-mk-delivery .cb-mk-delivery-field__value { max-width: 13rem; }
    .cb-mk-delivery :is(.cb-mk-delivery-field--timing, .cb-mk-delivery-field--event) .cb-mk-delivery-panel { right: 0; left: auto; }
}

@media (max-width: 47.99rem) {
    /* Phones: the fields stack in the sheet; panels open in place under their field. */
    .cb-mk-delivery__fields { flex-direction: column; }
    .cb-mk-delivery-panel { position: static; width: auto; max-height: none; margin-top: var(--cb-mk-space-3); box-shadow: none; }
    /* Figma: Delivery bar, Layout=Summary; Delivery sheet: one Delivery details row; Edit opens the fields as a sheet. */
    .cb-mk-delivery .cb-mk-delivery__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--cb-mk-space-3); width: 100%; padding: var(--cb-mk-space-4) var(--cb-mk-space-5); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-primary); text-align: left; cursor: pointer; }
    .cb-mk-delivery__summary-label { grid-column: 1; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
    .cb-mk-delivery__summary-main { grid-column: 1; overflow: hidden; font: var(--cb-mk-text-body-m-strong); text-overflow: ellipsis; white-space: nowrap; }
    .cb-mk-delivery__summary-meta { grid-column: 1; overflow: hidden; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); text-overflow: ellipsis; white-space: nowrap; }
    .cb-mk-delivery__summary-edit { grid-column: 2; grid-row: 1 / span 3; color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-label-m); }
    .cb-mk-delivery .cb-mk-delivery__backdrop { position: fixed; inset: 0; z-index: 79; display: block; border: 0; background: color-mix(in srgb, var(--cb-mk-color-bg-scrim) 48%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
    .cb-mk-delivery .cb-mk-delivery__form { position: fixed; inset: auto 0 0; z-index: 80; display: flex; flex-direction: column; gap: var(--cb-mk-space-5); max-height: min(88vh, 44rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--cb-mk-space-6) var(--cb-mk-space-6) calc(var(--cb-mk-space-7) + env(safe-area-inset-bottom, 0px)); border-radius: var(--cb-mk-radius-xl) var(--cb-mk-radius-xl) 0 0; background: var(--cb-mk-color-bg-surface); box-shadow: var(--cb-mk-shadow-sheet); visibility: hidden; pointer-events: none; transform: translateY(105%); transition: transform var(--cb-mk-motion-base) var(--cb-mk-motion-ease), visibility 0s linear var(--cb-mk-motion-base); }
    .cb-mk-delivery[data-state="open"] .cb-mk-delivery__backdrop { opacity: 1; pointer-events: auto; }
    .cb-mk-delivery[data-state="open"] .cb-mk-delivery__form { visibility: visible; pointer-events: auto; transform: none; transition: transform var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
    .cb-mk-delivery .cb-mk-delivery__sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-4); }
    .cb-mk-delivery .cb-mk-delivery-field__icon { display: none; }
}

.cb-mk-delivery [hidden],
.cb-mk-delivery-confirm [hidden] { display: none; }

.cb-mk-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cb-mk-space-gap-sm);
    padding: var(--cb-mk-space-8) var(--cb-mk-space-inset-card);
    border: 1.5px dashed var(--cb-mk-color-border-strong);
    border-radius: var(--cb-mk-radius-card);
    background: var(--cb-mk-color-bg-surface);
    color: var(--cb-mk-color-text-secondary);
    text-align: center;
}

.cb-mk-dropzone > .cb-mk-icon { width: 2rem; height: 2rem; color: var(--cb-mk-color-text-brand); }
.cb-mk-dropzone strong { font: var(--cb-mk-text-label-m); color: var(--cb-mk-color-text-primary); }
.cb-mk-dropzone[data-state="dragover"] { border-color: var(--cb-mk-color-border-focus); background: var(--cb-mk-color-bg-accent-soft); }
label.cb-mk-dropzone { cursor: pointer; }
label.cb-mk-dropzone:hover { border-color: var(--cb-mk-color-border-brand); }
.cb-mk-dropzone:focus-within { border-color: var(--cb-mk-color-border-focus); box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-dropzone:has(input[aria-invalid="true"]) { border-color: var(--cb-mk-color-border-danger); }
.cb-mk-dropzone__browse { color: var(--cb-mk-color-text-brand); text-decoration: underline; text-underline-offset: 0.15em; }
/* File upload, chosen (Figma: Forms / File upload, State=Chosen): the file replaces the dropzone until it is removed. */
.cb-mk-file-row { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-width: 0; padding: var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-strong); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); }
.cb-mk-file-row > .cb-mk-icon { flex: none; color: var(--cb-mk-color-text-brand); }
.cb-mk-file-row__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cb-mk-file-row__text strong { overflow: hidden; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-m); text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-file-row__text small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }

/* Form section (Figma: Forms / Form section): the section heading and one line about it on top, then its fields with
   their labels on top (top-aligned labels read fastest and work at every width). Short related fields, such as city,
   state and ZIP, share a row once the section is 32rem wide; .cb-mk-field--full spans the row. Sections are split by
   a hairline. */
.cb-mk-form-section {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--cb-mk-space-gap);
    padding-block: var(--cb-mk-space-section);
    border-top: 1px solid var(--cb-mk-color-border-default);
}

.cb-mk-form-section:first-child { padding-top: 0; border-top: 0; }
.cb-mk-form-section__intro { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-xs); max-width: 40rem; }
.cb-mk-form-section__intro > * { margin: 0; }
.cb-mk-form-section__intro p { font: var(--cb-mk-text-body-s); color: var(--cb-mk-color-text-secondary); }
.cb-mk-form-section__fields { --_cb-mk-fields-gap: var(--cb-mk-space-gap); display: grid; column-gap: var(--cb-mk-space-gap); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 32rem) {
    .cb-mk-form-section__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cb-mk-form-section__fields > .cb-mk-field--full { grid-column: 1 / -1; }
/* Short fields side by side that wrap, such as people, start and hours (Figma: Food / Service offering form). */
.cb-mk-fields { --_cb-mk-fields-gap: var(--cb-mk-space-gap-sm); display: grid; column-gap: var(--cb-mk-space-gap-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
/* Longer values, such as names and selects: two columns once there is room. */
.cb-mk-fields--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
/* Fields side by side share rows (Figma: Forms / Form section), so a label or hint that wraps in one keeps every input level.
   Each child spans six row tracks, enough for a label, its control, a hint, an error and two more; empty tracks take no height. */
:is(.cb-mk-fields, .cb-mk-form-section__fields) { row-gap: 0; margin-bottom: calc(var(--_cb-mk-fields-gap) * -1); }
:is(.cb-mk-fields, .cb-mk-form-section__fields) > * { grid-row: span 6; margin-bottom: var(--_cb-mk-fields-gap); }
:is(.cb-mk-fields, .cb-mk-form-section__fields) > .cb-mk-field { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; align-items: start; row-gap: var(--cb-mk-space-gap-xs); }
/* A group of checkboxes with its legend as a label, the options in one wrapping row. */
.cb-mk-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
.cb-mk-choices > legend { padding: 0; margin-bottom: var(--cb-mk-space-2); }
.cb-mk-choices__options { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-3) var(--cb-mk-space-5); }

.cb-mk-save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cb-mk-space-gap);
    padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-card);
    padding-bottom: calc(var(--cb-mk-space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--cb-mk-color-border-default);
    background: var(--cb-mk-color-bg-surface);
    box-shadow: var(--cb-mk-shadow-sheet);
}

.cb-mk-save-bar__status { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); font: var(--cb-mk-text-label-s); color: var(--cb-mk-color-text-secondary); }

/* ==========================================================================
   Feedback
   ========================================================================== */

.cb-mk-chip {
    --_cb-mk-chip-bg: var(--cb-mk-color-bg-sunken);
    --_cb-mk-chip-fg: var(--cb-mk-color-text-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--cb-mk-space-gap-xs);
    min-height: 1.625rem;
    padding: 0 var(--cb-mk-space-4);
    border-radius: var(--cb-mk-radius-full);
    background: var(--_cb-mk-chip-bg);
    color: var(--_cb-mk-chip-fg);
    font: var(--cb-mk-text-label-s);
    white-space: nowrap;
}

.cb-mk-chip,
.cb-mk-countdown,
.cb-mk-price { width: fit-content; max-width: 100%; }
.cb-mk-chip .cb-mk-icon { width: 0.875rem; height: 0.875rem; }
.cb-mk-chip--brand { --_cb-mk-chip-bg: var(--cb-mk-color-bg-brand); --_cb-mk-chip-fg: var(--cb-mk-color-text-on-brand); }
.cb-mk-chip--accent { --_cb-mk-chip-bg: var(--cb-mk-color-bg-accent); --_cb-mk-chip-fg: var(--cb-mk-color-text-on-accent); }
.cb-mk-chip--success { --_cb-mk-chip-bg: var(--cb-mk-color-bg-success-soft); --_cb-mk-chip-fg: var(--cb-mk-color-text-success); }
.cb-mk-chip--warning { --_cb-mk-chip-bg: var(--cb-mk-color-bg-attention-soft); --_cb-mk-chip-fg: var(--cb-mk-color-text-attention); }
.cb-mk-chip--danger { --_cb-mk-chip-bg: var(--cb-mk-color-bg-danger-soft); --_cb-mk-chip-fg: var(--cb-mk-color-text-danger); }
.cb-mk-chip--info { --_cb-mk-chip-bg: var(--cb-mk-color-bg-info-soft); --_cb-mk-chip-fg: var(--cb-mk-color-text-info); }
.cb-mk-chip--outline { --_cb-mk-chip-bg: transparent; box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-strong); }
.cb-mk-chip--on-media { --_cb-mk-chip-bg: var(--cb-mk-color-bg-inverse); --_cb-mk-chip-fg: var(--cb-mk-color-text-on-inverse); }

/* Alert (Figma: Feedback / Alert banner). Info, the default, is a brand callout: the surface with a hairline and the icon in
   a soft lime tile (no blue). Success, warning (needs attention, amber), danger (errors) and accent are tinted. */
.cb-mk-alert {
    --_cb-mk-alert-bg: var(--cb-mk-color-bg-surface);
    --_cb-mk-alert-fg: var(--cb-mk-color-text-brand);
    --_cb-mk-alert-line: var(--cb-mk-color-border-default);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--cb-mk-space-gap-sm) var(--cb-mk-space-gap);
    padding: var(--cb-mk-space-inset-field);
    border-radius: var(--cb-mk-radius-field);
    background: var(--_cb-mk-alert-bg);
    box-shadow: inset 0 0 0 1px var(--_cb-mk-alert-line);
    color: var(--cb-mk-color-text-primary);
}

.cb-mk-alert > .cb-mk-icon { color: var(--_cb-mk-alert-fg); margin-top: 0.125rem; }
.cb-mk-alert:not(.cb-mk-alert--success, .cb-mk-alert--warning, .cb-mk-alert--danger, .cb-mk-alert--accent) > .cb-mk-icon:first-child { box-sizing: content-box; margin: -0.25rem 0; padding: 0.375rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-alert__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-alert__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-alert__text { font: var(--cb-mk-text-body-s); color: var(--cb-mk-color-text-secondary); }
.cb-mk-alert__actions { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-gap-sm); margin-top: var(--cb-mk-space-2); }
.cb-mk-alert:is(.cb-mk-alert--success, .cb-mk-alert--warning, .cb-mk-alert--danger, .cb-mk-alert--accent) { --_cb-mk-alert-line: transparent; }
.cb-mk-alert--success { --_cb-mk-alert-bg: var(--cb-mk-color-bg-success-soft); --_cb-mk-alert-fg: var(--cb-mk-color-text-success); }
/* Warning means "needs attention": amber (bg/attention-soft). Danger is for errors. Info is a soft brand tint. */
.cb-mk-alert--warning { --_cb-mk-alert-bg: var(--cb-mk-color-bg-attention-soft); --_cb-mk-alert-fg: var(--cb-mk-color-text-attention); }
.cb-mk-alert--danger { --_cb-mk-alert-bg: var(--cb-mk-color-bg-danger-soft); --_cb-mk-alert-fg: var(--cb-mk-color-text-danger); }
.cb-mk-alert--accent { --_cb-mk-alert-bg: var(--cb-mk-color-bg-accent-soft); --_cb-mk-alert-fg: var(--cb-mk-color-text-accent); }

/* Checkout actions (Figma: Food / Checkout actions): Place order, then the checkout status as an Alert one gap below it
   (info while placing, warning when the order was not placed); citybites.funding.js fills it and it hides with no text. */
.cb-mk-checkout-actions { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); margin: 0; }
.cb-mk-checkout-actions > [data-checkout-message-box][hidden] { display: none; }
.cb-mk-checkout-actions__icon--info,
.cb-mk-alert--warning > .cb-mk-checkout-actions__icon--warning { display: inline-flex; margin-top: 0.125rem; color: var(--_cb-mk-alert-fg); }
.cb-mk-checkout-actions__icon--warning,
.cb-mk-alert--warning > .cb-mk-checkout-actions__icon--info { display: none; }

/* Toast (Figma: Feedback / Toast): a short confirmation, on a light surface so it reads as part of the page. The tinted icon
   tile carries the tone. */
.cb-mk-toast {
    display: flex;
    align-items: center;
    gap: var(--cb-mk-space-gap-sm);
    width: min(100%, 26rem);
    padding: var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-4);
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-field);
    background: var(--cb-mk-color-bg-raised);
    color: var(--cb-mk-color-text-primary);
    box-shadow: var(--cb-mk-shadow-overlay);
    font: var(--cb-mk-text-label-m);
}

.cb-mk-toast > span { flex: 1; min-width: 0; }
.cb-mk-toast__icon { display: grid; flex: none; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-success-soft); color: var(--cb-mk-color-text-success); }
.cb-mk-toast__icon .cb-mk-icon { width: 1rem; height: 1rem; }
.cb-mk-toast--error .cb-mk-toast__icon { background: var(--cb-mk-color-bg-danger-soft); color: var(--cb-mk-color-text-danger); }
.cb-mk-toast--info .cb-mk-toast__icon { background: var(--cb-mk-color-bg-info-soft); color: var(--cb-mk-color-text-info); }
.cb-mk-toast > .cb-mk-icon-button { flex: none; }
/* citybites.notices.js moves a toast into the notice region, which ignores the pointer; the toast takes it back. It sits at the
   top center so it never covers the cart or its buttons. The region scrolls a long stack, so its padding leaves room for the
   toast's shadow, which it would otherwise cut into a square around the rounded corners. */
[data-cb-ui="market"] .cb-notice-region { top: 0; bottom: auto; box-sizing: border-box; width: min(34rem, 100vw); padding: max(var(--cb-mk-space-4), env(safe-area-inset-top, 0px)) clamp(var(--cb-mk-space-5), calc((100vw - 28rem) / 2), var(--cb-mk-space-10)) var(--cb-mk-space-11); }
.cb-notice-region > .cb-mk-toast { width: 100%; pointer-events: auto; }

.cb-mk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cb-mk-space-gap-sm);
    padding: var(--cb-mk-space-10) var(--cb-mk-space-inset-card);
    text-align: center;
}

.cb-mk-empty__art { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-accent); }
.cb-mk-empty__art .cb-mk-icon { width: 2rem; height: 2rem; }
.cb-mk-empty p { max-width: 28rem; color: var(--cb-mk-color-text-secondary); }
.cb-mk-empty .cb-mk-cluster { justify-content: center; margin-top: var(--cb-mk-space-4); }
/* The restaurant list with no caterer to show: the Empty state in a card the width of the list. */
.cb-mk-browse-empty { border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-raised); }

/* Order start (Figma: Feedback / Order start): before an order starts, where the restaurant cards go. The city, route,
   pin and truck, the title and message, then the start form (Show caterers and its note) or the setup links. */
.cb-mk-order-start { display: flex; flex-direction: column; align-items: center; gap: var(--cb-mk-space-5); padding: var(--cb-mk-space-9) var(--cb-mk-space-8); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-raised); text-align: center; }
.cb-mk-order-start__art { width: min(100%, 35rem); height: auto; }
.cb-mk-order-start__skyline { fill: none; stroke: var(--cb-mk-color-border-strong); stroke-width: 2; stroke-linejoin: round; }
.cb-mk-order-start__route { fill: none; stroke: var(--cb-mk-color-text-brand); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 8; }
.cb-mk-order-start__brand { fill: var(--cb-mk-color-bg-brand); }
.cb-mk-order-start__window { fill: none; stroke: var(--cb-mk-color-text-on-brand); stroke-width: 2; }
.cb-mk-order-start__mark { fill: var(--cb-mk-color-bg-accent); }
.cb-mk-order-start__wheel { fill: var(--cb-mk-color-text-primary); }
.cb-mk-order-start__light { fill: var(--cb-mk-color-bg-raised); }
.cb-mk-order-start__copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); max-width: 30rem; }
.cb-mk-order-start__copy p { margin: 0; color: var(--cb-mk-color-text-secondary); }
.cb-mk-order-start__form { display: flex; flex-direction: column; align-items: center; gap: var(--cb-mk-space-4); margin: 0; }
.cb-mk-order-start__form > .cb-mk-caption { color: var(--cb-mk-color-text-secondary); }
.cb-mk-order-start__actions { justify-content: center; }
@media (max-width: 47.99rem) {
    .cb-mk-order-start { padding: var(--cb-mk-space-7) var(--cb-mk-space-5); }
    .cb-mk-order-start__form,
    .cb-mk-order-start__form > .cb-mk-button { width: 100%; }
}

.cb-mk-skeleton {
    display: block;
    height: 1rem;
    border-radius: var(--cb-mk-radius-sm);
    background: linear-gradient(90deg, var(--cb-mk-color-bg-sunken) 0%, var(--cb-mk-color-bg-surface) 50%, var(--cb-mk-color-bg-sunken) 100%);
    background-size: 200% 100%;
    animation: cb-mk-shimmer 1.4s linear infinite;
}

.cb-mk-skeleton--media { height: auto; aspect-ratio: 16 / 10; border-radius: var(--cb-mk-radius-media); }
.cb-mk-skeleton--title { height: 1.25rem; width: 60%; }
.cb-mk-skeleton--line { width: 90%; }
.cb-mk-skeleton--short { width: 40%; }

@keyframes cb-mk-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.cb-mk-spinner {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--cb-mk-radius-full);
    animation: cb-mk-spin 0.8s linear infinite;
}

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

.cb-mk-progress { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-xs); }
.cb-mk-progress__head { display: flex; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); font: var(--cb-mk-text-label-s); }
.cb-mk-progress__head span:last-child { color: var(--cb-mk-color-text-secondary); font-variant-numeric: tabular-nums; }
.cb-mk-progress__track { height: 0.5rem; overflow: hidden; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-progress__bar { display: block; height: 100%; width: var(--cb-mk-progress, 0%); border-radius: inherit; background: var(--cb-mk-color-bg-brand); transition: width var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
.cb-mk-progress--accent .cb-mk-progress__bar { background: var(--cb-mk-color-bg-accent); }
.cb-mk-progress--warning .cb-mk-progress__bar { background: var(--cb-mk-color-bg-warning); }

.cb-mk-countdown {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-mk-space-gap-xs);
    min-height: 1.75rem;
    padding: 0 var(--cb-mk-space-4);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-accent-soft);
    color: var(--cb-mk-color-text-accent);
    font: var(--cb-mk-text-label-s);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cb-mk-countdown .cb-mk-icon { width: 0.875rem; height: 0.875rem; }
.cb-mk-countdown--urgent { background: var(--cb-mk-color-bg-warning-soft); color: var(--cb-mk-color-text-warning); }
.cb-mk-countdown--closed { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); }

/* ==========================================================================
   Containers
   ========================================================================== */

/* Service selection / choice, Figma 346:2075 / 346:1922. */
.cb-mk-card.cb-mk-service-selection { gap: var(--cb-mk-space-4); }
.cb-mk-service-selection p { margin: 0; }
.cb-mk-service-selection__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-4); }
.cb-mk-service-selection__head > :first-child { min-width: 0; overflow-wrap: anywhere; }
.cb-mk-service-selection__head > :last-child { flex-shrink: 0; }
.cb-mk-service-selection__line { display: grid; gap: var(--cb-mk-space-2); border-top: 1px solid var(--cb-mk-color-border-default); padding-top: var(--cb-mk-space-4); }
.cb-mk-service-selection__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--cb-mk-space-3); }
.cb-mk-service-details > summary { display: flex; align-items: center; width: fit-content; min-height: var(--cb-mk-control-height); cursor: pointer; list-style: none; color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-label-m); }
.cb-mk-service-details > summary::-webkit-details-marker { display: none; }
.cb-mk-service-details > summary::after { content: "+"; margin-left: var(--cb-mk-space-3); }
.cb-mk-service-details[open] > summary::after { content: "−"; }
.cb-mk-service-details > div { padding-block: var(--cb-mk-space-2); }
.cb-mk-service-picker__choice { padding: 0 var(--cb-mk-space-inset-card) var(--cb-mk-space-6); }
.cb-mk-service-picker__options { display: flex; flex: 1 1 auto; min-height: 0; }
.cb-mk-service-picker__options > form { min-width: 0; }
.cb-mk-service-price { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }

.cb-mk-card {
    display: flex;
    flex-direction: column;
    gap: var(--cb-mk-space-gap);
    min-width: 0;
    padding: var(--cb-mk-space-inset-card);
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-card);
    background: var(--cb-mk-color-bg-surface);
}

.cb-mk-card--raised { border-color: transparent; background: var(--cb-mk-color-bg-raised); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-card--flush { padding: 0; overflow: hidden; }
.cb-mk-card--interactive { cursor: pointer; transition: border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), box-shadow var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-card--interactive:hover { border-color: var(--cb-mk-color-border-strong); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-card--selected,
.cb-mk-card[aria-selected="true"] { border-color: var(--cb-mk-color-border-brand); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-brand); }
.cb-mk-card--inverse { border-color: transparent; background: var(--cb-mk-color-bg-inverse); color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-card--inverse .cb-mk-overline,
.cb-mk-card--inverse .cb-mk-meta,
.cb-mk-card--inverse .cb-mk-card__head p { color: inherit; opacity: 0.8; }
.cb-mk-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-4) var(--cb-mk-space-gap); }
.cb-mk-card__head p { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
/* Card title with an icon tile, a toolbar and a search beside it (Figma: Data / Participants panel); the toolbar wraps under
   the title when the card is narrow. */
.cb-mk-card__title { display: flex; flex: 1 1 18rem; align-items: center; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-card__icon { display: grid; flex: none; place-items: center; width: 3rem; height: 3rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-brand); }
.cb-mk-card__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-3); }
.cb-mk-card__tools form { margin: 0; }
.cb-mk-card__search { flex: 0 1 18rem; min-width: 12rem; }
/* Saved text shown read only, such as delivery instructions or an order note (Figma: Food / Note panel, State=Read only). */
.cb-mk-note { margin: 0; padding: var(--cb-mk-space-5); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-body-m); white-space: pre-wrap; overflow-wrap: anywhere; }
.cb-mk-card__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--cb-mk-space-gap-sm); padding-top: var(--cb-mk-space-gap); border-top: 1px solid var(--cb-mk-color-border-default); }

/* Selectable card (radio or checkbox card) */
.cb-mk-option-card { position: relative; display: flex; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-inset-field); border: 1px solid var(--cb-mk-color-border-strong); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); cursor: pointer; }
.cb-mk-option-card:has(input:checked) { border-color: var(--cb-mk-color-border-brand); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-brand); background: var(--cb-mk-color-bg-surface); }
.cb-mk-option-card:has(input:focus-visible) { box-shadow: var(--cb-mk-focus-ring); }

/* Action choice: a link or button card that starts a task, its title and detail beside an arrow
   (Figma: Food / Change request dialog). A pressed choice is the one chosen. */
.cb-mk-action-choice { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); width: 100%; padding: var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-strong); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-m); text-align: start; text-decoration: none; cursor: pointer; }
.cb-mk-action-choice:hover { border-color: var(--cb-mk-color-border-brand); }
.cb-mk-action-choice:focus-visible { outline: none; box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-action-choice[aria-pressed="true"] { border-color: var(--cb-mk-color-border-brand); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-brand); background: var(--cb-mk-color-bg-surface); }
.cb-mk-action-choice:disabled { border-color: var(--cb-mk-color-border-default); background: var(--cb-mk-color-bg-disabled); color: var(--cb-mk-color-text-disabled); cursor: not-allowed; }
.cb-mk-action-choice > .cb-mk-icon { flex: none; color: var(--cb-mk-color-text-secondary); }
.cb-mk-action-choice__text { display: flex; flex: 1; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-action-choice__text small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-action-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--cb-mk-space-gap-sm); }

/* Dialog, drawer and bottom sheet use the native <dialog> element */
.cb-mk-dialog,
.cb-mk-drawer,
.cb-mk-sheet {
    padding: 0;
    border: 0;
    color: var(--cb-mk-color-text-primary);
    background: var(--cb-mk-color-bg-surface);
    box-shadow: var(--cb-mk-shadow-overlay);
}

/* The browser focuses an opened dialog itself when nothing inside asks for focus; the panel is not a control, so it shows
   no ring (its controls still do). */
.cb-mk-dialog:focus-visible,
.cb-mk-drawer:focus-visible,
.cb-mk-sheet:focus-visible { outline: none; box-shadow: var(--cb-mk-shadow-overlay); }

.cb-mk-dialog::backdrop,
.cb-mk-drawer::backdrop,
.cb-mk-sheet::backdrop { background: color-mix(in srgb, var(--cb-mk-color-bg-scrim) 48%, transparent); }

.cb-mk-dialog { width: min(calc(100% - 2rem), 34rem); max-height: min(calc(100% - 2rem), 44rem); border-radius: var(--cb-mk-radius-card); }
/* Confirm (Figma: Dialog, Body=Confirm): a short question with Cancel and the action; opened by CityBitesMarket.confirm(). */
.cb-mk-dialog--confirm { width: min(calc(100% - 2rem), 26rem); }
.cb-mk-drawer { inset: 0 0 0 auto; width: min(100%, 30rem); max-width: none; height: 100%; max-height: none; margin: 0; border-radius: var(--cb-mk-radius-card) 0 0 var(--cb-mk-radius-card); }
.cb-mk-sheet { inset: auto 0 0; width: 100%; max-width: 40rem; max-height: 92%; margin: auto auto 0; border-radius: var(--cb-mk-radius-xl) var(--cb-mk-radius-xl) 0 0; box-shadow: var(--cb-mk-shadow-sheet); }

.cb-mk-modal__panel { display: flex; flex-direction: column; max-height: inherit; height: 100%; }
/* A dialog or sheet only has a max-height, so a percentage on the panel resolves to nothing. Lay the open dialog out
   as a column so the panel shrinks to fit and only its body scrolls; the head and foot stay in view. */
.cb-mk-dialog[open]:not(.cb-mk-overlay-preview),
.cb-mk-drawer[open]:not(.cb-mk-overlay-preview),
.cb-mk-sheet[open]:not(.cb-mk-overlay-preview) { display: flex; flex-direction: column; overflow: hidden; }
/* Intrinsic height avoids WebKit resolving the panel's inherited 100% against an auto-height dialog as zero. */
:is(.cb-mk-dialog, .cb-mk-drawer, .cb-mk-sheet)[open] > .cb-mk-modal__panel { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; }
/* The page behind an open dialog, drawer or sheet stays put, so there is one scrollbar: the body's. */
html:has(dialog:modal, .cb-mk-overlay:not([hidden]), .cb-mk-item-modal:not([hidden])) { overflow: hidden; }
/* citybites.market.js measures the scrollbar the lock removes, so the page behind doesn't shift sideways. */
html:has(dialog:modal, .cb-mk-overlay:not([hidden]), .cb-mk-item-modal:not([hidden])) > body { padding-right: var(--cb-mk-scrollbar-width, 0px); }
.cb-mk-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-gap); padding: var(--cb-mk-space-inset-card) var(--cb-mk-space-inset-card) var(--cb-mk-space-4); }
.cb-mk-modal__head p { margin-top: var(--cb-mk-space-2); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
/* position: relative keeps visually hidden inputs (file, radio) inside the scroller, so they can't stretch the panel. */
.cb-mk-modal__body { position: relative; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cb-mk-color-border-strong) transparent; padding: 0 var(--cb-mk-space-inset-card) var(--cb-mk-space-inset-card); }
.cb-mk-modal__body--top { padding-top: var(--cb-mk-space-inset-card); }
.cb-mk-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-card); padding-bottom: calc(var(--cb-mk-space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cb-mk-color-border-default); }
/* A wide drawer for content with its own columns; [data-compact] opens it as a centered dialog instead. */
.cb-mk-drawer--wide { width: min(100%, 45rem); }
.cb-mk-drawer[data-compact] { inset: 0; width: min(calc(100% - 2rem), 32.5rem); height: fit-content; max-height: calc(100% - 2rem); margin: auto; border-radius: var(--cb-mk-radius-card); }
.cb-mk-drawer[data-compact] .cb-mk-modal__head p { display: none; }
.cb-mk-sheet__grabber { width: 2.5rem; height: 0.3125rem; margin: var(--cb-mk-space-3) auto 0; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-border-strong); }

/* Static previews of overlays for the gallery and docs */
.cb-mk-overlay-preview { position: relative; display: block; inset: auto; margin: 0; max-height: none; }

@media (max-width: 47.99rem) {
    .cb-mk-dialog:not(.cb-mk-overlay-preview) { inset: auto 0 0; width: 100%; max-width: none; max-height: 92%; margin: auto 0 0; border-radius: var(--cb-mk-radius-xl) var(--cb-mk-radius-xl) 0 0; }
    .cb-mk-drawer:not(.cb-mk-overlay-preview) { width: 100%; border-radius: 0; }
    .cb-mk-modal__foot .cb-mk-button { flex: 1; }
}

.cb-mk-tabs { display: flex; gap: var(--cb-mk-space-6); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--cb-mk-color-border-default); }

.cb-mk-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--cb-mk-space-gap-xs);
    min-height: var(--cb-mk-control-height);
    padding: 0 var(--cb-mk-space-1);
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--cb-mk-color-text-secondary);
    font: var(--cb-mk-text-label-m);
    text-decoration: none;
    cursor: pointer;
}

.cb-mk-tab:hover { color: var(--cb-mk-color-text-primary); }
/* A tab that cannot open (a channel a template does not use) stays visible, quieter, without hover. */
.cb-mk-tab:disabled,
.cb-mk-tab[aria-disabled="true"] { color: var(--cb-mk-color-text-disabled); cursor: not-allowed; }
.cb-mk-tab[aria-selected="true"],
.cb-mk-tab[aria-current="page"],
.cb-mk-tab[aria-current="location"] { color: var(--cb-mk-color-text-primary); border-bottom-color: var(--cb-mk-color-border-brand); }
.cb-mk-tab__count { min-width: 1.375rem; padding: 0 var(--cb-mk-space-2); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); font: var(--cb-mk-text-label-s); text-align: center; }

.cb-mk-tabs--pill { gap: var(--cb-mk-space-2); border-bottom: 0; }
.cb-mk-tabs--pill .cb-mk-tab { min-height: var(--cb-mk-control-height-sm); padding: 0 var(--cb-mk-space-inset-field); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-full); margin: 0; background: var(--cb-mk-color-bg-surface); }
.cb-mk-tabs--pill .cb-mk-tab[aria-selected="true"],
.cb-mk-tabs--pill .cb-mk-tab[aria-current="page"],
.cb-mk-tabs--pill .cb-mk-tab[aria-current="location"] { background: var(--cb-mk-color-bg-brand); border-color: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-tabs--pill .cb-mk-tab[aria-selected="true"] .cb-mk-tab__count,
.cb-mk-tabs--pill .cb-mk-tab[aria-current="page"] .cb-mk-tab__count,
.cb-mk-tabs--pill .cb-mk-tab[aria-current="location"] .cb-mk-tab__count { background: var(--cb-mk-color-bg-overlay-strong); }
/* Scroller (Figma: Containers / Tabs/Pill scroller; Food / Carousel header). A [data-cb-mk-scroller] holds a track that
   scrolls sideways (trackpad, wheel, swipe or its arrows, from _ScrollerButton) and nothing hides in a menu.
   citybites.market.js sets data-cb-mk-scroller-start / -end and enables an arrow only while there is more that way.
   --edges: the arrows sit over the ends of the track and the track fades under them (section pills).
   __controls: a group of inline arrows elsewhere in the scroller, shown only when the track overflows (card rows). */
.cb-mk-scroller { position: relative; min-width: 0; }
.cb-mk-scroller__track { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-behavior: smooth; }
.cb-mk-scroller__track::-webkit-scrollbar { display: none; }
.cb-mk-scroller__controls[hidden] { display: none; }
.cb-mk-scroller--edges .cb-mk-scroller__track {
    --_cb-mk-scroller-fade-start: 0rem;
    --_cb-mk-scroller-fade-end: 0rem;
    /* An alpha mask: only the transparency matters, so the stops are plain black. */
    -webkit-mask-image: linear-gradient(to right, transparent, black var(--_cb-mk-scroller-fade-start), black calc(100% - var(--_cb-mk-scroller-fade-end)), transparent);
    mask-image: linear-gradient(to right, transparent, black var(--_cb-mk-scroller-fade-start), black calc(100% - var(--_cb-mk-scroller-fade-end)), transparent);
}
.cb-mk-scroller--edges[data-cb-mk-scroller-start="false"] .cb-mk-scroller__track { --_cb-mk-scroller-fade-start: var(--cb-mk-space-10); }
.cb-mk-scroller--edges[data-cb-mk-scroller-end="false"] .cb-mk-scroller__track { --_cb-mk-scroller-fade-end: var(--cb-mk-space-10); }
.cb-mk-scroller__arrow { position: absolute; top: 50%; z-index: 1; translate: 0 -50%; border-color: transparent; background: var(--cb-mk-color-bg-raised); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-scroller__arrow--prev { left: 0; }
.cb-mk-scroller__arrow--next { right: 0; }
.cb-mk-scroller__arrow:disabled { display: none; }
/* Phones swipe: no arrows. */
@media (max-width: 47.99rem) {
    .cb-mk-scroller__arrow,
    .cb-mk-scroller__controls { display: none; }
}

.cb-mk-disclosure { border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-surface); }
.cb-mk-disclosure > summary { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-inset-field); list-style: none; cursor: pointer; font: var(--cb-mk-text-body-m-strong); }
.cb-mk-disclosure > summary::-webkit-details-marker { display: none; }
.cb-mk-disclosure > summary > span:not(.cb-mk-chip) { flex: 1; min-width: 0; }
.cb-mk-disclosure > summary small { display: block; font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-disclosure > summary > .cb-mk-icon:last-child { color: var(--cb-mk-color-text-secondary); transition: transform var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
.cb-mk-disclosure[open] > summary > .cb-mk-icon:last-child { transform: rotate(180deg); }
.cb-mk-disclosure__body { padding: 0 var(--cb-mk-space-inset-field) var(--cb-mk-space-inset-field); }
/* Quiet disclosure: secondary history and settings guidance, composed in Market services drawer. */
.cb-mk-disclosure--quiet { border: 0; border-radius: 0; background: transparent; }
.cb-mk-disclosure--quiet > summary { padding: var(--cb-mk-space-2) 0; color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-label-s); }
.cb-mk-disclosure--quiet > .cb-mk-disclosure__body { padding: var(--cb-mk-space-3) 0; }

/* Participants (Figma: Data / Participant source, Participant group, Participant list, Participant row). A source is a
   collapsible section of how people were invited; a row is the person (the email under the name), the status chip, the
   last activity and one action. The list is a grid whose status, activity and last columns size to their content and line up
   across rows (each row is a subgrid); the person takes the rest, so long names and emails truncate instead of running into
   the next column. Below 48rem the status, activity and action wrap under the person. */
.cb-mk-participants { display: flex; flex-direction: column; gap: var(--cb-mk-space-6); }
.cb-mk-participants__sources { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); }
.cb-mk-participant-source { border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-raised); }
.cb-mk-participant-source__summary { display: flex; align-items: center; gap: var(--cb-mk-space-4); padding: var(--cb-mk-space-5) var(--cb-mk-space-6); list-style: none; cursor: pointer; }
.cb-mk-participant-source__summary::-webkit-details-marker { display: none; }
.cb-mk-participant-source__icon { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-brand); }
.cb-mk-participant-source__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cb-mk-participant-source__text strong { font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); }
.cb-mk-participant-source__text small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-participant-source__actions { display: flex; flex: none; align-items: center; gap: var(--cb-mk-space-4); }
.cb-mk-participant-source__chevron { display: grid; color: var(--cb-mk-color-text-secondary); transition: transform var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
.cb-mk-participant-source[open] .cb-mk-participant-source__chevron { transform: rotate(180deg); }
.cb-mk-participant-source__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-6); padding: 0 var(--cb-mk-space-6) var(--cb-mk-space-6); }
.cb-mk-participant-source__empty { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-participant-group { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-participant-group__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-4); }
.cb-mk-participant-group__text { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-participant-group__text strong { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-participant-list { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: var(--cb-mk-space-5); overflow: hidden; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); }
.cb-mk-participant-list__head,
.cb-mk-participant-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: var(--cb-mk-space-4) var(--cb-mk-space-5); }
.cb-mk-participant-list__head { padding-block: var(--cb-mk-space-3); border-bottom: 1px solid var(--cb-mk-color-border-default); background: var(--cb-mk-color-bg-surface); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-overline); letter-spacing: var(--cb-mk-tracking-overline); text-transform: uppercase; }
.cb-mk-participant-list__head > :last-child,
.cb-mk-participant-row__action { justify-self: end; text-align: right; }
.cb-mk-participant-row + .cb-mk-participant-row { border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-participant-row__person { display: flex; align-items: center; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-participant-row__avatar { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-m); }
.cb-mk-participant-row__who { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-participant-row__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-participant-row__who strong { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-participant-row__email,
.cb-mk-participant-row__profile { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-participant-row__activity { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-mk-participant-row__action form { margin: 0; }
.cb-mk-participant-row[hidden] { display: none; }
.cb-mk-participant-list__empty { grid-column: 1 / -1; margin: 0; padding: var(--cb-mk-space-4) var(--cb-mk-space-5); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
@media (max-width: 47.99rem) {
    .cb-mk-participant-source__summary { flex-wrap: wrap; padding: var(--cb-mk-space-4); }
    .cb-mk-participant-source__actions { flex-wrap: wrap; width: 100%; padding-left: calc(2.5rem + var(--cb-mk-space-4)); }
    .cb-mk-participant-source__chevron { margin-left: auto; }
    .cb-mk-participant-source__body { padding: 0 var(--cb-mk-space-4) var(--cb-mk-space-4); }
    .cb-mk-participant-list { display: block; }
    .cb-mk-participant-list__head { display: none; }
    /* The person, then the status, the last activity and the action each on a line under the name. */
    .cb-mk-participant-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-2) 0; }
    .cb-mk-participant-row__person { flex: 1 0 100%; }
    .cb-mk-participant-row__status { margin-left: calc(2.5rem + var(--cb-mk-space-4)); }
    .cb-mk-participant-row__activity,
    .cb-mk-participant-row__action { flex: 1 0 100%; padding-left: calc(2.5rem + var(--cb-mk-space-4)); text-align: left; }
}

.cb-mk-menu { display: flex; flex-direction: column; min-width: 14rem; padding: var(--cb-mk-space-2); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); box-shadow: var(--cb-mk-shadow-overlay); }
.cb-mk-menu__search { margin-bottom: var(--cb-mk-space-2); }
.cb-mk-menu__item { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-height: var(--cb-mk-control-height-sm); padding: 0 var(--cb-mk-space-4); border: 0; border-radius: var(--cb-mk-radius-sm); background: none; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-body-m); text-align: left; text-decoration: none; cursor: pointer; }
.cb-mk-menu__item > span { flex: 1; min-width: 0; }
.cb-mk-menu__item small { display: block; font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-menu__item:hover,
.cb-mk-menu__item[data-active="true"] { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-menu__item[aria-selected="true"] > .cb-mk-icon:last-child { color: var(--cb-mk-color-text-brand); }
.cb-mk-menu__item--danger { color: var(--cb-mk-color-text-danger); }
.cb-mk-menu__label { padding: var(--cb-mk-space-3) var(--cb-mk-space-4) var(--cb-mk-space-2); font: var(--cb-mk-text-overline); letter-spacing: var(--cb-mk-tracking-overline); text-transform: uppercase; color: var(--cb-mk-color-text-secondary); }
.cb-mk-menu__divider { height: 1px; margin: var(--cb-mk-space-2) 0; background: var(--cb-mk-color-border-default); }

/* ==========================================================================
   Data
   ========================================================================== */

.cb-mk-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); }
.cb-mk-table { width: 100%; border-collapse: collapse; font: var(--cb-mk-text-body-s); font-variant-numeric: tabular-nums; }
.cb-mk-table th { padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-field); border-bottom: 1px solid var(--cb-mk-color-border-default); background: var(--cb-mk-color-bg-surface); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); text-align: left; white-space: nowrap; }
.cb-mk-table th button { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cb-mk-table th[aria-sort] { color: var(--cb-mk-color-text-primary); }
.cb-mk-table td { padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-field); border-bottom: 1px solid var(--cb-mk-color-border-default); vertical-align: middle; }
.cb-mk-table tr:last-child td { border-bottom: 0; }
.cb-mk-table tbody tr:hover td { background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-table tbody tr[aria-selected="true"] td { background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-table__primary { font: var(--cb-mk-text-body-m-strong); color: var(--cb-mk-color-text-primary); }
.cb-mk-table__secondary { display: block; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-table__num { text-align: right; }
.cb-mk-table__nowrap { white-space: nowrap; }
.cb-mk-table--compact td,
.cb-mk-table--compact th { padding-block: var(--cb-mk-space-3); }
/* A compact table with many columns also closes up sideways, so it fits a laptop without scrolling. */
.cb-mk-table-wrap[data-cb-mk-density="compact"] .cb-mk-table :is(td, th) { padding-inline: var(--cb-mk-space-4); }

/* Table row on phones (Figma: Data / Table row/Phone): seven columns can't fit a phone and sideways scrolling hides what matters,
   so rows read like an orders or mail list, all on one surface split by hairlines. The first cell leads, with a Total or
   Amount on its right; [data-phone="meta"] cells follow as caption lines; other cells read label then value; chips flow on
   one line; the action (data-label="") sits at the end. A link in the lead (.cb-mk-table__primary) makes the whole row tappable. */
@media (max-width: 47.99rem) {
    .cb-mk-table-wrap--stack { overflow: hidden; }
    .cb-mk-table-wrap--stack .cb-mk-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cb-mk-table-wrap--stack .cb-mk-table,
    .cb-mk-table-wrap--stack .cb-mk-table tbody { display: block; width: 100%; }
    .cb-mk-table-wrap--stack .cb-mk-table tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-2) var(--cb-mk-space-3); padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-field); border-bottom: 1px solid var(--cb-mk-color-border-default); }
    .cb-mk-table-wrap--stack .cb-mk-table tr:last-child { border-bottom: 0; }
    .cb-mk-table-wrap--stack .cb-mk-table td { display: grid; flex: 1 1 100%; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; column-gap: var(--cb-mk-space-3); order: 2; min-width: 0; padding: 0; border: 0; text-align: left; }
    .cb-mk-table-wrap--stack .cb-mk-table td::before { content: attr(data-label); grid-row: 1 / span 4; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
    .cb-mk-table-wrap--stack .cb-mk-table td > * { grid-column: 2; }
    .cb-mk-table-wrap--stack .cb-mk-table td:not(:first-child) .cb-mk-table__primary { font: var(--cb-mk-text-body-s); }
    .cb-mk-table-wrap--stack .cb-mk-table td:empty { display: none; }
    .cb-mk-table-wrap--stack .cb-mk-table td:is([data-label=""], :first-child, [data-phone="meta"], :has(> .cb-mk-chip))::before { content: none; }
    .cb-mk-table-wrap--stack .cb-mk-table td:is([data-label=""], :first-child, [data-phone="meta"], :has(> .cb-mk-chip)) { display: block; }
    .cb-mk-table-wrap--stack .cb-mk-table td:first-child { flex: 1 1 0; order: 0; min-width: 55%; }
    /* A row that starts with a checkbox: it sits beside the lead, which is the next cell. */
    .cb-mk-table-wrap--stack .cb-mk-table td:first-child:has(> .cb-mk-check) { flex: none; min-width: 0; }
    .cb-mk-table-wrap--stack .cb-mk-table td:first-child:is(:empty, :has(> .cb-mk-check)) + td { display: block; flex: 1 1 0; order: 0; min-width: 55%; }
    .cb-mk-table-wrap--stack .cb-mk-table td:first-child:is(:empty, :has(> .cb-mk-check)) + td::before { content: none; }
    .cb-mk-table-wrap--stack .cb-mk-table td:first-child:is(:empty, :has(> .cb-mk-check)) + td .cb-mk-table__primary { font: var(--cb-mk-text-body-m-strong); }
    .cb-mk-table-wrap--stack .cb-mk-table td:is([data-label="Total" i], [data-label="Amount" i]) { display: block; flex: none; order: 1; align-self: flex-start; margin-left: auto; text-align: right; }
    .cb-mk-table-wrap--stack .cb-mk-table td:is([data-label="Total" i], [data-label="Amount" i])::before { content: none; }
    .cb-mk-table-wrap--stack .cb-mk-table td[data-phone="meta"] { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
    .cb-mk-table-wrap--stack .cb-mk-table td[data-phone="meta"] .cb-mk-table__secondary { display: inline; }
    .cb-mk-table-wrap--stack .cb-mk-table td[data-phone="meta"] .cb-mk-table__secondary::before { content: " · "; }
    .cb-mk-table-wrap--stack .cb-mk-table td:has(> .cb-mk-chip) { flex: none; order: 3; }
    .cb-mk-table-wrap--stack .cb-mk-table td[data-label=""]:not(:first-child) { flex: none; order: 4; margin-left: auto; }
    .cb-mk-table-wrap--stack .cb-mk-table a.cb-mk-table__primary::after { content: ""; position: absolute; inset: 0; }
    .cb-mk-table-wrap--stack .cb-mk-table tr:has(a.cb-mk-table__primary) :is(a:not(.cb-mk-table__primary), button, input, select, label) { position: relative; z-index: 1; }
    .cb-mk-table-wrap--stack .cb-mk-table tbody tr:hover td { background: none; }
}

.cb-mk-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); overflow: hidden; }
/* A list inside a card drops its own frame, so there is no box in a box; its rows keep their lines and sit on the card's edge. */
.cb-mk-card > .cb-mk-list { border: 0; border-radius: 0; background: none; }
.cb-mk-card:not(.cb-mk-card--flush) > .cb-mk-list > .cb-mk-list-row { padding-inline: 0; }

.cb-mk-list-row {
    display: flex;
    align-items: center;
    gap: var(--cb-mk-space-gap);
    min-height: var(--cb-mk-control-height-lg);
    padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-field);
    border-bottom: 1px solid var(--cb-mk-color-border-default);
    color: inherit;
    text-decoration: none;
}

.cb-mk-list-row:last-child { border-bottom: 0; }
a.cb-mk-list-row:hover,
button.cb-mk-list-row:hover { background: var(--cb-mk-color-bg-accent-soft); }
button.cb-mk-list-row { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; text-align: left; cursor: pointer; }
.cb-mk-list-row__lead { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--cb-mk-radius-md); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-brand); }
.cb-mk-list-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-list-row__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-list-row__meta { font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
/* A row whose trail holds a button, a status chip or an amount moves the trail under the text, on the right, instead of
   squeezing the text into a column: with a button or a chip once the text would get narrower than 12rem, with an amount
   below 8rem (phones, narrow columns). Figma: List row. */
.cb-mk-list-row:has(> .cb-mk-list-row__trail :is(.cb-mk-button, .cb-mk-chip, strong)) { flex-wrap: wrap; }
.cb-mk-list-row:has(> .cb-mk-list-row__trail strong) > .cb-mk-list-row__body { flex-basis: 8rem; }
.cb-mk-list-row:has(> .cb-mk-list-row__trail :is(.cb-mk-button, .cb-mk-chip)) > .cb-mk-list-row__body { flex-basis: 12rem; }
.cb-mk-list-row:has(> .cb-mk-list-row__trail :is(.cb-mk-button, .cb-mk-chip, strong)) > .cb-mk-list-row__trail { margin-left: auto; }
.cb-mk-list-row__trail { flex: none; display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); color: var(--cb-mk-color-text-secondary); }

.cb-mk-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-mk-space-gap-xs);
    min-height: var(--cb-mk-control-height-sm);
    padding: 0 var(--cb-mk-space-inset-field);
    border: 1px solid var(--cb-mk-color-border-strong);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-surface);
    color: var(--cb-mk-color-text-primary);
    font: var(--cb-mk-text-label-s);
    white-space: nowrap;
    cursor: pointer;
}

.cb-mk-filter-chip:hover { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-filter-chip[aria-pressed="true"] { background: var(--cb-mk-color-bg-brand); border-color: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-filter-chip__count { padding: 0 var(--cb-mk-space-2); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-filter-chip[aria-pressed="true"] .cb-mk-filter-chip__count { background: var(--cb-mk-color-bg-overlay-strong); color: inherit; }

/* List toolbar (Figma: Data / List toolbar): status tabs on top, then one row of filters. The search grows; the selects
   and the submit button in __controls keep the search field's height and sit on its line. Phones stack them. */
.cb-mk-list-toolbar { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); }
.cb-mk-list-toolbar__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-list-toolbar__top > .cb-mk-tabs { min-width: 0; max-width: 100%; }
.cb-mk-list-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-list-toolbar__search { flex: 1 1 22rem; min-width: 0; max-width: 40rem; }
.cb-mk-list-toolbar__period { flex: 0 1 12rem; }
.cb-mk-list-toolbar__controls { display: flex; flex: 0 1 auto; align-items: center; gap: var(--cb-mk-space-gap-sm); min-width: 0; }
.cb-mk-list-toolbar__controls > .cb-mk-field { flex: 0 1 12rem; min-width: 0; }
.cb-mk-list-toolbar__controls :is(.cb-mk-select, .cb-mk-button) { min-height: var(--cb-mk-control-height); }
@media (max-width: 47.99rem) {
    .cb-mk-list-toolbar__filters { flex-direction: column; align-items: stretch; }
    .cb-mk-list-toolbar__search { flex: none; max-width: none; }
    .cb-mk-list-toolbar__controls > .cb-mk-field { flex: 1 1 auto; }
}

.cb-mk-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-filter-bar__search { flex: 1 1 16rem; min-width: 0; }
.cb-mk-filter-bar__chips { display: flex; gap: var(--cb-mk-space-gap-sm); overflow-x: auto; scrollbar-width: none; min-width: 0; }

@media (max-width: 47.99rem) {
    .cb-mk-filter-bar { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
    .cb-mk-filter-bar__chips { margin-inline: calc(var(--cb-mk-space-5) * -1); padding-inline: var(--cb-mk-space-5); }
}

/* Filter chip states: data-state="active" when the menu behind it has selections, aria-current on a link that is on,
   aria-expanded while its popover is open. */
a.cb-mk-filter-chip { text-decoration: none; }
.cb-mk-filter-chip .cb-mk-icon { width: 1rem; height: 1rem; }
.cb-mk-filter-chip[data-state="active"],
.cb-mk-filter-chip[aria-current="true"] { background: var(--cb-mk-color-bg-accent); border-color: var(--cb-mk-color-border-brand); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-filter-chip[aria-expanded="true"] > .cb-mk-icon:last-child { transform: rotate(180deg); }
/* A chip that toggles a checkbox: a label around a visually hidden input. Checked, it looks active and shows its check. */
label.cb-mk-filter-chip { position: relative; }
label.cb-mk-filter-chip > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.cb-mk-filter-chip:has(> input:checked) { background: var(--cb-mk-color-bg-accent); border-color: var(--cb-mk-color-border-brand); color: var(--cb-mk-color-text-on-accent); }
label.cb-mk-filter-chip:has(> input:focus-visible) { box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-filter-chip__check { display: none; }
label.cb-mk-filter-chip:has(> input:checked) > .cb-mk-filter-chip__check { display: inline-flex; }

/* Search with suggestions (combobox). citybites.market.js fills [data-cb-mk-combobox-list] from the JSON beside it.
   The field shows focus with its border, like other text fields. */
.cb-mk-search { position: relative; min-width: 0; }

.cb-mk-search__field {
    display: flex;
    align-items: center;
    gap: var(--cb-mk-space-gap-sm);
    min-height: var(--cb-mk-control-height);
    padding: 0 var(--cb-mk-space-inset-field);
    border: 1px solid var(--cb-mk-color-border-control);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-surface);
    color: var(--cb-mk-color-text-secondary);
    cursor: text;
}

.cb-mk-search__field:hover { border-color: var(--cb-mk-color-border-focus); }
.cb-mk-search__field:focus-within { border-color: var(--cb-mk-color-border-focus); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-focus); }
.cb-mk-search__field input { flex: 1; min-width: 0; align-self: stretch; padding: 0; border: 0; background: transparent; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-body-m); outline: none; }
.cb-mk-search__field input::placeholder { color: var(--cb-mk-color-text-secondary); opacity: 1; }

.cb-mk-search__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--cb-mk-space-2));
    left: 0;
    right: 0;
    max-height: min(26rem, 70vh);
    overflow-y: auto;
    padding: var(--cb-mk-space-2);
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-card);
    background: var(--cb-mk-color-bg-raised);
    box-shadow: var(--cb-mk-shadow-overlay);
}

.cb-mk-search__panel[hidden] { display: none; }
.cb-mk-search__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cb-mk-search__group { padding: var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-1); font: var(--cb-mk-text-overline); letter-spacing: var(--cb-mk-tracking-overline); text-transform: uppercase; color: var(--cb-mk-color-text-secondary); }
.cb-mk-search__option { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-height: 2.75rem; padding: var(--cb-mk-space-2) var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-sm); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-body-m); cursor: pointer; }
.cb-mk-search__option:hover,
.cb-mk-search__option[aria-selected="true"] { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-search__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-search__option-label mark { background: none; color: inherit; font: var(--cb-mk-text-body-m-strong); }
.cb-mk-search__option-detail { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-search__empty { padding: var(--cb-mk-space-3); font: var(--cb-mk-text-body-s); color: var(--cb-mk-color-text-secondary); }

/* Popover: a panel under its trigger. [data-cb-mk-popover] holds a [data-cb-mk-popover-trigger] button and a
   [data-cb-mk-popover-panel]; citybites.market.js opens it, closes it on Escape or a click elsewhere. */
.cb-mk-popover-anchor { position: relative; }

.cb-mk-popover {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--cb-mk-space-2));
    left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cb-mk-space-gap-sm);
    width: max-content;
    min-width: 17rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: var(--cb-mk-space-4);
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-card);
    background: var(--cb-mk-color-bg-raised);
    box-shadow: var(--cb-mk-shadow-overlay);
}

.cb-mk-popover[hidden] { display: none; }
.cb-mk-popover--end { left: auto; right: 0; }
.cb-mk-popover--menu { gap: 0; min-width: 12rem; padding: var(--cb-mk-space-2); }
.cb-mk-popover__actions { display: flex; justify-content: flex-end; gap: var(--cb-mk-space-gap-sm); padding-top: var(--cb-mk-space-3); border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-menu__item[aria-current="true"] { font-weight: 600; }
.cb-mk-menu__item .cb-mk-icon { color: var(--cb-mk-color-text-brand); }

/* Applied filters: removable chips, followed by a Clear all link. */
.cb-mk-applied { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-gap-xs); margin: 0; padding: 0; list-style: none; }
.cb-mk-applied__chip { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); min-height: 2rem; padding: 0 var(--cb-mk-space-2) 0 var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-s); text-decoration: none; }
.cb-mk-applied__chip:hover { background: var(--cb-mk-color-bg-accent); }
.cb-mk-applied__chip .cb-mk-icon { width: 0.875rem; height: 0.875rem; }

.cb-mk-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap); font: var(--cb-mk-text-label-s); color: var(--cb-mk-color-text-secondary); }
.cb-mk-pagination__pages { display: flex; gap: var(--cb-mk-space-2); }
.cb-mk-pagination__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cb-mk-space-gap-sm); margin: 0; }
.cb-mk-pagination__summary strong { color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-s); }
.cb-mk-page-button { display: grid; place-items: center; min-width: var(--cb-mk-control-height-sm); height: var(--cb-mk-control-height-sm); padding: 0 var(--cb-mk-space-3); border: 1px solid transparent; border-radius: var(--cb-mk-radius-full); background: none; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-s); text-decoration: none; cursor: pointer; }
.cb-mk-page-button:hover { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-page-button[aria-current="page"] { background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-page-button:disabled { color: var(--cb-mk-color-text-disabled); cursor: not-allowed; background: none; }

/* Stat group (Figma: Data / Stat group, Stat): one surface split by hairlines instead of a box per number. Each stat is a
   label in sentence case, the value in proportional figures, then a delta chip against a named period, a meter for a
   share of a whole, or a caption. Two per row in narrow containers, one row once there is room for every stat. */
.cb-mk-stats { container-type: inline-size; margin: 0; }
.cb-mk-stats__grid { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: start; column-gap: var(--cb-mk-space-9); margin: 0; }
.cb-mk-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; align-content: start; gap: var(--cb-mk-space-2) var(--cb-mk-space-3); min-width: 0; }
.cb-mk-stat__label { grid-column: 1 / -1; margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); }
.cb-mk-stat__value { margin: 0; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-number-l); letter-spacing: var(--cb-mk-tracking-number-l); white-space: nowrap; }
.cb-mk-stat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-2) var(--cb-mk-space-3); margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
/* Phones and narrow columns: one or two lines of value then label, split by hairlines; the caption and meter drop out. */
@container (max-width: 39.99rem) {
    .cb-mk-stats__grid { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-2) var(--cb-mk-space-7); overflow: hidden; }
    .cb-mk-stat { position: relative; display: flex; flex-direction: row-reverse; gap: var(--cb-mk-space-3); }
    .cb-mk-stat::before { content: ""; position: absolute; top: 0.125rem; bottom: 0.125rem; left: calc(var(--cb-mk-space-7) / -2); border-left: 1px solid var(--cb-mk-color-border-default); }
    .cb-mk-stat__label { font: var(--cb-mk-text-body-s); }
    .cb-mk-stat__value { font: var(--cb-mk-text-label-m); letter-spacing: normal; font-variant-numeric: tabular-nums; }
    .cb-mk-stat__foot, .cb-mk-stat__meter { display: none; }
}
.cb-mk-stat__meter { grid-column: 1 / -1; width: 6rem; height: 0.25rem; margin: 0; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); overflow: hidden; }
.cb-mk-stat__meter > span { display: block; width: var(--cb-mk-progress, 0%); height: 100%; border-radius: inherit; background: var(--cb-mk-color-bg-brand); }

/* Fact list (Figma: Data / Fact list): summary facts without boxes. Each fact is an icon and label in the secondary color with
   the value under the label; one row that wraps (Layout=Row), two columns on phones (Layout=Grid). */
.cb-mk-facts { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-5) var(--cb-mk-space-9); margin: 0; }
.cb-mk-facts__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-mk-facts__item > dt { display: flex; align-items: center; gap: 0.375rem; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-facts__item > dt .cb-mk-icon { flex: none; }
.cb-mk-facts__item > dd { margin: 0; padding-left: 1.375rem; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-body-m-strong); overflow-wrap: anywhere; }
@media (max-width: 47.99rem) {
    .cb-mk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-mk-space-5); }
}
/* Layout=Rows (Figma: Fact list, Layout=Rows): for a narrow side card. The label (with its icon) on the left, the value on
   the right, a hairline between rows; a value with a second line (a small) keeps it under the value. */
.cb-mk-facts.cb-mk-facts--rows { display: flex; flex-direction: column; gap: 0; }
.cb-mk-facts--rows > .cb-mk-facts__item { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); padding-block: var(--cb-mk-space-4); border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-facts--rows > .cb-mk-facts__item:first-child { padding-top: 0; border-top: 0; }
.cb-mk-facts--rows > .cb-mk-facts__item:last-child { padding-bottom: 0; }
.cb-mk-facts--rows > .cb-mk-facts__item > dt { flex: none; font: var(--cb-mk-text-body-s); }
.cb-mk-facts--rows > .cb-mk-facts__item > dd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; padding-left: 0; text-align: right; font: var(--cb-mk-text-label-m); }
.cb-mk-facts--rows > .cb-mk-facts__item > dd small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }

/* Inline facts (Figma: Data / Inline facts): a few value and label pairs on one line with hairlines between them, beside
   tabs or a title. The value leads, the label follows in the secondary color. Wraps on narrow screens: each hairline
   sits in the gap before its pair, so the one before the first pair of a line falls outside the list and is clipped. */
.cb-mk-inline-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-3) var(--cb-mk-space-9); margin: 0; overflow: hidden; }
.cb-mk-inline-facts__item { position: relative; display: flex; flex-direction: row-reverse; align-items: baseline; gap: var(--cb-mk-space-3); }
.cb-mk-inline-facts__item::before { content: ""; position: absolute; top: 0.125rem; bottom: 0.125rem; left: calc(var(--cb-mk-space-9) / -2); border-left: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-inline-facts__item > dt { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
.cb-mk-inline-facts__item > dd { margin: 0; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-m); font-variant-numeric: tabular-nums; }

.cb-mk-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cb-mk-timeline__step { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--cb-mk-space-gap); padding-bottom: var(--cb-mk-space-gap-lg); }
.cb-mk-timeline__step::before { content: ""; position: absolute; left: 0.6875rem; top: 1.5rem; bottom: 0; width: 2px; background: var(--cb-mk-color-border-default); }
.cb-mk-timeline__step:last-child { padding-bottom: 0; }
.cb-mk-timeline__step:last-child::before { content: none; }
.cb-mk-timeline__marker { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--cb-mk-color-border-strong); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-surface); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-timeline__marker .cb-mk-icon { width: 0.75rem; height: 0.75rem; stroke-width: 3; }
.cb-mk-timeline__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-timeline__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-timeline__meta { font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-timeline__step[data-state="done"] .cb-mk-timeline__marker { background: var(--cb-mk-color-bg-brand); border-color: var(--cb-mk-color-bg-brand); }
.cb-mk-timeline__step[data-state="done"]::before { background: var(--cb-mk-color-bg-brand); }
.cb-mk-timeline__step[data-state="current"] .cb-mk-timeline__marker { border-color: var(--cb-mk-color-bg-brand); box-shadow: 0 0 0 4px var(--cb-mk-color-bg-accent-soft); }
.cb-mk-timeline__step[data-state="current"] .cb-mk-timeline__marker::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-brand); }
.cb-mk-timeline__step[data-state="upcoming"] .cb-mk-timeline__title { color: var(--cb-mk-color-text-secondary); }

@media (min-width: 48rem) {
    .cb-mk-timeline--row { flex-direction: row; }
    .cb-mk-timeline--row .cb-mk-timeline__step { flex: 1 1 0; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1.5rem auto; gap: var(--cb-mk-space-3); padding: 0; }
    .cb-mk-timeline--row .cb-mk-timeline__step::before { top: 0.6875rem; bottom: auto; left: 1.75rem; right: 0.25rem; width: auto; height: 2px; }
    .cb-mk-timeline--row .cb-mk-timeline__body { padding-right: var(--cb-mk-space-3); }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.cb-mk-avatar { flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; overflow: hidden; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); font: var(--cb-mk-text-label-s); text-transform: uppercase; }
.cb-mk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cb-mk-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
.cb-mk-avatar--lg { width: 3rem; height: 3rem; font: var(--cb-mk-text-label-m); }
.cb-mk-avatar--brand { background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-avatar--muted { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); }
.cb-mk-avatar-group { display: inline-flex; align-items: center; }
.cb-mk-avatar-group > .cb-mk-avatar { box-shadow: 0 0 0 2px var(--cb-mk-color-bg-surface); }
.cb-mk-avatar-group > .cb-mk-avatar + .cb-mk-avatar { margin-left: -0.5rem; }

.cb-mk-app { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.cb-mk-app__main { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-app__content { flex: 1; width: 100%; max-width: 80rem; margin: 0 auto; padding: var(--cb-mk-space-section) var(--cb-mk-space-8); }
/* Ordering pages (restaurant list, menu and cart): a wider frame, so menu cards grow on large screens. */
.cb-mk-app__content--wide { max-width: 90rem; }

.cb-mk-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); height: 100vh; height: 100dvh; padding: var(--cb-mk-space-5); overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; background: var(--cb-mk-color-bg-inverse); color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-sidebar:hover { scrollbar-color: color-mix(in srgb, var(--cb-mk-color-text-on-inverse) 32%, transparent) transparent; }
.cb-mk-sidebar__brand { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); padding: 0 var(--cb-mk-space-3) var(--cb-mk-space-5); color: inherit; font: var(--cb-mk-text-heading-4); text-decoration: none; }
.cb-mk-sidebar__section { padding: var(--cb-mk-space-5) var(--cb-mk-space-4) var(--cb-mk-space-2); font: var(--cb-mk-text-overline); letter-spacing: var(--cb-mk-tracking-overline); text-transform: uppercase; opacity: 0.64; }
/* Navigation in groups (Figma: Sidebar, Sidebar section): 4px between items, 12px between groups; a group's heading is its
   first child. The foot names the signed-in person with their role under the name. */
.cb-mk-sidebar__nav { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); }
.cb-mk-sidebar__group { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-sidebar__group > .cb-mk-sidebar__section { padding-top: var(--cb-mk-space-3); padding-bottom: var(--cb-mk-space-1); }
.cb-mk-sidebar__role { display: block; font: var(--cb-mk-text-caption); opacity: 0.72; }
.cb-mk-sidebar__foot { margin-top: auto; }
.cb-mk-nav-item--static:hover { background: none; }

.cb-mk-nav-item { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-height: var(--cb-mk-size-36); padding: 0 var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-full); color: inherit; font: var(--cb-mk-text-label-m); text-decoration: none; }
.cb-mk-nav-item > span:not([class]) { flex: 1; min-width: 0; }
.cb-mk-nav-item:hover { background: var(--cb-mk-color-bg-overlay-hover); }
.cb-mk-nav-item[aria-current="page"] { background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-nav-item__badge { min-width: 1.375rem; padding: 0 var(--cb-mk-space-2); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-warning); color: var(--cb-mk-color-text-on-brand); font: var(--cb-mk-text-label-s); text-align: center; }

.cb-mk-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--cb-mk-space-gap); min-height: 4.5rem; padding: var(--cb-mk-space-4) var(--cb-mk-space-8); border-bottom: 1px solid var(--cb-mk-color-border-default); background: color-mix(in srgb, var(--cb-mk-color-bg-page) 92%, transparent); backdrop-filter: blur(12px); }
.cb-mk-topbar__search { flex: 1; max-width: 28rem; }
.cb-mk-topbar__actions { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); margin-left: auto; }

.cb-mk-appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-height: 3.5rem; padding: var(--cb-mk-space-3) var(--cb-mk-space-5); padding-top: calc(var(--cb-mk-space-3) + env(safe-area-inset-top, 0px)); background: var(--cb-mk-color-bg-page); }
.cb-mk-appbar__title { flex: 1; min-width: 0; font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-appbar--start .cb-mk-appbar__title { text-align: left; }

.cb-mk-tabbar { position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(var(--cb-mk-tabbar-count, 5), minmax(0, 1fr)); padding: var(--cb-mk-space-2) var(--cb-mk-space-3); padding-bottom: calc(var(--cb-mk-space-2) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cb-mk-color-border-default); background: var(--cb-mk-color-bg-surface); }
.cb-mk-tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--cb-mk-space-1); padding: var(--cb-mk-space-2) 0; color: var(--cb-mk-color-text-secondary); font: 600 0.6875rem/1.2 var(--cb-mk-font-family-body); text-decoration: none; }
.cb-mk-tabbar__item .cb-mk-icon { width: 1.5rem; height: 1.5rem; }
.cb-mk-tabbar__item[aria-current="page"] { color: var(--cb-mk-color-text-primary); }
.cb-mk-tabbar__item[aria-current="page"] .cb-mk-tabbar__icon { background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-tabbar__icon { display: grid; place-items: center; width: 3.5rem; height: 2rem; border-radius: var(--cb-mk-radius-full); }
.cb-mk-tabbar__badge { position: absolute; top: 0.125rem; left: calc(50% + 0.5rem); min-width: 1.125rem; height: 1.125rem; padding: 0 var(--cb-mk-space-2); border: 2px solid var(--cb-mk-color-bg-surface); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-warning); color: var(--cb-mk-color-text-on-brand); font: 700 0.625rem/0.875rem var(--cb-mk-font-family-body); text-align: center; }

@media (max-width: 63.99rem) {
    .cb-mk-app { grid-template-columns: minmax(0, 1fr); }
    .cb-mk-app > .cb-mk-sidebar { display: none; }
    .cb-mk-app__content { padding: var(--cb-mk-space-6) var(--cb-mk-space-5); }
    .cb-mk-topbar { padding: var(--cb-mk-space-3) var(--cb-mk-space-5); }
}

@media (min-width: 64rem) {
    .cb-mk-tabbar,
    .cb-mk-appbar--phone-only { display: none; }
}

.cb-mk-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--cb-mk-space-gap); padding-bottom: var(--cb-mk-space-gap-lg); }
.cb-mk-page-header__text { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); min-width: 0; max-width: 46rem; }
.cb-mk-page-header__text p { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-l); }
.cb-mk-page-header__chips { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-2); }
/* Back link (Figma: Navigation / Back link): the header's first row, one header gap above the title; elsewhere it sits
   in a column with the same gap (order head, menu head). */
.cb-mk-back-link { display: flex; min-width: 0; }
.cb-mk-page-header > .cb-mk-back-link { flex: 0 0 100%; }
.cb-mk-back-link > a { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); min-height: 1.5rem; color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-label-s); text-decoration: none; }
.cb-mk-back-link > a:hover { color: var(--cb-mk-color-text-brand); text-decoration: underline; text-underline-offset: 0.2em; }
.cb-mk-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-gap-sm); }

.cb-mk-steps { display: flex; gap: var(--cb-mk-space-gap-sm); margin: 0; padding: 0; list-style: none; counter-reset: cb-mk-step; }
.cb-mk-steps__item { flex: 1; display: flex; flex-direction: column; gap: var(--cb-mk-space-2); min-width: 0; counter-increment: cb-mk-step; font: var(--cb-mk-text-label-s); color: var(--cb-mk-color-text-secondary); }
.cb-mk-steps__item::before { content: ""; height: 0.25rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-steps__item[data-state="done"]::before { background: var(--cb-mk-color-bg-brand); }
.cb-mk-steps__item[data-state="current"] { color: var(--cb-mk-color-text-primary); }
/* Interactive steps: a step label can be a button that jumps back to that step (benefit programs, recurring meals). */
.cb-mk-steps__item > button { align-self: flex-start; padding: 0; border: 0; border-radius: var(--cb-mk-radius-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.cb-mk-steps__item > button:hover { color: var(--cb-mk-color-text-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.cb-mk-steps__item > button:focus-visible { outline: none; box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-steps__item[data-state="current"]::before { background: var(--cb-mk-color-bg-accent); }

/* ==========================================================================
   Food
   ========================================================================== */

/* Price: the lime price tag with a dot is the signature element */
.cb-mk-price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-gap-sm); }

.cb-mk-price__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--cb-mk-space-2);
    min-height: 1.875rem;
    padding: 0 var(--cb-mk-space-3);
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-accent);
    color: var(--cb-mk-color-text-on-accent);
    font: var(--cb-mk-text-price-m);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cb-mk-price--lg .cb-mk-price__tag { min-height: 2.25rem; padding-inline: var(--cb-mk-space-4); font: var(--cb-mk-text-price-l); }
.cb-mk-price--plain .cb-mk-price__tag { min-height: 0; padding: 0; background: none; color: inherit; }
.cb-mk-price__was { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.cb-mk-price__save { padding: 0 var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-warning-soft); color: var(--cb-mk-color-text-warning); font: var(--cb-mk-text-label-s); }
.cb-mk-price__note { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }

.cb-mk-diet-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-gap-xs); }
.cb-mk-diet-tag { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); min-height: 1.5rem; padding: 0 var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-success-soft); color: var(--cb-mk-color-text-success); font: var(--cb-mk-text-label-s); white-space: nowrap; }
.cb-mk-diet-tag .cb-mk-icon { width: 0.8125rem; height: 0.8125rem; }
.cb-mk-diet-tag--spicy { background: var(--cb-mk-color-bg-warning-soft); color: var(--cb-mk-color-text-warning); }
.cb-mk-diet-tag--neutral { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); }
/* Diet match (Figma: Dietary tag, Kind Diet match): how many dishes fit the chosen diets, on a restaurant card. */
.cb-mk-diet-tag--match { background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-primary); }

.cb-mk-allergen { position: relative; display: inline-flex; }
.cb-mk-allergen > button { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); padding: 0; border: 0; background: none; color: var(--cb-mk-color-text-warning); font: var(--cb-mk-text-label-s); cursor: pointer; }
.cb-mk-allergen__panel { position: absolute; z-index: 30; bottom: calc(100% + var(--cb-mk-space-3)); left: 0; width: 16rem; padding: var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-md); background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-primary); box-shadow: var(--cb-mk-shadow-overlay); font: var(--cb-mk-text-body-s); }
.cb-mk-allergen__panel strong { display: block; margin-bottom: var(--cb-mk-space-2); font: var(--cb-mk-text-label-s); }
.cb-mk-allergen:not([data-open="true"]) .cb-mk-allergen__panel:not(.cb-mk-overlay-preview) { display: none; }
.cb-mk-allergen__panel.mk-overlay-preview { position: static; }

.cb-mk-rating { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); font: var(--cb-mk-text-label-s); font-variant-numeric: tabular-nums; }
.cb-mk-rating .cb-mk-icon { width: 0.875rem; height: 0.875rem; color: var(--cb-mk-color-text-warning); fill: currentColor; }
.cb-mk-rating small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }

.cb-mk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-1) var(--cb-mk-space-3); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-meta--plain { column-gap: var(--cb-mk-space-4); }
/* The dot sits in the gap before an item. The left-only clip hides it on an item that wraps to the start of a line, so no line begins with a dot. */
.cb-mk-meta:not(.cb-mk-meta--plain) { column-gap: var(--cb-mk-space-5); clip-path: inset(-100vmax -100vmax -100vmax 0); }
.cb-mk-meta:not(.cb-mk-meta--plain) > * { position: relative; }
.cb-mk-meta:not(.cb-mk-meta--plain) > * + *::before { content: "·"; position: absolute; left: calc(var(--cb-mk-space-5) / -2); transform: translateX(-50%); color: var(--cb-mk-color-text-disabled); }
.cb-mk-meta__item { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); }
.cb-mk-meta__item .cb-mk-icon { width: 0.875rem; height: 0.875rem; }

.cb-mk-photo { position: relative; overflow: hidden; border-radius: var(--cb-mk-radius-media); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-photo > img { width: 100%; height: 100%; object-fit: cover; }

/* Restaurant card: column (desktop and tablet grids) and row (phone lists) */
.cb-mk-restaurant-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-card);
    background: var(--cb-mk-color-bg-surface);
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease);
}

.cb-mk-restaurant-card:hover { border-color: var(--cb-mk-color-border-strong); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-restaurant-card__media { position: relative; aspect-ratio: 21 / 9; border-radius: 0; }
.cb-mk-restaurant-card__badges { position: absolute; top: var(--cb-mk-space-5); left: var(--cb-mk-space-5); display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-2); }
.cb-mk-restaurant-card__actions { position: absolute; top: var(--cb-mk-space-5); right: var(--cb-mk-space-5); display: flex; gap: var(--cb-mk-space-2); }
.cb-mk-restaurant-card__status { position: absolute; left: var(--cb-mk-space-5); bottom: var(--cb-mk-space-5); }
.cb-mk-restaurant-card__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-inset-field) var(--cb-mk-space-inset-field) var(--cb-mk-space-inset-field); }
.cb-mk-restaurant-card__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-restaurant-card__title { min-width: 0; font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); }
.cb-mk-restaurant-card__score { flex: none; margin-left: auto; }
.cb-mk-restaurant-card__score .cb-mk-rating small { margin-left: var(--cb-mk-space-1); }
/* The cuisines are one quiet line of text under the name, never chips: a long list ends in an ellipsis instead of a chip
   cut to one letter on a narrow card (Figma: Restaurant card, Cuisines). The price sits on its own line under them. */
.cb-mk-restaurant-card__cuisines { margin-top: calc(-1 * var(--cb-mk-space-1)); overflow: hidden; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-restaurant-card__body > .cb-mk-price { align-self: flex-start; }
.cb-mk-restaurant-card__body > .cb-mk-diet-tag--match { align-self: flex-start; }
.cb-mk-restaurant-card__unavailable { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-restaurant-card__link { color: inherit; text-decoration: none; }
.cb-mk-restaurant-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cb-mk-restaurant-card__actions,
.cb-mk-restaurant-card .cb-mk-allergen { z-index: 2; }

.cb-mk-restaurant-card--featured { border-color: var(--cb-mk-color-border-brand); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-brand); }
.cb-mk-restaurant-card--unavailable .cb-mk-restaurant-card__media > img { filter: grayscale(0.7) brightness(0.8); }
.cb-mk-restaurant-card--unavailable .cb-mk-restaurant-card__title,
.cb-mk-restaurant-card--unavailable .cb-mk-price { opacity: 0.56; }

.cb-mk-restaurant-card--row { flex-direction: row; align-items: stretch; gap: var(--cb-mk-space-gap); padding: var(--cb-mk-space-5); }
.cb-mk-restaurant-card--row .cb-mk-restaurant-card__media { flex: none; width: 5.5rem; aspect-ratio: 1; border-radius: var(--cb-mk-radius-media); }
.cb-mk-restaurant-card--row .cb-mk-restaurant-card__body { flex: 1; padding: 0; gap: var(--cb-mk-space-2); }
.cb-mk-restaurant-card--row .cb-mk-restaurant-card__actions { position: static; z-index: 2; }

/* Restaurant header (Figma: Food / Restaurant header): a store banner. The info card sits over the lower edge of the cover. */
.cb-mk-restaurant-header { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-restaurant-header__cover { width: 100%; height: 14rem; border-radius: var(--cb-mk-radius-card); }
.cb-mk-restaurant-header__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name actions" "meta meta" "facts facts";
    align-items: center;
    gap: var(--cb-mk-space-3) var(--cb-mk-space-5);
    margin: calc(-1 * var(--cb-mk-space-10)) var(--cb-mk-space-7) 0;
    padding: var(--cb-mk-space-7);
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-card);
    background: var(--cb-mk-color-bg-surface);
    box-shadow: var(--cb-mk-shadow-raised);
}

.cb-mk-restaurant-header--no-photo .cb-mk-restaurant-header__card { margin: 0; }
.cb-mk-restaurant-header__name { grid-area: name; margin: 0; font: var(--cb-mk-text-heading-2); text-wrap: balance; }
.cb-mk-restaurant-header__meta { grid-area: meta; display: flex; align-items: center; gap: var(--cb-mk-space-3); min-width: 0; margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); white-space: nowrap; }
.cb-mk-restaurant-header__cuisines { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cb-mk-restaurant-header__meta > * + *::before { content: "·" / ""; margin-right: var(--cb-mk-space-3); color: var(--cb-mk-color-text-disabled); }
.cb-mk-restaurant-header__facts { grid-area: facts; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-3) var(--cb-mk-space-5); margin: var(--cb-mk-space-2) 0 0; padding: var(--cb-mk-space-4) 0 0; border-top: 1px solid var(--cb-mk-color-border-default); list-style: none; font: var(--cb-mk-text-body-s); }
.cb-mk-restaurant-header__facts > li { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); }
.cb-mk-restaurant-header__facts > li > .cb-mk-icon { color: var(--cb-mk-color-text-secondary); }
.cb-mk-restaurant-header__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--cb-mk-space-3); }
.cb-mk-restaurant-header__actions > form { display: contents; }
/* Wide screens: Save and Pin are round icon buttons; their labels stay for screen readers. */
.cb-mk-restaurant-header__action { width: var(--cb-mk-control-height-sm); padding: 0; }
.cb-mk-restaurant-header__action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cb-mk-restaurant-header__action[aria-pressed="true"] .cb-mk-icon { fill: currentColor; }
.cb-mk-restaurant-header__action[aria-pressed="true"] .cb-mk-icon[data-icon="heart"] { color: var(--cb-mk-color-text-warning); }
.cb-mk-restaurant-header__action[aria-pressed="true"] .cb-mk-icon[data-icon="pin"] { color: var(--cb-mk-color-text-brand); }

/* Menu item card (Figma: Food / Menu item card).
   List: the photo runs flush down the right edge and every card is the same height, whatever it carries.
   Grid: the photo sits on top; cards in one row share a height and keep the price on the bottom line. */
.cb-mk-menu-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem;
    height: 11.5rem;
    border: 1px solid var(--cb-mk-color-border-default);
    border-radius: var(--cb-mk-radius-card);
    background: var(--cb-mk-color-bg-surface);
    text-align: left;
    color: inherit;
}

.cb-mk-menu-item:hover { border-color: var(--cb-mk-color-border-strong); }
.cb-mk-menu-item__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); min-width: 0; min-height: 0; padding: var(--cb-mk-space-5); }
.cb-mk-menu-item__head { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-menu-item__title { display: -webkit-box; overflow: hidden; font: var(--cb-mk-text-body-m-strong); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cb-mk-menu-item__text { display: -webkit-box; overflow: hidden; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Facts: one line. The rating and allergen always show; dietary labels that do not fit wrap onto a hidden second line. */
.cb-mk-menu-item__facts { display: flex; align-items: center; gap: var(--cb-mk-space-3); min-width: 0; white-space: nowrap; }
.cb-mk-menu-item__facts > :not(:first-child, .cb-mk-menu-item__diets)::before,
.cb-mk-menu-item__facts > :not(:first-child) > .cb-mk-menu-item__diet::before,
.cb-mk-menu-item__diet + .cb-mk-menu-item__diet::before { content: "·" / ""; margin-right: var(--cb-mk-space-3); color: var(--cb-mk-color-text-disabled); font: var(--cb-mk-text-caption); }
.cb-mk-menu-item__diets { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: center; gap: 0 var(--cb-mk-space-3); min-width: 0; height: 1.25rem; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.cb-mk-menu-item__diet { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); min-width: 0; max-width: 100%; color: var(--cb-mk-color-text-success); font: var(--cb-mk-text-label-s); line-height: 1.25rem; }
.cb-mk-menu-item__diet > span { overflow: hidden; text-overflow: ellipsis; }
.cb-mk-menu-item__diet .cb-mk-icon { flex: none; width: 0.8125rem; height: 0.8125rem; }
.cb-mk-menu-item__diet--spicy { color: var(--cb-mk-color-text-warning); }
.cb-mk-menu-item__diet--neutral { color: var(--cb-mk-color-text-secondary); }
/* Foot: the price line never wraps; the saving, then the crossed-out price, give way first. */
.cb-mk-menu-item__foot { display: flex; align-items: center; gap: var(--cb-mk-space-3); min-width: 0; margin-top: auto; }
.cb-mk-menu-item__foot > .cb-mk-price { flex: 0 1 auto; min-width: 0; height: 1.875rem; overflow: hidden; }
.cb-mk-menu-item__foot > .cb-mk-menu-item__add { flex: none; margin-left: auto; }
.cb-mk-menu-item__media { position: relative; height: 100%; min-height: 0; border-radius: 0 calc(var(--cb-mk-radius-card) - 1px) calc(var(--cb-mk-radius-card) - 1px) 0; }
.cb-mk-menu-item__media .cb-mk-menu-item__add { position: absolute; right: var(--cb-mk-space-3); bottom: var(--cb-mk-space-3); }
.cb-mk-menu-item__badge { position: absolute; top: var(--cb-mk-space-3); left: var(--cb-mk-space-3); right: var(--cb-mk-space-3); display: flex; }
.cb-mk-menu-item__badge .cb-mk-chip { display: block; min-width: 0; max-width: 100%; padding-inline: var(--cb-mk-space-3); overflow: hidden; text-overflow: ellipsis; line-height: 1.625rem; }
.cb-mk-menu-item__status { position: absolute; left: var(--cb-mk-space-3); bottom: var(--cb-mk-space-3); }
.cb-mk-menu-item--in-cart { border-color: var(--cb-mk-color-border-brand); }
.cb-mk-menu-item--sold-out { opacity: 0.6; }
.cb-mk-menu-item--no-photo { grid-template-columns: minmax(0, 1fr); }
.cb-mk-menu-item--grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; }
.cb-mk-menu-item--grid .cb-mk-menu-item__media { grid-row: 1; height: auto; aspect-ratio: 16 / 10; border-radius: calc(var(--cb-mk-radius-card) - 1px) calc(var(--cb-mk-radius-card) - 1px) 0 0; }
.cb-mk-menu-item--grid .cb-mk-menu-item__body { grid-row: 2; }
/* With an item dialog the whole card is one button; the allergen popover sits above it. */
.cb-mk-menu-item__open { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.cb-mk-menu-item__open:focus-visible { outline: none; box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-menu-item .cb-mk-allergen { position: relative; z-index: 2; }
.cb-mk-menu-item--action:hover { border-color: var(--cb-mk-color-border-brand); }
.cb-mk-menu-item--locked:hover { border-color: var(--cb-mk-color-border-default); }
.cb-mk-menu-item__locked { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); }

/* Item options */
/* Option group (Figma: Option group header, State=Default, Done, Error). A required group shows a Required chip; it turns
   green with a check once the rule is met (data-state="done") and red with the Error line and red rows when the person
   presses Add before choosing (data-state="error"; citybites.storefront-browse.js). */
.cb-mk-option-group { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); min-width: 0; margin: 0; padding: 0; border: 0; scroll-margin-top: 4.5rem; }
.cb-mk-option-group__head { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-4) 0 var(--cb-mk-space-2); }
.cb-mk-option-group__head small { display: block; font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-option-group__badge { flex: none; }
.cb-mk-option-group__badge .cb-mk-icon { display: none; }
.cb-mk-option-group__error { display: none; margin-top: var(--cb-mk-space-1); font: var(--cb-mk-text-label-s); color: var(--cb-mk-color-text-danger); }
.cb-mk-option-group[data-state="done"] .cb-mk-option-group__badge { --_cb-mk-chip-bg: var(--cb-mk-color-bg-success-soft); --_cb-mk-chip-fg: var(--cb-mk-color-text-success); }
.cb-mk-option-group[data-state="done"] .cb-mk-option-group__badge [data-icon="check"],
.cb-mk-option-group[data-state="error"] .cb-mk-option-group__badge [data-icon="alert"],
.cb-mk-option-group[data-state="error"] .cb-mk-option-group__error { display: block; }
.cb-mk-option-group[data-state="error"] .cb-mk-option-group__badge { --_cb-mk-chip-bg: var(--cb-mk-color-bg-danger-soft); --_cb-mk-chip-fg: var(--cb-mk-color-text-danger); }
.cb-mk-option-group[data-state="error"] .cb-mk-option-row { border-color: var(--cb-mk-color-border-danger); }
.cb-mk-option-row { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-height: var(--cb-mk-control-height); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); cursor: pointer; }
.cb-mk-option-row > .cb-mk-check,
.cb-mk-option-row > .cb-mk-radio { flex: 1; min-width: 0; }
.cb-mk-option-row__price { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); font-variant-numeric: tabular-nums; }
.cb-mk-option-row:has(input:checked) { border-color: var(--cb-mk-color-border-brand); background: var(--cb-mk-color-bg-success-soft); }

/* Item details (Figma: Food / Item details, October 29). One column: the photo runs edge to edge on top (2:1 in the dialog,
   16:9 on the phone sheet), keeps its height however long the options are and scrolls away with the details. */
.cb-mk-item-details { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); }
.cb-mk-item-details__content { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); min-width: 0; }
.cb-mk-item-details__media { flex: none; aspect-ratio: 2 / 1; border-radius: var(--cb-mk-radius-card); }
.cb-mk-item-details--with-media { padding-top: 0; }
.cb-mk-item-details--with-media > .cb-mk-item-details__media { margin-inline: calc(-1 * var(--cb-mk-space-inset-card)); border-radius: 0; }
.cb-mk-item-details__foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--cb-mk-space-gap); padding: var(--cb-mk-space-4) 0; background: var(--cb-mk-color-bg-raised); }
.cb-mk-item-details__foot .cb-mk-button { flex: 1; }
.cb-mk-option-row__text { flex: 1; min-width: 0; }
.cb-mk-option-row__count { flex: none; width: 5rem; }

/* Item details opened from a menu card. A hidden div rather than <dialog>: citybites.storefront-browse.js opens it by removing hidden. */
.cb-mk-item-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--cb-mk-space-5); }
.cb-mk-item-modal[hidden] { display: none; }
.cb-mk-item-modal__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--cb-mk-color-bg-scrim) 48%, transparent); }
.cb-mk-item-modal__dialog { position: relative; display: flex; flex-direction: column; width: min(100%, 40rem); max-height: min(100%, 52rem); overflow: hidden; border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-raised); color: var(--cb-mk-color-text-primary); box-shadow: var(--cb-mk-shadow-overlay); }
.cb-mk-item-modal__dialog > .cb-mk-modal__panel { flex: 1; min-height: 0; }
/* Top bar (Figma: Item details, View=Top and View=Scrolled): transparent over the photo with a floating close button; once the
   item name scrolls under it the bar turns solid with the name, so the close button never sits on the options. */
.cb-mk-item-modal__bar { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; gap: var(--cb-mk-space-4); min-height: 4rem; padding: var(--cb-mk-space-3) var(--cb-mk-space-5) var(--cb-mk-space-3) var(--cb-mk-space-inset-card); border-bottom: 1px solid transparent; pointer-events: none; transition: background-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-item-modal__bar-title { flex: 1; min-width: 0; overflow: hidden; font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: opacity var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-item-modal__close { flex: none; margin-left: auto; box-shadow: var(--cb-mk-shadow-raised); pointer-events: auto; }
.cb-mk-item-modal__dialog[data-state="scrolled"] .cb-mk-item-modal__bar { border-bottom-color: var(--cb-mk-color-border-default); background: var(--cb-mk-color-bg-raised); pointer-events: auto; }
.cb-mk-item-modal__dialog[data-state="scrolled"] .cb-mk-item-modal__bar-title { opacity: 1; }
.cb-mk-item-modal__dialog[data-state="scrolled"] .cb-mk-item-modal__close { box-shadow: none; }
.cb-mk-item-modal__summary { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-item-modal__summary > h2:first-child { padding-right: var(--cb-mk-space-9); }
.cb-mk-item-modal__foot { flex-wrap: nowrap; justify-content: space-between; align-items: center; }
.cb-mk-item-modal__submit { flex: 1; }
.cb-mk-item-modal__hint { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-item-modal__hint > :last-child { flex: none; font-variant-numeric: tabular-nums; }
/* Possible allergens of an unverified owned item, beside the price (the Ingredient list has the detail). */
.cb-mk-item-modal__allergens { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); color: var(--cb-mk-color-text-warning); font: var(--cb-mk-text-label-s); }

@media (max-width: 47.99rem) {
    .cb-mk-item-modal { place-items: end stretch; padding: 0; }
    .cb-mk-item-modal__dialog { width: 100%; max-height: 92%; border-radius: var(--cb-mk-radius-xl) var(--cb-mk-radius-xl) 0 0; box-shadow: var(--cb-mk-shadow-sheet); }
    .cb-mk-item-modal__summary > h2 { font: var(--cb-mk-text-heading-3); letter-spacing: var(--cb-mk-tracking-heading-3); }
    .cb-mk-item-details__media { aspect-ratio: 16 / 9; }
    .cb-mk-item-modal__bar { padding-right: var(--cb-mk-space-4); }
}

/* Ingredient list (Figma: Food / Ingredient list): rows split by hairlines, then the allergen chips and the note. */
.cb-mk-ingredients { display: flex; flex-direction: column; gap: var(--cb-mk-space-6); }
.cb-mk-ingredients__list,
.cb-mk-ingredients__chips { margin: 0; padding: 0; list-style: none; }
.cb-mk-ingredients__item { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); padding-block: var(--cb-mk-space-4); }
.cb-mk-ingredients__item:first-child { padding-top: 0; }
.cb-mk-ingredients__item + .cb-mk-ingredients__item { border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-ingredients__name { font: var(--cb-mk-text-label-m); color: var(--cb-mk-color-text-primary); }
.cb-mk-ingredients__text { font: var(--cb-mk-text-body-s); color: var(--cb-mk-color-text-secondary); }
.cb-mk-ingredients__allergens { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); color: var(--cb-mk-color-text-warning); font: var(--cb-mk-text-caption); }
.cb-mk-ingredients__summary { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-ingredients__chips { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-2); }
.cb-mk-ingredients__note { margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }

/* Icon tile (Figma: Food / Kitchen info, Reviews): a round sunken tile with a brand icon beside a fact or an empty state. */
.cb-mk-icon-tile { display: inline-grid; flex: none; place-items: center; width: var(--cb-mk-control-height-sm); height: var(--cb-mk-control-height-sm); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-brand); }

/* Stars: five, with the rating's filled. */
.cb-mk-stars { display: inline-flex; gap: 2px; color: var(--cb-mk-color-border-strong); }
.cb-mk-stars .cb-mk-icon { width: 1rem; height: 1rem; fill: currentColor; }
.cb-mk-stars--sm .cb-mk-icon { width: 0.875rem; height: 0.875rem; }
.cb-mk-stars__star--on { color: var(--cb-mk-color-text-warning); }

/* Reviews (Figma: Food / Reviews, Review card): the summary tile, then the cards in a row that scrolls sideways. */
.cb-mk-reviews__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap); }
.cb-mk-reviews__body { display: flex; align-items: flex-start; gap: var(--cb-mk-space-gap); min-width: 0; }
.cb-mk-reviews__summary { display: flex; flex: none; flex-direction: column; gap: var(--cb-mk-space-1); width: 9.5rem; padding: var(--cb-mk-space-5); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-reviews__average { font: var(--cb-mk-text-number-xl); }
.cb-mk-reviews__list { display: grid; flex: 1; grid-auto-flow: column; grid-auto-columns: 15rem; gap: var(--cb-mk-space-3); min-width: 0; margin: 0; padding: 0; list-style: none; scroll-snap-type: x mandatory; }
.cb-mk-reviews__list > * { scroll-snap-align: start; }
.cb-mk-review-card { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-5); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-raised); }
.cb-mk-review-card__headline { font: var(--cb-mk-text-label-m); }
.cb-mk-review-card__text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
.cb-mk-review-card__date { margin-top: auto; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-reviews__empty { display: flex; align-items: center; gap: var(--cb-mk-space-4); }
.cb-mk-reviews__empty p { margin: 0; }

/* Kitchen info (Figma: Food / Kitchen info) */
.cb-mk-kitchen-info { gap: var(--cb-mk-space-7); }
.cb-mk-kitchen-info__about { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); }
.cb-mk-kitchen-info__about p { margin: 0; }
.cb-mk-kitchen-info__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--cb-mk-space-6) var(--cb-mk-space-7); margin: 0; padding: 0; list-style: none; }
.cb-mk-kitchen-info__fact { display: flex; align-items: flex-start; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-kitchen-info__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-mk-kitchen-info__text strong { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-kitchen-info__dietary { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); padding-top: var(--cb-mk-space-7); border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-kitchen-info__dietary p { margin: 0; }
.cb-mk-kitchen-info__options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-4); }

@media (max-width: 47.99rem) {
    .cb-mk-reviews__body { flex-direction: column; }
    .cb-mk-reviews__summary { flex-direction: row; align-items: center; gap: var(--cb-mk-space-3); width: auto; }
    .cb-mk-reviews__list { align-self: stretch; grid-auto-columns: 15rem; }
}

/* Cart */
.cb-mk-cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cb-mk-space-2) var(--cb-mk-space-gap); padding: var(--cb-mk-space-4) 0; border-bottom: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-cart-line:last-child { border-bottom: 0; }
.cb-mk-cart-line__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-cart-line__meta { grid-column: 1; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-cart-line__price { font: var(--cb-mk-text-price-m); font-variant-numeric: tabular-nums; text-align: right; }
.cb-mk-cart-line__controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-cart-line__person { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); font: var(--cb-mk-text-label-s); color: var(--cb-mk-color-text-secondary); }

.cb-mk-summary-line { display: flex; justify-content: space-between; gap: var(--cb-mk-space-gap); font: var(--cb-mk-text-body-s); font-variant-numeric: tabular-nums; }
.cb-mk-summary-line > :first-child { color: var(--cb-mk-color-text-secondary); }
.cb-mk-summary-line dd { margin: 0; }
.cb-mk-summary-line--discount > :last-child { color: var(--cb-mk-color-text-success); }
.cb-mk-summary-line--total { padding-top: var(--cb-mk-space-4); border-top: 1px solid var(--cb-mk-color-border-default); font: var(--cb-mk-text-price-l); }
.cb-mk-summary-line--total > :first-child { color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-body-m-strong); }

.cb-mk-order-summary { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); margin: 0; }

/* Shared description list: service agreements, request preferences and operational facts. */
.cb-mk-description-list { margin: 0; }
.cb-mk-description-list__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--cb-mk-space-gap); padding-block: var(--cb-mk-space-4); border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-description-list__row:first-child { border-top: 0; padding-top: 0; }
.cb-mk-description-list__row:last-child { padding-bottom: 0; }
.cb-mk-description-list dt { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
.cb-mk-description-list dd { min-width: 0; margin: 0; font: var(--cb-mk-text-body-m); white-space: pre-wrap; overflow-wrap: anywhere; }
.cb-mk-description-list dd small { display: block; margin-top: var(--cb-mk-space-2); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
@media (max-width: 40rem) { .cb-mk-description-list__row { grid-template-columns: minmax(0, 1fr); gap: var(--cb-mk-space-2); } }

.cb-mk-cart-panel { position: sticky; top: var(--cb-mk-space-5); display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); max-height: calc(100vh - 2.5rem); padding: var(--cb-mk-space-inset-card); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); }
.cb-mk-cart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-cart-panel__lines { list-style: none; overflow-y: auto; margin: 0 calc(var(--cb-mk-space-2) * -1); padding: 0 var(--cb-mk-space-2); }
.cb-mk-cart-panel__foot { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); padding-top: var(--cb-mk-space-gap); border-top: 1px solid var(--cb-mk-color-border-default); }

.cb-mk-minimum { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-accent-soft); font: var(--cb-mk-text-label-s); }

.cb-mk-cart-bar {
    position: sticky;
    bottom: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: var(--cb-mk-space-gap);
    margin: 0 var(--cb-mk-space-4);
    margin-bottom: calc(var(--cb-mk-space-4) + env(safe-area-inset-bottom, 0px));
    padding: var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-3) var(--cb-mk-space-5);
    border: 0;
    border-radius: var(--cb-mk-radius-full);
    background: var(--cb-mk-color-bg-inverse);
    color: var(--cb-mk-color-text-on-inverse);
    box-shadow: var(--cb-mk-shadow-overlay);
    font: var(--cb-mk-text-label-m);
    text-align: left;
    cursor: pointer;
}

/* When the phone tab bar follows, the cart bar floats just above it. */
.cb-mk-cart-bar:has(~ .cb-mk-tabbar) { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); margin-bottom: var(--cb-mk-space-3); }

.cb-mk-cart-bar__count { display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); font: var(--cb-mk-text-label-s); }
.cb-mk-cart-bar__label { flex: 1; min-width: 0; }
.cb-mk-cart-bar__label small { display: block; opacity: 0.72; font: var(--cb-mk-text-caption); color: inherit; }
.cb-mk-cart-bar__total { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); min-height: var(--cb-mk-control-height-sm); padding: 0 var(--cb-mk-space-5); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); font: var(--cb-mk-text-price-m); font-variant-numeric: tabular-nums; }

/* Meal choice card (employee picks a meal inside a group order) */
.cb-mk-meal-choice { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--cb-mk-space-gap); padding: var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); cursor: pointer; }
.cb-mk-meal-choice input { position: absolute; opacity: 0; }
.cb-mk-meal-choice .cb-mk-photo { aspect-ratio: 1; }
.cb-mk-meal-choice__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-meal-choice__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-meal-choice__mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1.5px solid var(--cb-mk-color-border-control); border-radius: var(--cb-mk-radius-full); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-meal-choice__mark .cb-mk-icon { width: 0.875rem; height: 0.875rem; stroke-width: 3; opacity: 0; }
.cb-mk-meal-choice:has(input:checked) { border-color: var(--cb-mk-color-border-brand); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-brand); }
.cb-mk-meal-choice:has(input:checked) .cb-mk-meal-choice__mark { background: var(--cb-mk-color-bg-brand); border-color: var(--cb-mk-color-bg-brand); }
.cb-mk-meal-choice:has(input:checked) .cb-mk-meal-choice__mark .cb-mk-icon { opacity: 1; }
.cb-mk-meal-choice:has(input:focus-visible) { box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-meal-choice--over-budget .cb-mk-meal-choice__mark { border-color: var(--cb-mk-color-border-danger); }

.cb-mk-budget { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); }
.cb-mk-budget__head { display: flex; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); font: var(--cb-mk-text-label-s); font-variant-numeric: tabular-nums; }
.cb-mk-budget--over .cb-mk-progress__bar { background: var(--cb-mk-color-bg-danger); }
.cb-mk-budget--over .cb-mk-budget__head > :last-child { color: var(--cb-mk-color-text-danger); }

@media (max-width: 47.99rem) {
    .cb-mk-restaurant-header__cover { height: 10rem; }
    .cb-mk-restaurant-header__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "meta" "facts" "actions"; margin: calc(-1 * var(--cb-mk-space-10)) var(--cb-mk-space-5) 0; padding: var(--cb-mk-space-5); }
    .cb-mk-restaurant-header__name { font: var(--cb-mk-text-heading-3); }
    .cb-mk-restaurant-header__facts { flex-direction: column; align-items: flex-start; }
    .cb-mk-restaurant-header__actions { justify-content: flex-start; padding-top: var(--cb-mk-space-2); }
    .cb-mk-restaurant-header__action { width: auto; padding: 0 var(--cb-mk-space-inset-field); }
    .cb-mk-restaurant-header__action-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .cb-mk-restaurant-header__details { border-color: transparent; background: none; color: var(--cb-mk-color-text-brand); }
    .cb-mk-menu-item--list:not(.cb-mk-menu-item--no-photo) { grid-template-columns: minmax(0, 1fr) 7rem; }
    .cb-mk-date-picker { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Operations: kitchen queue and driver runs
   ========================================================================== */

.cb-mk-queue { display: grid; grid-template-columns: repeat(3, minmax(18rem, 1fr)); gap: var(--cb-mk-space-gap); overflow-x: auto; align-items: start; }
.cb-mk-lane { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); min-width: 0; padding: var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-lane__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-2) var(--cb-mk-space-2) var(--cb-mk-space-3); font: var(--cb-mk-text-label-m); }
.cb-mk-lane__head .cb-mk-chip { font-variant-numeric: tabular-nums; }

.cb-mk-ticket { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-inset-field); border: 1px solid var(--cb-mk-color-border-default); border-left: 4px solid var(--cb-mk-color-border-strong); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); }
.cb-mk-ticket__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-ticket__ref { font: var(--cb-mk-text-overline); letter-spacing: var(--cb-mk-tracking-overline); color: var(--cb-mk-color-text-secondary); }
.cb-mk-ticket__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-ticket__items { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); margin: 0; padding: 0; list-style: none; font: var(--cb-mk-text-body-s); }
.cb-mk-ticket__items li { display: flex; gap: var(--cb-mk-space-3); }
.cb-mk-ticket__items b { min-width: 1.75rem; font-variant-numeric: tabular-nums; }
.cb-mk-ticket__note { padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-sm); background: var(--cb-mk-color-bg-warning-soft); color: var(--cb-mk-color-text-warning); font: var(--cb-mk-text-label-s); }
.cb-mk-ticket--urgent { border-left-color: var(--cb-mk-color-bg-warning); }
.cb-mk-ticket--preparing { border-left-color: var(--cb-mk-color-bg-accent); }
.cb-mk-ticket--ready { border-left-color: var(--cb-mk-color-bg-brand); }

.cb-mk-run { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); padding: var(--cb-mk-space-inset-card); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-inverse); color: var(--cb-mk-color-text-on-inverse); }
.cb-mk-run__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-gap); }
.cb-mk-run__window { font: var(--cb-mk-text-number-l); letter-spacing: var(--cb-mk-tracking-number-l); }
.cb-mk-run .cb-mk-meta,
.cb-mk-run .cb-mk-overline { color: inherit; opacity: 0.8; }
.cb-mk-run .cb-mk-button--ghost { --_cb-mk-button-fg: var(--cb-mk-color-text-on-inverse); --_cb-mk-button-bg-hover: var(--cb-mk-color-bg-overlay-hover); }

.cb-mk-stops { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* Route list and row (Figma: Operations / Route row, Route list): rows edge to edge in a flush card, hairlines between them. */
.cb-mk-route-list { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-route-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-field); border-bottom: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-route-row { display: flex; align-items: flex-start; gap: var(--cb-mk-space-gap); min-width: 0; padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-field); border-bottom: 1px solid var(--cb-mk-color-border-default); color: inherit; text-decoration: none; }
.cb-mk-route-row:last-child { border-bottom: 0; }
.cb-mk-route-row:hover { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-route-row[aria-current="true"] { background: var(--cb-mk-color-bg-accent-soft); box-shadow: inset 3px 0 0 var(--cb-mk-color-bg-brand); }
.cb-mk-route-row:focus-visible { outline: 2px solid var(--cb-mk-color-border-brand); outline-offset: -2px; }
.cb-mk-route-row__body { flex: 1; display: flex; flex-direction: column; gap: var(--cb-mk-space-3); min-width: 0; }
.cb-mk-route-row__text { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-route-row__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-route-row__progress { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); }
.cb-mk-route-row__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-1) var(--cb-mk-space-3); }
.cb-mk-route-row__meta,
.cb-mk-route-row__count,
.cb-mk-route-row__next { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-route-row__count { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The marker and the status sit level with the stop's first line, at their own size. */
.cb-mk-stop { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: start; gap: var(--cb-mk-space-gap); padding: var(--cb-mk-space-4) 0; }
.cb-mk-stop::before { content: ""; position: absolute; left: 0.9375rem; top: 2.75rem; bottom: -0.25rem; width: 2px; background: var(--cb-mk-color-border-default); }
.cb-mk-stop:last-child::before { content: none; }
.cb-mk-stop__marker { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-s); }
.cb-mk-stop__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-stop__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-stop[data-state="done"] .cb-mk-stop__marker { background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-stop[data-state="current"] .cb-mk-stop__marker { background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-run .cb-mk-stop::before { background: var(--cb-mk-color-border-overlay); }
.cb-mk-run .cb-mk-stop__marker { background: var(--cb-mk-color-bg-overlay-strong); color: inherit; }
.cb-mk-run .cb-mk-stop[data-state="current"] .cb-mk-stop__marker { background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }

@media (prefers-reduced-motion: reduce) {
    .cb-mk-skeleton { animation: none; }
}

/* ==========================================================================
   App frame details (Views/Shared/_MarketAppLayout.cshtml)
   ========================================================================== */

.cb-mk-skip-link { position: absolute; left: var(--cb-mk-space-4); top: -4rem; z-index: 100; padding: var(--cb-mk-space-3) var(--cb-mk-space-5); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-inverse); color: var(--cb-mk-color-text-on-inverse); font: var(--cb-mk-text-label-m); }
.cb-mk-skip-link:focus { top: var(--cb-mk-space-4); }
.cb-mk-app__content { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-lg); }
.cb-mk-app__body { display: grid; gap: var(--cb-mk-space-gap-lg); min-width: 0; }
.cb-mk-app__content--aside .cb-mk-app__body { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
.cb-mk-app__primary,
.cb-mk-app__secondary { min-width: 0; }
.cb-mk-appbar__brand { display: inline-flex; }
/* Guest frame (Figma: Navigation / Guest bar): a guest has no account, so there is no sidebar or tab bar. The bar carries the brand, who they are and Log in; it scrolls away so the sticky cart and menu tabs keep their place. */
.cb-mk-guest { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.cb-mk-guest-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap); padding: var(--cb-mk-space-3) var(--cb-mk-space-8); padding-top: calc(var(--cb-mk-space-3) + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--cb-mk-color-border-default); background: var(--cb-mk-color-bg-surface); }
.cb-mk-guest-bar__brand { flex: none; display: inline-flex; align-items: center; gap: var(--cb-mk-space-3); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); text-decoration: none; }
.cb-mk-guest-bar__end { display: flex; align-items: center; gap: var(--cb-mk-space-gap); min-width: 0; }
.cb-mk-guest-bar__person { display: flex; align-items: center; gap: var(--cb-mk-space-3); min-width: 0; }
.cb-mk-guest-bar__name { display: flex; flex-direction: column; min-width: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-guest-bar__name strong { overflow: hidden; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-m); text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-guest-bar__member { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); white-space: nowrap; }
.cb-mk-guest-bar .cb-mk-button { flex: none; }
@media (max-width: 47.99rem) {
    .cb-mk-guest-bar { padding-inline: var(--cb-mk-space-5); }
    .cb-mk-guest-bar__word,
    .cb-mk-guest-bar__member { display: none; }
}
.cb-mk-sidebar form { margin: 0; }
/* The phone navigation sheet: a list per sidebar group, the group heading above it. */
.cb-mk-sheet-nav { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); }
.cb-mk-sheet-nav + .cb-mk-sheet-nav { margin-top: var(--cb-mk-space-5); }
.cb-mk-list-row[aria-current="page"] { background: var(--cb-mk-color-bg-accent-soft); }
button.cb-mk-nav-item,
button.cb-mk-tabbar__item { width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
button.cb-mk-tabbar__item { text-align: center; }

@media (max-width: 63.99rem) {
    .cb-mk-app__content--aside .cb-mk-app__body { grid-template-columns: minmax(0, 1fr); }
}

.cb-mk-restaurant-card__action-form { display: contents; }

/* Cart groups and items (Views/App/Partials/Market/_OrderCartGroup.cshtml) */
.cb-mk-cart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-cart-panel__context { margin-top: calc(var(--cb-mk-space-gap-sm) * -1); }
.cb-mk-cart-panel__lines { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-cart-panel__empty { display: flex; flex-direction: column; align-items: center; gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-7) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-page); text-align: center; }
.cb-mk-cart-panel__empty .cb-mk-empty__art { width: 3rem; height: 3rem; margin: 0; }
.cb-mk-cart-panel__empty .cb-mk-empty__art .cb-mk-icon { width: 1.25rem; height: 1.25rem; }
.cb-mk-cart-panel__per-person { align-self: flex-end; font: var(--cb-mk-text-label-s); }
.cb-mk-cart-panel__secure { display: inline-flex; align-items: center; justify-content: center; gap: var(--cb-mk-space-2); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-cart-panel__close { display: none; }
.cb-mk-cart-panel__recipient { margin: 0; }

.cb-mk-cart-group { border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); }
.cb-mk-cart-group > summary { list-style: none; }
.cb-mk-cart-group > summary::-webkit-details-marker { display: none; }
.cb-mk-cart-group__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-4); cursor: pointer; }
.cb-mk-cart-group__copy { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-cart-group__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-cart-group__minimum { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); color: var(--cb-mk-color-text-warning); font: var(--cb-mk-text-label-s); }
.cb-mk-cart-group__minimum--met { color: var(--cb-mk-color-text-success); }
.cb-mk-cart-group__total { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); font: var(--cb-mk-text-price-m); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-mk-cart-group__total .cb-mk-icon { color: var(--cb-mk-color-text-secondary); transition: transform var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
.cb-mk-cart-group[open] .cb-mk-cart-group__total .cb-mk-icon { transform: rotate(180deg); }
.cb-mk-cart-group__lines { display: flex; flex-direction: column; margin: 0; padding: 0 var(--cb-mk-space-4) var(--cb-mk-space-3); list-style: none; }

.cb-mk-cart-item { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); padding: var(--cb-mk-space-3) 0; border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-cart-item__row { display: flex; align-items: center; gap: var(--cb-mk-space-2); }
.cb-mk-cart-item__main { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--cb-mk-space-3); min-width: 0; padding: var(--cb-mk-space-2); margin: calc(var(--cb-mk-space-2) * -1); border: 0; border-radius: var(--cb-mk-radius-sm); background: none; color: inherit; font: var(--cb-mk-text-body-s); text-align: left; text-decoration: none; }
button.cb-mk-cart-item__main,
a.cb-mk-cart-item__main { cursor: pointer; }
button.cb-mk-cart-item__main:hover,
a.cb-mk-cart-item__main:hover { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-cart-item__qty { display: grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 var(--cb-mk-space-2); border-radius: var(--cb-mk-radius-sm); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-accent); font: var(--cb-mk-text-label-s); font-variant-numeric: tabular-nums; }
.cb-mk-cart-item__name { font: var(--cb-mk-text-label-m); }
.cb-mk-cart-item__price { font: var(--cb-mk-text-price-m); font-variant-numeric: tabular-nums; }
.cb-mk-cart-item__remove { margin: 0; }
.cb-mk-cart-item__meta { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); padding-left: calc(1.75rem + var(--cb-mk-space-3)); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-cart-item__meta .cb-mk-icon { width: 0.75rem; height: 0.75rem; }
.cb-mk-cart-tip { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); padding: var(--cb-mk-space-2) 0; }

/* ==========================================================================
   Ordering patterns added October 26, 2026: people picker, share card,
   checklist, payment option, rating input, compare, month calendar, and
   the script-opened overlay
   ========================================================================== */

/* Overlay opened by a page script (a hidden div, not <dialog>): share link, add guest */
.cb-mk-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--cb-mk-space-5); }
.cb-mk-overlay[hidden] { display: none; }
.cb-mk-overlay__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--cb-mk-color-bg-scrim) 48%, transparent); }
.cb-mk-overlay__panel { position: relative; display: flex; flex-direction: column; width: min(100%, 36rem); max-height: min(100%, 46rem); overflow: hidden; border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); color: var(--cb-mk-color-text-primary); box-shadow: var(--cb-mk-shadow-overlay); }
.cb-mk-overlay__panel > .cb-mk-modal__panel { flex: 1; min-height: 0; }
.cb-mk-overlay__panel--lg { width: min(100%, 40rem); }

/* People picker */
.cb-mk-picker { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); min-width: 0; }
.cb-mk-picker__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-picker__count { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); font-variant-numeric: tabular-nums; }
.cb-mk-picker__list { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); margin: 0; padding: 0; list-style: none; }
.cb-mk-picker__empty { padding: var(--cb-mk-space-6) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-page); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); text-align: center; }
.cb-mk-picker-row { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-height: var(--cb-mk-control-height-lg); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); cursor: pointer; }
.cb-mk-picker-row[hidden] { display: none; }
.cb-mk-picker-row:hover { border-color: var(--cb-mk-color-border-strong); }
.cb-mk-picker-row:has(input:checked:not(:disabled)) { border-color: var(--cb-mk-color-border-brand); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-brand); background: var(--cb-mk-color-bg-surface); }
.cb-mk-picker-row--locked,
.cb-mk-picker-row--disabled { background: var(--cb-mk-color-bg-page); cursor: default; }
.cb-mk-picker-row--locked:hover,
.cb-mk-picker-row--disabled:hover { border-color: var(--cb-mk-color-border-default); }
.cb-mk-picker-row--disabled .cb-mk-picker-row__title { color: var(--cb-mk-color-text-secondary); }
.cb-mk-picker-row > .cb-mk-check { flex: none; }
.cb-mk-picker-row__body { display: flex; flex: 1; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-picker-row__title { font: var(--cb-mk-text-body-m-strong); overflow-wrap: break-word; }
.cb-mk-picker-row__meta { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); overflow-wrap: break-word; }
.cb-mk-picker-row .cb-mk-avatar--brand .cb-mk-icon { width: 1rem; height: 1rem; }

/* Share link and QR card */
.cb-mk-share-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--cb-mk-space-gap-lg); align-items: start; }
.cb-mk-share-card__qr { display: flex; flex-direction: column; align-items: center; gap: var(--cb-mk-space-2); margin: 0; padding: var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); }
.cb-mk-share-card__qr img { display: block; width: 11rem; height: 11rem; image-rendering: pixelated; }
.cb-mk-share-card__qr figcaption { display: inline-flex; align-items: center; gap: var(--cb-mk-space-1); }
.cb-mk-share-card__body { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); min-width: 0; }
.cb-mk-copy-field { display: flex; gap: var(--cb-mk-space-2); min-width: 0; }
.cb-mk-copy-field .cb-mk-input { flex: 1; min-width: 0; text-overflow: ellipsis; }
.cb-mk-copy-field .cb-mk-button { flex: none; }
.cb-mk-share-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--cb-mk-space-gap-sm); margin: 0; }
.cb-mk-share-card__facts > div { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); padding: var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-page); }
.cb-mk-share-card__facts dt { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); }
.cb-mk-share-card__facts dd { margin: 0; font: var(--cb-mk-text-body-m-strong); }

/* Steps-remaining checklist */
.cb-mk-checklist { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); }
.cb-mk-checklist__head { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-checklist__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-checklist__items { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); margin: 0; padding: 0; list-style: none; }
.cb-mk-checklist__item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: center; gap: var(--cb-mk-space-2) var(--cb-mk-space-gap-sm); }
.cb-mk-checklist__item > .cb-mk-button { grid-column: 2; justify-self: start; }
.cb-mk-checklist__marker { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--cb-mk-color-border-strong); border-radius: var(--cb-mk-radius-full); font: var(--cb-mk-text-label-s); font-variant-numeric: tabular-nums; }
.cb-mk-checklist__marker .cb-mk-icon { width: 0.875rem; height: 0.875rem; }
.cb-mk-checklist__text { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); font: var(--cb-mk-text-body-s); }
.cb-mk-checklist__text small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-checklist__item[data-state="done"] .cb-mk-checklist__marker { border-color: var(--cb-mk-color-bg-brand); background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-checklist__item[data-state="done"] .cb-mk-checklist__text { color: var(--cb-mk-color-text-secondary); text-decoration: line-through; }
.cb-mk-checklist__item[data-state="blocked"] .cb-mk-checklist__marker { border-color: var(--cb-mk-color-border-danger); color: var(--cb-mk-color-text-danger); }

/* Saved payment method */
.cb-mk-payment-options { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.cb-mk-payment-option { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-height: 4rem; padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); color: inherit; text-decoration: none; cursor: pointer; }
.cb-mk-payment-option:hover { border-color: var(--cb-mk-color-border-strong); }
.cb-mk-payment-option:has(input:checked) { border-color: var(--cb-mk-color-border-brand); box-shadow: inset 0 0 0 1px var(--cb-mk-color-border-brand); background: var(--cb-mk-color-bg-surface); }
.cb-mk-payment-option--disabled { cursor: not-allowed; opacity: 0.7; }
.cb-mk-payment-option > .cb-mk-radio { flex: none; }
.cb-mk-payment-option__tile { display: grid; place-items: center; flex: none; width: 4rem; height: 2.25rem; border-radius: var(--cb-mk-radius-sm); background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); font: var(--cb-mk-text-overline); text-transform: uppercase; }
.cb-mk-payment-option[data-kind="bank"] .cb-mk-payment-option__tile { background: var(--cb-mk-color-bg-info-soft); color: var(--cb-mk-color-text-info); }
.cb-mk-payment-option[data-kind="invoice"] .cb-mk-payment-option__tile { background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); }
.cb-mk-payment-option__body { display: flex; flex: 1; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-payment-option__title { font: var(--cb-mk-text-body-m-strong); overflow-wrap: break-word; }
.cb-mk-payment-option__detail { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-payment-option--add { border-style: dashed; background: transparent; }
.cb-mk-payment-option--summary,
.cb-mk-payment-option--summary:hover { border-color: var(--cb-mk-color-border-default); background: var(--cb-mk-color-bg-raised); cursor: default; }
.cb-mk-payment-option--add .cb-mk-payment-option__tile { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-primary); }

/* Star rating input */
.cb-mk-rating-input { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.cb-mk-rating-input__legend { padding: 0; font: var(--cb-mk-text-body-m-strong); }
.cb-mk-rating-input__stars { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-1); }
.cb-mk-rating-input__star { position: relative; display: grid; place-items: center; width: var(--cb-mk-control-height); height: var(--cb-mk-control-height); border-radius: var(--cb-mk-radius-full); color: var(--cb-mk-color-border-strong); cursor: pointer; }
.cb-mk-rating-input__star input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cb-mk-rating-input__star .cb-mk-icon { width: 1.75rem; height: 1.75rem; fill: transparent; transition: color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease), fill var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
.cb-mk-rating-input__star:has(input:focus-visible) { box-shadow: var(--cb-mk-focus-ring); }
/* Fill the chosen star and every star before it; while hovering, preview up to the hovered star. */
.cb-mk-rating-input__star:has(input:checked),
.cb-mk-rating-input__star:has(~ .cb-mk-rating-input__star input:checked),
.cb-mk-rating-input__stars:hover .cb-mk-rating-input__star:hover,
.cb-mk-rating-input__stars:hover .cb-mk-rating-input__star:has(~ .cb-mk-rating-input__star:hover) { color: var(--cb-mk-color-text-warning); }
.cb-mk-rating-input__star:has(input:checked) .cb-mk-icon,
.cb-mk-rating-input__star:has(~ .cb-mk-rating-input__star input:checked) .cb-mk-icon,
.cb-mk-rating-input__stars:hover .cb-mk-rating-input__star:hover .cb-mk-icon,
.cb-mk-rating-input__stars:hover .cb-mk-rating-input__star:has(~ .cb-mk-rating-input__star:hover) .cb-mk-icon { fill: currentColor; }
.cb-mk-rating-input__stars:hover .cb-mk-rating-input__star:hover ~ .cb-mk-rating-input__star { color: var(--cb-mk-color-border-strong); }
.cb-mk-rating-input__stars:hover .cb-mk-rating-input__star:hover ~ .cb-mk-rating-input__star .cb-mk-icon { fill: transparent; }
.cb-mk-rating-input__words { margin-left: var(--cb-mk-space-2); font: var(--cb-mk-text-label-m); }
.cb-mk-rating-input__words > span { display: none; }
.cb-mk-rating-input:has(input[value="1"]:checked) .cb-mk-rating-input__words > [data-value="1"],
.cb-mk-rating-input:has(input[value="2"]:checked) .cb-mk-rating-input__words > [data-value="2"],
.cb-mk-rating-input:has(input[value="3"]:checked) .cb-mk-rating-input__words > [data-value="3"],
.cb-mk-rating-input:has(input[value="4"]:checked) .cb-mk-rating-input__words > [data-value="4"],
.cb-mk-rating-input:has(input[value="5"]:checked) .cb-mk-rating-input__words > [data-value="5"] { display: inline; }
.cb-mk-rating-input--sm .cb-mk-rating-input__star { width: var(--cb-mk-control-height-sm); height: var(--cb-mk-control-height-sm); }
.cb-mk-rating-input--sm .cb-mk-rating-input__star .cb-mk-icon { width: 1.25rem; height: 1.25rem; }
.cb-mk-rating-input--sm .cb-mk-rating-input__words { font: var(--cb-mk-text-label-s); }

/* Before and after comparison */
.cb-mk-compare { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-4); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-raised); }
.cb-mk-compare__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cb-mk-space-1) var(--cb-mk-space-gap-sm); }
.cb-mk-compare__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-compare__values { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--cb-mk-space-2); margin: 0; }
.cb-mk-compare__values > div { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; padding: var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-sm); }
.cb-mk-compare__values dt { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-overline); text-transform: uppercase; }
.cb-mk-compare__values dd { margin: 0; font: var(--cb-mk-text-body-s); overflow-wrap: break-word; }
.cb-mk-compare__before { background: var(--cb-mk-color-bg-page); }
.cb-mk-compare__before dd { color: var(--cb-mk-color-text-secondary); }
.cb-mk-compare__after { background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-compare__after dd { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-compare__arrow { display: grid; place-items: center; color: var(--cb-mk-color-text-secondary); }
.cb-mk-compare > .cb-mk-chip { align-self: flex-start; }

/* Month calendar with events */
.cb-mk-month { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); min-width: 0; }
.cb-mk-month__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-month__grid { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); }
.cb-mk-month__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cb-mk-month--weekdays .cb-mk-month__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cb-mk-month__row + .cb-mk-month__row { border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-month__weekday { padding: var(--cb-mk-space-2) var(--cb-mk-space-3); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); text-align: left; }
.cb-mk-month__day { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; min-height: 6.5rem; padding: var(--cb-mk-space-2); }
.cb-mk-month__day + .cb-mk-month__day { border-left: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-month__date { position: relative; display: inline-grid; place-items: center; align-self: flex-start; min-width: 1.75rem; height: 1.75rem; border-radius: var(--cb-mk-radius-full); font: var(--cb-mk-text-label-s); font-variant-numeric: tabular-nums; }
.cb-mk-month__day[aria-current="date"] .cb-mk-month__date { background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-month__day--outside { background: var(--cb-mk-color-bg-page); }
.cb-mk-month__day--outside .cb-mk-month__date { color: var(--cb-mk-color-text-disabled); }
.cb-mk-month__day--closed { background: var(--cb-mk-color-bg-sunken); }
.cb-mk-month__day--closed .cb-mk-month__date { color: var(--cb-mk-color-text-secondary); }
.cb-mk-month__closed { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-month__event { display: flex; flex-direction: column; min-width: 0; padding: var(--cb-mk-space-1) var(--cb-mk-space-2); border-left: 3px solid var(--cb-mk-color-border-brand); border-radius: var(--cb-mk-radius-sm); background: var(--cb-mk-color-bg-accent-soft); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-s); text-decoration: none; overflow-wrap: anywhere; }
.cb-mk-month__event small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-month__more { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-month__more > summary { color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-label-s); list-style: none; cursor: pointer; }
.cb-mk-month__more > summary::-webkit-details-marker { display: none; }
.cb-mk-month__more[open] > summary { order: 1; }
a.cb-mk-month__event:hover { background: var(--cb-mk-color-bg-accent); }
.cb-mk-month__event[data-tone="warning"] { border-left-color: var(--cb-mk-color-text-warning); background: var(--cb-mk-color-bg-warning-soft); }
.cb-mk-month__event[data-tone="danger"] { border-left-color: var(--cb-mk-color-border-danger); background: var(--cb-mk-color-bg-danger-soft); }
.cb-mk-month__event[data-tone="info"] { border-left-color: var(--cb-mk-color-text-info); background: var(--cb-mk-color-bg-info-soft); }
.cb-mk-month__event[data-tone="success"] { border-left-color: var(--cb-mk-color-text-success); background: var(--cb-mk-color-bg-success-soft); }
.cb-mk-month__event[data-tone="neutral"] { border-left-color: var(--cb-mk-color-border-strong); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-month__agenda { display: none; margin: 0; padding: 0; list-style: none; }
.cb-mk-month__agenda li { display: flex; align-items: center; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-3) 0; border-bottom: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-month__agenda-date { display: flex; flex: none; flex-direction: column; align-items: center; width: 2.75rem; padding: var(--cb-mk-space-1); border-radius: var(--cb-mk-radius-sm); background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-month__agenda-date small { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-month__agenda-date strong { font: var(--cb-mk-text-label-m); }
.cb-mk-month__agenda-body { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-month__agenda-body a { color: inherit; }

@media (max-width: 47.99rem) {
    .cb-mk-picker-row { flex-wrap: wrap; row-gap: var(--cb-mk-space-1); }
    .cb-mk-picker-row > .cb-mk-chip { margin-left: calc(1.25rem + 2.25rem + var(--cb-mk-space-gap-sm) * 2); }
    /* Payment option / Invoice phone, Figma 355:2089. Keep the status out of
       the text column's width calculation; flex-basis:0 previously crushed it. */
    .cb-mk-payment-option:not(.cb-mk-payment-option--add) { display: grid; grid-template-columns: 1.25rem 4rem minmax(0, 1fr); row-gap: var(--cb-mk-space-1); }
    .cb-mk-payment-option > .cb-mk-chip { grid-column: 3; justify-self: start; margin-left: 0; }
    .cb-mk-payment-option--summary:not(.cb-mk-payment-option--add) { grid-template-columns: 4rem minmax(0, 1fr); }
    .cb-mk-payment-option--summary > .cb-mk-chip { grid-column: 2; }
    .cb-mk-month__closed { display: none; }
    .cb-mk-share-card { grid-template-columns: minmax(0, 1fr); }
    .cb-mk-share-card__qr { justify-self: center; }
    .cb-mk-compare__values { grid-template-columns: minmax(0, 1fr); }
    .cb-mk-compare__arrow { transform: rotate(90deg); }
    .cb-mk-month__weekday { padding: var(--cb-mk-space-2) 0; text-align: center; }
    .cb-mk-month__day { align-items: center; min-height: 3rem; padding: var(--cb-mk-space-1); }
    .cb-mk-month__date { align-self: center; }
    .cb-mk-month__event,
    .cb-mk-month__more { display: none; }
    .cb-mk-month__day--has-events .cb-mk-month__date::after { content: ""; position: absolute; bottom: -0.375rem; left: 50%; width: 0.375rem; height: 0.375rem; margin-left: -0.1875rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-brand); }
    .cb-mk-month__agenda { display: block; }
    .cb-mk-overlay { place-items: end stretch; padding: 0; }
    .cb-mk-overlay__panel { width: 100%; max-height: 92%; border-radius: var(--cb-mk-radius-xl) var(--cb-mk-radius-xl) 0 0; box-shadow: var(--cb-mk-shadow-sheet); }
}

/* ==========================================================================
   Settings, people, inbox and reports (October 30, 2026; Figma: Forms / Setting row; Data / Person,
   Notification row, Bar row, Matrix cell, Preference matrix; Navigation / Section nav)
   ========================================================================== */

/* Setting row: the explanation on the left, the control on the right. */
.cb-mk-settings { display: flex; flex-direction: column; min-width: 0; }
.cb-mk-setting-row { display: flex; align-items: center; gap: var(--cb-mk-space-gap-lg); padding: var(--cb-mk-space-5) 0; border-bottom: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-setting-row:first-child { padding-top: 0; }
.cb-mk-setting-row:last-child { padding-bottom: 0; border-bottom: 0; }
.cb-mk-setting-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--cb-mk-space-1); overflow-wrap: anywhere; }
.cb-mk-setting-row__title { font: var(--cb-mk-text-label-m); color: var(--cb-mk-color-text-primary); }
.cb-mk-setting-row__description { font: var(--cb-mk-text-body-s); color: var(--cb-mk-color-text-secondary); }
.cb-mk-setting-row__control { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--cb-mk-space-gap-sm); max-width: 60%; }
.cb-mk-setting-row__control > .cb-mk-select { min-width: 12rem; }
.cb-mk-setting-row__control.cb-mk-field { align-items: flex-start; }
.cb-mk-setting-row__value { font: var(--cb-mk-text-body-m); color: var(--cb-mk-color-text-primary); text-align: right; overflow-wrap: anywhere; }
.cb-mk-setting-row__locked { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); white-space: nowrap; }

/* Preference matrix: events or settings against channels or roles. */
.cb-mk-matrix-wrap { overflow-x: auto; border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); }
.cb-mk-matrix { width: 100%; border-collapse: collapse; font: var(--cb-mk-text-body-s); }
.cb-mk-matrix th,
.cb-mk-matrix td { padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-field); border-bottom: 1px solid var(--cb-mk-color-border-default); vertical-align: middle; }
.cb-mk-matrix thead th { padding-block: var(--cb-mk-space-3); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); text-align: center; white-space: nowrap; }
.cb-mk-matrix thead th:first-child { text-align: left; }
.cb-mk-matrix tbody th { font-weight: inherit; text-align: left; }
.cb-mk-matrix td { width: 6.5rem; text-align: center; }
.cb-mk-matrix tbody tr:last-child > * { border-bottom: 0; }
.cb-mk-matrix tr[data-state="dirty"] > * { background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-matrix__title { display: block; font: var(--cb-mk-text-label-m); color: var(--cb-mk-color-text-primary); }
.cb-mk-matrix__description { display: block; margin-top: var(--cb-mk-space-1); font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-matrix__required { display: inline-flex; align-items: center; gap: var(--cb-mk-space-2); color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-label-s); white-space: nowrap; }
.cb-mk-matrix__none { font-size: 0; }
.cb-mk-matrix__none::before { content: "\2014"; color: var(--cb-mk-color-text-disabled); font: var(--cb-mk-text-body-m); }
.cb-mk-check--bare { gap: 0; justify-content: center; vertical-align: middle; }

/* Person: initials avatar, name, email under it. */
.cb-mk-person { display: inline-flex; align-items: center; gap: var(--cb-mk-space-gap-sm); min-width: 0; max-width: 100%; vertical-align: middle; text-align: left; }
.cb-mk-person__text { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-person__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-2) var(--cb-mk-space-3); min-width: 0; font: var(--cb-mk-text-label-m); color: var(--cb-mk-color-text-primary); overflow-wrap: anywhere; }
.cb-mk-person__email { overflow: hidden; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); text-overflow: ellipsis; white-space: nowrap; }
.cb-mk-person--invited .cb-mk-avatar { border: 1px dashed var(--cb-mk-color-border-strong); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); }

/* Notification row: an inbox entry. */
.cb-mk-notifications { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); margin: 0; padding: 0; list-style: none; }
.cb-mk-notification { position: relative; display: flex; align-items: flex-start; gap: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-4) var(--cb-mk-space-inset-field); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-lg); background: var(--cb-mk-color-bg-surface); color: inherit; text-decoration: none; transition: border-color var(--cb-mk-motion-fast) var(--cb-mk-motion-ease); }
a.cb-mk-notification:hover { border-color: var(--cb-mk-color-border-strong); }
.cb-mk-notification[aria-current="true"] { border-color: var(--cb-mk-color-border-brand); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-notification__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--cb-mk-space-1); }
.cb-mk-notification__title { font: var(--cb-mk-text-body-m); color: var(--cb-mk-color-text-primary); overflow-wrap: anywhere; }
.cb-mk-notification[data-state="unread"] .cb-mk-notification__title { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-notification__text { display: -webkit-box; overflow: hidden; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cb-mk-notification__meta { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-notification__dot { flex: none; width: 0.5rem; height: 0.5rem; margin-top: var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-brand); }
.cb-mk-notification[data-state="read"] .cb-mk-notification__dot { visibility: hidden; }

/* Section nav: a column beside the content from 64rem, a row of pills below it. */
.cb-mk-with-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cb-mk-space-gap-lg); align-items: start; }
.cb-mk-with-nav__content { min-width: 0; }
.cb-mk-section-nav { display: flex; gap: var(--cb-mk-space-3); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cb-mk-section-nav::-webkit-scrollbar { display: none; }
.cb-mk-section-nav__item { display: inline-flex; flex: none; align-items: center; gap: var(--cb-mk-space-3); padding: var(--cb-mk-space-3) var(--cb-mk-space-5); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-surface); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-s); text-decoration: none; white-space: nowrap; }
.cb-mk-section-nav__item > .cb-mk-icon { display: none; }
.cb-mk-section-nav__count { color: var(--cb-mk-color-text-secondary); font-variant-numeric: tabular-nums; }
.cb-mk-section-nav__item:is([aria-current="page"], [aria-current="true"]) { border-color: transparent; background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
.cb-mk-section-nav__item:is([aria-current="page"], [aria-current="true"]) .cb-mk-section-nav__count { color: var(--cb-mk-color-text-on-brand); }
@media (min-width: 64rem) {
    .cb-mk-with-nav { grid-template-columns: 15rem minmax(0, 1fr); }
    .cb-mk-section-nav { position: sticky; top: var(--cb-mk-space-7); flex-direction: column; gap: var(--cb-mk-space-1); overflow: visible; }
    .cb-mk-section-nav__item { gap: var(--cb-mk-space-4); padding: var(--cb-mk-space-3) var(--cb-mk-space-4); border: 0; border-radius: var(--cb-mk-radius-md); background: none; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-m); }
    .cb-mk-section-nav__item > .cb-mk-icon { display: inline-block; flex: none; width: 1.125rem; height: 1.125rem; }
    .cb-mk-section-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .cb-mk-section-nav__item:hover { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-primary); }
    .cb-mk-section-nav__item:is([aria-current="page"], [aria-current="true"]) { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-primary); }
    .cb-mk-section-nav__item:is([aria-current="page"], [aria-current="true"]) > .cb-mk-icon { color: var(--cb-mk-color-text-brand); }
    .cb-mk-section-nav__item:is([aria-current="page"], [aria-current="true"]) .cb-mk-section-nav__count { color: var(--cb-mk-color-text-secondary); }
}

/* Bar row: a ranked value with its bar. The value is always printed. */
.cb-mk-bar-list { display: flex; flex-direction: column; gap: var(--cb-mk-space-6); margin: 0; padding: 0; list-style: none; }
.cb-mk-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cb-mk-space-3) var(--cb-mk-space-gap); align-items: start; }
.cb-mk-bar-row__text { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; }
.cb-mk-bar-row__title { font: var(--cb-mk-text-label-m); color: var(--cb-mk-color-text-primary); overflow-wrap: anywhere; }
.cb-mk-bar-row__meta { font: var(--cb-mk-text-caption); color: var(--cb-mk-color-text-secondary); }
.cb-mk-bar-row__value { display: flex; flex-direction: column; align-items: flex-end; gap: var(--cb-mk-space-1); font: var(--cb-mk-text-label-m); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-mk-bar-row__secondary { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-bar-row__track { grid-column: 1 / -1; height: 0.5rem; overflow: hidden; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-bar-row__bar { display: block; width: var(--cb-mk-progress, 0%); max-width: 100%; height: 100%; border-radius: inherit; background: var(--cb-mk-color-bg-brand); transition: width var(--cb-mk-motion-base) var(--cb-mk-motion-ease); }
.cb-mk-bar-row[data-tone="accent"] .cb-mk-bar-row__bar { background: var(--cb-mk-color-bg-accent); }
.cb-mk-bar-row[data-tone="warning"] .cb-mk-bar-row__bar { background: var(--cb-mk-color-bg-warning); }

/* Sortable table header (Figma: Data / Table header cell, Sort=None, Ascending, Descending). */
.cb-mk-table th[aria-sort="none"] { color: var(--cb-mk-color-text-secondary); }
.cb-mk-table__sort .cb-mk-icon { opacity: 0.5; }
.cb-mk-table th:is([aria-sort="ascending"], [aria-sort="descending"]) .cb-mk-table__sort .cb-mk-icon { opacity: 1; color: var(--cb-mk-color-text-brand); }

/* ==========================================================================
   Rewards, receipt and card entry (Figma: Food / Stamps, Reward card, Receipt; Forms / Card entry)
   ========================================================================== */

.cb-mk-reward-grid { display: grid; gap: var(--cb-mk-space-gap-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.cb-mk-reward-card { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); min-width: 0; padding: var(--cb-mk-space-6); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); }
.cb-mk-reward-card[data-state="ready"] { border-color: var(--cb-mk-color-border-brand); }
.cb-mk-reward-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--cb-mk-space-3) var(--cb-mk-space-gap-sm); }
.cb-mk-reward-card__head > .cb-mk-avatar { grid-row: 1; grid-column: 1; }
.cb-mk-reward-card__who { display: contents; }
.cb-mk-reward-card__name { grid-row: 1; grid-column: 2; margin: 0; font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); overflow-wrap: anywhere; }
.cb-mk-reward-card__who > :not(.cb-mk-reward-card__name) { grid-row: 2; grid-column: 1 / -1; margin: 0; }
.cb-mk-reward-card__head > .cb-mk-chip { grid-row: 1; grid-column: 3; }
.cb-mk-reward-card__note { margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
.cb-mk-reward-card__credit { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); padding: var(--cb-mk-space-4) var(--cb-mk-space-5); border: 1px dashed var(--cb-mk-color-border-brand); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-accent-soft); }
.cb-mk-reward-card__code { font: var(--cb-mk-text-heading-3); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.cb-mk-reward-card__actions { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-gap-sm); margin-top: auto; }
.cb-mk-reward-card:is([data-state="used"], [data-state="expired"]) .cb-mk-reward-card__name { color: var(--cb-mk-color-text-secondary); }
.cb-mk-reward-card:is([data-state="used"], [data-state="expired"]) .cb-mk-reward-card__head > .cb-mk-avatar { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); }
.cb-mk-reward-card:is([data-state="used"], [data-state="expired"]) .cb-mk-stamps { opacity: 0.45; }
.cb-mk-stamps { display: flex; gap: var(--cb-mk-space-3); margin: 0; padding: 0; list-style: none; }
.cb-mk-stamps > li { flex: 1; height: 0.625rem; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-stamps > li[data-state="earned"] { background: var(--cb-mk-color-bg-brand); }
.cb-mk-stamps > li[data-state="pending"] { background: var(--cb-mk-color-bg-accent); }
.cb-mk-stamps--meter { display: block; }

/* Card entry: hosts the payment provider form. */
.cb-mk-card-entry { position: relative; min-height: 7.5rem; padding: var(--cb-mk-space-5); border: 1px solid var(--cb-mk-color-border-strong); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-surface); }
.cb-mk-card-entry[data-state="loading"]::before,
.cb-mk-card-entry[data-state="loading"]::after { content: ""; display: block; height: 2.5rem; border-radius: var(--cb-mk-radius-field); background: linear-gradient(90deg, var(--cb-mk-color-bg-sunken) 0%, var(--cb-mk-color-bg-surface) 50%, var(--cb-mk-color-bg-sunken) 100%); background-size: 200% 100%; animation: cb-mk-shimmer 1.4s linear infinite; }
.cb-mk-card-entry[data-state="loading"]::after { width: 65%; margin-top: var(--cb-mk-space-4); }
.cb-mk-card-entry[data-state="error"] { border-color: var(--cb-mk-color-border-danger); }
/* When the provider form never loaded there is nothing to frame: the alert next to it carries the message and Try again. */
.cb-mk-card-entry[data-state="error"]:empty { display: none; }

/* Receipt: a printable payment receipt or order summary (Figma: Food / Receipt), modeled on an invoice document. A white
   sheet on the page background: the brand and the title with the order reference over a hairline, the order facts, billed
   to and delivered to, the items grouped by caterer (quantity, the item with its options on a quiet second line, the
   amount), the totals beside how it was paid, notes and the support footer. Hairlines instead of fills, so it prints the
   same with background graphics off. Printing drops the toolbar and the sheet frame, uses its own page margins on Letter
   or A4 and never breaks inside an item, a caterer's heading and its first item, or the totals. */
[data-cb-ui="market"]:has(> .cb-mk-receipt) { margin: 0; min-height: 100vh; }
.cb-mk-receipt { page: cb-mk-receipt; display: flex; flex-direction: column; gap: var(--cb-mk-space-5); width: 100%; max-width: 54rem; margin: 0 auto; padding: var(--cb-mk-space-7) var(--cb-mk-space-5) var(--cb-mk-space-10); }
.cb-mk-receipt__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap); }
.cb-mk-receipt__sheet { display: flex; flex-direction: column; gap: var(--cb-mk-space-8); padding: var(--cb-mk-space-9) var(--cb-mk-space-10); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); box-shadow: var(--cb-mk-shadow-raised); }
.cb-mk-receipt__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--cb-mk-space-5) var(--cb-mk-space-gap); padding-bottom: var(--cb-mk-space-7); border-bottom: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-receipt__brand { display: inline-flex; align-items: center; gap: var(--cb-mk-space-3); color: var(--cb-mk-color-text-brand); font: var(--cb-mk-text-heading-3); letter-spacing: var(--cb-mk-tracking-heading-3); }
.cb-mk-receipt__brand img { width: 2.25rem; height: 2.25rem; }
.cb-mk-receipt__reference { display: flex; flex-direction: column; align-items: flex-end; gap: var(--cb-mk-space-1); min-width: 0; text-align: right; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
.cb-mk-receipt__reference strong { color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-m); font-variant-numeric: tabular-nums; }
.cb-mk-receipt__title { margin-bottom: var(--cb-mk-space-2); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-heading-2); letter-spacing: var(--cb-mk-tracking-heading-2); }
.cb-mk-receipt__parties { display: grid; gap: var(--cb-mk-space-6) var(--cb-mk-space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.cb-mk-receipt__parties > section { display: flex; flex-direction: column; gap: var(--cb-mk-space-1); min-width: 0; padding-top: var(--cb-mk-space-4); border-top: 1px solid var(--cb-mk-color-border-default); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); overflow-wrap: anywhere; }
.cb-mk-receipt__parties .cb-mk-overline { margin-bottom: var(--cb-mk-space-2); }
.cb-mk-receipt__party-name { color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-body-m-strong); }
.cb-mk-receipt__section { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); }
.cb-mk-receipt__section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--cb-mk-space-2) var(--cb-mk-space-gap); }
/* Items: one table, a tbody per caterer that starts with the caterer's row (name, item count, caterer subtotal). */
.cb-mk-receipt__items { width: 100%; border-collapse: collapse; font: var(--cb-mk-text-body-s); font-variant-numeric: tabular-nums; }
.cb-mk-receipt__items :is(th, td) { padding: var(--cb-mk-space-4) 0; border-bottom: 1px solid var(--cb-mk-color-border-default); text-align: left; vertical-align: top; }
.cb-mk-receipt__items thead th { padding-top: 0; padding-bottom: var(--cb-mk-space-3); border-bottom-color: var(--cb-mk-color-border-strong); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); }
.cb-mk-receipt__qty { width: 3rem; padding-right: var(--cb-mk-space-4); color: var(--cb-mk-color-text-secondary); }
.cb-mk-receipt__items .cb-mk-receipt__amount { width: 7.5rem; padding-left: var(--cb-mk-space-5); text-align: right; white-space: nowrap; }
.cb-mk-receipt__caterer > * { padding-top: var(--cb-mk-space-7); padding-bottom: var(--cb-mk-space-3); font: var(--cb-mk-text-label-m); }
.cb-mk-receipt__items tbody:first-of-type .cb-mk-receipt__caterer > * { padding-top: var(--cb-mk-space-5); }
.cb-mk-receipt__caterer th > span { margin-left: var(--cb-mk-space-3); white-space: nowrap; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-receipt__item { display: block; color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-label-m); }
.cb-mk-receipt__meta { display: block; margin-top: var(--cb-mk-space-1); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-receipt__empty { color: var(--cb-mk-color-text-secondary); }
/* Totals and payment: side by side from 40rem (payment on the left, totals on the right like an invoice), stacked below. */
.cb-mk-receipt__summary { display: grid; gap: var(--cb-mk-space-8); align-items: start; }
.cb-mk-receipt__payment { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); min-width: 0; }
.cb-mk-receipt__payment > .cb-mk-link { align-self: flex-start; }
.cb-mk-receipt__notes dl { display: grid; gap: var(--cb-mk-space-4) var(--cb-mk-space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); padding-top: var(--cb-mk-space-5); border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-receipt__notes dt { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); }
.cb-mk-receipt__notes dd { margin: var(--cb-mk-space-1) 0 0; font: var(--cb-mk-text-body-s); white-space: pre-wrap; overflow-wrap: anywhere; }
.cb-mk-receipt__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cb-mk-space-2) var(--cb-mk-space-gap); padding-top: var(--cb-mk-space-5); border-top: 1px solid var(--cb-mk-color-border-default); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-receipt__foot a { color: inherit; white-space: nowrap; }
@media (min-width: 40rem) {
    .cb-mk-receipt__summary { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--cb-mk-space-10); }
    .cb-mk-receipt__totals { grid-row: 1; grid-column: 2; }
    .cb-mk-receipt__payment { grid-row: 1; grid-column: 1; }
}
@media screen and (max-width: 47.99rem) {
    .cb-mk-receipt { padding: var(--cb-mk-space-5) var(--cb-mk-space-4) var(--cb-mk-space-8); }
    .cb-mk-receipt__sheet { gap: var(--cb-mk-space-7); padding: var(--cb-mk-space-6) var(--cb-mk-space-5); }
    .cb-mk-receipt__head { flex-direction: column; }
    .cb-mk-receipt__reference { align-items: flex-start; text-align: left; }
    .cb-mk-receipt__qty { width: 2rem; }
    .cb-mk-receipt__items .cb-mk-receipt__amount { width: auto; padding-left: var(--cb-mk-space-4); }
}
@page cb-mk-receipt { size: auto; margin: 14mm 15mm 16mm; }
/* Print sets the type a step smaller (13px root, about 9pt body) so a typical order fits one page. */
@media print {
    :root:has(.cb-mk-receipt) { font-size: 81.25%; }
    [data-cb-ui="market"]:has(> .cb-mk-receipt) { min-height: 0; background: none; }
    .cb-mk-receipt { max-width: none; padding: 0; }
    .cb-mk-receipt__toolbar { display: none; }
    .cb-mk-receipt__sheet { gap: var(--cb-mk-space-6); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .cb-mk-receipt__head { padding-bottom: var(--cb-mk-space-5); }
    .cb-mk-receipt__items :is(th, td) { padding-block: var(--cb-mk-space-3); }
    .cb-mk-receipt__items thead th { padding-top: 0; }
    .cb-mk-receipt__caterer > * { padding-top: var(--cb-mk-space-6); }
    .cb-mk-receipt__items tr,
    .cb-mk-receipt__parties,
    .cb-mk-receipt__summary,
    .cb-mk-receipt__notes,
    .cb-mk-receipt__foot { break-inside: avoid; }
    .cb-mk-receipt__head,
    .cb-mk-receipt__section-head,
    .cb-mk-receipt__caterer { break-after: avoid; }
    .cb-mk-receipt a { text-decoration: none; }
}

/* ==========================================================================
   Account panel: the sign-in frame (Figma: Containers / Account panel; _MarketAccountLayout)
   ========================================================================== */

.cb-mk-auth { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--cb-mk-color-bg-page); }
.cb-mk-auth__main { display: flex; flex-direction: column; gap: var(--cb-mk-space-8); min-width: 0; padding: var(--cb-mk-space-6) var(--cb-mk-space-5); }
.cb-mk-auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap); }
.cb-mk-auth__brand { display: inline-flex; align-items: center; gap: var(--cb-mk-space-3); color: var(--cb-mk-color-text-primary); font: var(--cb-mk-text-heading-4); letter-spacing: var(--cb-mk-tracking-heading-4); text-decoration: none; }
.cb-mk-auth__body { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 26rem; margin: 0 auto; outline: none; }
.cb-mk-auth__foot { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-3) var(--cb-mk-space-5); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-auth__foot .cb-mk-link { color: inherit; font: inherit; }
.cb-mk-auth__visual { display: none; }
.cb-mk-auth-form { display: flex; flex-direction: column; gap: var(--cb-mk-space-7); }
.cb-mk-auth-form__head { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); }
.cb-mk-auth-form__head > * { margin: 0; }
.cb-mk-auth-form__lead { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-m); }
.cb-mk-auth-form__form { display: flex; flex-direction: column; gap: var(--cb-mk-space-5); }
.cb-mk-auth-form__alt { margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); }
.cb-mk-auth-form__facts { padding: var(--cb-mk-space-5); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-sunken); }
.cb-mk-input--code { height: var(--cb-mk-control-height-lg); font: var(--cb-mk-text-number-l); font-variant-numeric: tabular-nums; letter-spacing: 0.4em; text-align: center; }
.cb-mk-code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-mk-space-3) var(--cb-mk-space-5); margin: 0; padding: var(--cb-mk-space-6); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-sunken); list-style: none; }
.cb-mk-code-list code { font: var(--cb-mk-text-label-m); font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.08em; }
@media (min-width: 64rem) {
    .cb-mk-auth { grid-template-columns: minmax(28rem, 1fr) minmax(0, 1fr); }
    .cb-mk-auth__main { padding: var(--cb-mk-space-8) var(--cb-mk-space-11); }
    .cb-mk-auth__body { margin: 0; }
    .cb-mk-auth__visual { position: relative; display: flex; align-items: flex-end; margin: var(--cb-mk-space-5) var(--cb-mk-space-5) var(--cb-mk-space-5) 0; overflow: hidden; border-radius: var(--cb-mk-radius-2xl); background: var(--cb-mk-color-bg-brand); color: var(--cb-mk-color-text-on-brand); }
    .cb-mk-auth__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
    .cb-mk-auth__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--cb-mk-color-bg-brand) 20%, transparent) 0%, var(--cb-mk-color-bg-brand) 92%); }
    .cb-mk-auth__story { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--cb-mk-space-5); max-width: 34rem; padding: var(--cb-mk-space-10); }
    .cb-mk-auth__tag { align-self: flex-start; padding: var(--cb-mk-space-2) var(--cb-mk-space-4); border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-accent); color: var(--cb-mk-color-text-on-accent); font: var(--cb-mk-text-label-s); }
    .cb-mk-auth__headline { margin: 0; font: var(--cb-mk-text-heading-2); letter-spacing: var(--cb-mk-tracking-heading-2); text-wrap: balance; }
    .cb-mk-auth__points { display: flex; flex-direction: column; gap: var(--cb-mk-space-4); margin: 0; padding: 0; list-style: none; font: var(--cb-mk-text-body-m); }
    .cb-mk-auth__points li { display: flex; align-items: center; gap: var(--cb-mk-space-4); }
    .cb-mk-auth__points .cb-mk-icon { flex: none; color: var(--cb-mk-color-bg-accent); }
}

@media (max-width: 47.99rem) {
    .cb-mk-setting-row { flex-wrap: wrap; gap: var(--cb-mk-space-3) var(--cb-mk-space-gap); }
    .cb-mk-setting-row:has(.cb-mk-setting-row__control > :is(.cb-mk-select, .cb-mk-input, .cb-mk-button, .cb-mk-field, .cb-mk-segmented)) .cb-mk-setting-row__control { flex-basis: 100%; max-width: none; justify-content: flex-start; }
    .cb-mk-setting-row__control > .cb-mk-select { flex: 1; min-width: 0; }
    .cb-mk-setting-row__value { text-align: left; }
    .cb-mk-matrix-wrap { overflow: visible; border: 0; background: none; }
    .cb-mk-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cb-mk-matrix,
    .cb-mk-matrix tbody { display: block; }
    .cb-mk-matrix tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--cb-mk-space-4) var(--cb-mk-space-gap-sm); margin-bottom: var(--cb-mk-space-gap-sm); padding: var(--cb-mk-space-5); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-card); background: var(--cb-mk-color-bg-surface); }
    .cb-mk-matrix tbody tr:last-child > *,
    .cb-mk-matrix th,
    .cb-mk-matrix td { padding: 0; border: 0; }
    .cb-mk-matrix tbody th { grid-column: 1 / -1; }
    .cb-mk-matrix td { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cb-mk-space-2); width: auto; text-align: left; }
    .cb-mk-matrix td::before { content: attr(data-label); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); }
    .cb-mk-matrix__none { color: var(--cb-mk-color-text-disabled); font: var(--cb-mk-text-caption); }
    .cb-mk-matrix__none::before { content: none; }
    .cb-mk-auth__main { padding: var(--cb-mk-space-5); }
}

/* The hidden attribute always wins over a component display: page scripts show and hide alerts, rows, pagination and error slots by toggling it. */
[class*="cb-mk-"][hidden],
.cb-mk-table-wrap .cb-mk-table [hidden] { display: none; }

/* On phones and tablets the Save bar sits above the app tab bar, which is also sticky at the bottom. */
@media (max-width: 63.99rem) {
    .cb-mk-app:has(.cb-mk-tabbar) .cb-mk-save-bar { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* Filters past search (Figma: Data / List toolbar): behind a chip on phones, so the list shows first; always shown from 48rem.
   citybites.market.js closes them on phones unless one is in use. */
.cb-mk-list-toolbar__more > summary { display: inline-flex; list-style: none; cursor: pointer; }
.cb-mk-list-toolbar__more > summary::-webkit-details-marker { display: none; }
.cb-mk-list-toolbar__more[open] > summary { margin-bottom: var(--cb-mk-space-gap-sm); }
.cb-mk-list-toolbar__more[open] > summary > .cb-mk-icon:last-child { transform: rotate(180deg); }
@media (min-width: 48rem) { .cb-mk-list-toolbar__more > summary { display: none; } }

/* Home layout (Figma: Examples / Desktop / Home, Desktop / Platform dashboard): the company and platform homes. Columns
   put the main cards beside narrower ones (2:1 from 64rem), the trail stacks an amount over its caption on the right of a
   list row, and a rank is the number tile that leads a ranked list row. */
.cb-mk-home__columns { display: grid; gap: var(--cb-mk-space-gap-lg); align-items: start; }
@media (min-width: 64rem) { .cb-mk-home__columns { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.cb-mk-home__trail { flex-direction: column; align-items: flex-end; gap: var(--cb-mk-space-1); color: var(--cb-mk-color-text-primary); }
.cb-mk-home__rank { font: var(--cb-mk-text-label-m); font-variant-numeric: tabular-nums; }

/* Organizer assignment (`_OrganizerAssignment`): the select and its button on one line, on the order page and in the
   admin order rail. */
.cb-mk-organizer-assignment { display: flex; gap: var(--cb-mk-space-2); align-items: center; }
.cb-mk-organizer-assignment .cb-mk-select { flex: 1; min-width: 0; }

/* Modal form (Figma: Dialog, Drawer): a <form> that holds a dialog's or drawer's body and foot, so the body scrolls while
   the head and the foot (Cancel and the main action) stay in view. Markup: .cb-mk-modal__panel > .cb-mk-modal__head +
   form.cb-mk-modal__form > .cb-mk-modal__body + .cb-mk-modal__foot. */
.cb-mk-modal__form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0; }

/* Detail layout (Figma: Examples / Desktop / Order page, Platform admin pages): the main column and a side rail of cards
   (the next action first, then facts) that follows the page from 64rem; one column below, the rail after the main column
   unless the page orders it first. */
.cb-mk-detail { display: grid; gap: var(--cb-mk-space-gap-lg); align-items: start; min-width: 0; }
.cb-mk-detail__main,
.cb-mk-detail__rail { display: flex; flex-direction: column; gap: var(--cb-mk-space-gap); min-width: 0; }
@media (min-width: 64rem) {
    .cb-mk-detail { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
    .cb-mk-detail__main { grid-column: 1; grid-row: 1; }
    .cb-mk-detail__rail { position: sticky; top: var(--cb-mk-space-6); grid-column: 2; grid-row: 1; }
}
/* --rail-first: the rail leads on phones (what the admin acts on, such as Approve on an access request). */
@media (max-width: 63.99rem) { .cb-mk-detail--rail-first > .cb-mk-detail__rail { order: -1; } }

/* Hours editor (Figma: Forms / Hours editor): one row per day, the day name with Add window on its right, then the day's
   time windows: a label, start, "to", end and remove. Below 32rem of its own width a window takes two lines, the label
   and remove, then the two times. Kitchens, storefronts and menus. */
.cb-mk-hours { container-type: inline-size; display: flex; flex-direction: column; }
.cb-mk-hours > .cb-mk-caption { margin: 0 0 var(--cb-mk-space-3); }
.cb-mk-hours__day { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); padding-block: var(--cb-mk-space-4); border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-hours__day:first-of-type { padding-top: 0; border-top: 0; }
.cb-mk-hours__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-hours__windows { display: flex; flex-direction: column; gap: var(--cb-mk-space-3); min-width: 0; }
.cb-mk-hours__window { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 10rem) auto minmax(8.5rem, 10rem) auto; align-items: center; gap: var(--cb-mk-space-3); }
.cb-mk-hours__to { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
@container (max-width: 32rem) {
    .cb-mk-hours__window { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .cb-mk-hours__name { grid-row: 1; grid-column: 1 / 3; }
    .cb-mk-hours__window > .cb-mk-icon-button { grid-row: 1; grid-column: 3; }
    .cb-mk-hours__to { display: none; }
}
/* Dispatch composition — Figma Operations / Route stop editor (332:275), composed from Stop row and Text field.
   These shared renderers keep their data hooks and business rules across classic and Market. */
.cb-mk-route-order-summary + .cb-mk-route-order-summary { border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-route-order-summary__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--cb-mk-space-gap-lg); padding: var(--cb-mk-space-inset-card); }
.cb-mk-route-order-summary__copy { min-width: 0; }
.cb-mk-route-order-summary__eyebrow { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-gap-sm); align-items: center; margin-bottom: var(--cb-mk-space-3); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-route-order-summary__reference { font: var(--cb-mk-text-label-s); }
.cb-mk-route-order-summary__copy h2 { margin: 0 0 var(--cb-mk-space-3); font: var(--cb-mk-text-heading-3); color: var(--cb-mk-color-text-primary); overflow-wrap: anywhere; }
.cb-mk-route-order-summary__copy p { margin: 0; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-body-s); overflow-wrap: anywhere; }
.cb-mk-route-order-summary__facts { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-gap-lg); margin: 0; }
.cb-mk-route-order-summary__facts dt { color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-route-order-summary__facts dd { margin: var(--cb-mk-space-2) 0 0; font: var(--cb-mk-text-heading-3); font-variant-numeric: tabular-nums; }
.cb-mk-route-order-summary__pickups, .cb-mk-route-order-summary__note, .cb-mk-route-order-summary__services { margin: 0; padding: var(--cb-mk-space-3) var(--cb-mk-space-inset-card); border-top: 1px solid var(--cb-mk-color-border-default); font: var(--cb-mk-text-body-s); overflow-wrap: anywhere; }
.cb-mk-route-order-summary__pickups { color: var(--cb-mk-color-text-secondary); }
.cb-mk-route-order-summary__note { background: var(--cb-mk-color-bg-attention-soft); color: var(--cb-mk-color-text-attention); }
.cb-mk-route-order-summary__services summary { cursor: pointer; font: var(--cb-mk-text-label-m); }
.cb-mk-route-stop-row { margin-top: var(--cb-mk-space-gap-sm); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); background: var(--cb-mk-color-bg-surface); list-style: none; min-width: 0; }
.cb-mk-route-stop-row__summary { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto 1rem; gap: var(--cb-mk-space-3); align-items: start; padding: var(--cb-mk-space-inset-field); cursor: pointer; list-style: none; }
.cb-mk-route-stop-row__summary::-webkit-details-marker { display: none; }
.cb-mk-route-stop-row__summary:focus-visible { outline: none; border-radius: var(--cb-mk-radius-field); box-shadow: var(--cb-mk-focus-ring); }
.cb-mk-route-stop__marker { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none; border-radius: var(--cb-mk-radius-full); background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-label-s); }
.cb-mk-route-stop-row__copy { min-width: 0; overflow-wrap: anywhere; }
.cb-mk-route-stop-row__heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-route-stop-row__heading strong { font: var(--cb-mk-text-body-m-strong); }
.cb-mk-route-stop-row__address { margin: var(--cb-mk-space-2) 0; font: var(--cb-mk-text-body-s); }
.cb-mk-route-stop-row__copy > small, .cb-mk-route-stop-row__time small { display: block; color: var(--cb-mk-color-text-secondary); font: var(--cb-mk-text-caption); }
.cb-mk-route-stop-row__time { text-align: right; font-variant-numeric: tabular-nums; }
.cb-mk-route-stop-row__time time { display: block; font: var(--cb-mk-text-heading-4); }
.cb-mk-route-stop-row__chevron { width: 0.5rem; height: 0.5rem; margin-top: var(--cb-mk-space-3); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.cb-mk-route-stop-row > details[open] > summary .cb-mk-route-stop-row__chevron { transform: rotate(225deg); }
.cb-mk-route-stop-row__status { grid-column: 2 / -1; }
.cb-mk-route-stop-row.has-conflict { border-color: var(--cb-mk-color-border-danger); }
.cb-mk-route-stop-row__body { padding: var(--cb-mk-space-inset-field); border-top: 1px solid var(--cb-mk-color-border-default); container-type: inline-size; }
.cb-mk-route-stop-row__timing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cb-mk-space-gap); }
.cb-mk-route-stop-row__timing .cb-mk-field { min-width: 0; }
.cb-mk-route-stop-row__timing input[readonly] { background: var(--cb-mk-color-bg-sunken); color: var(--cb-mk-color-text-secondary); }
.cb-mk-route-stop__status { margin-top: var(--cb-mk-space-gap-sm); font: var(--cb-mk-text-body-s); }
.cb-mk-route-stop__status > span { display: block; }
.cb-mk-route-stop-row__orders { margin-top: var(--cb-mk-space-gap); }
.cb-mk-route-stop-row__orders > summary { padding-block: var(--cb-mk-space-3); cursor: pointer; font: var(--cb-mk-text-label-m); }
.cb-mk-route-stop-row__order { display: flex; flex-direction: column; gap: var(--cb-mk-space-2); padding-block: var(--cb-mk-space-3); font: var(--cb-mk-text-body-s); overflow-wrap: anywhere; }
.cb-mk-route-stop-row__order + .cb-mk-route-stop-row__order { border-top: 1px solid var(--cb-mk-color-border-default); }
.cb-mk-route-readiness, .cb-mk-route-stop__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cb-mk-space-gap-sm); }
.cb-mk-route-stop__controls { margin-top: var(--cb-mk-space-gap); }
.cb-mk-route-timing-mode { display: flex; flex-wrap: wrap; gap: var(--cb-mk-space-gap-sm); padding: 0; margin: var(--cb-mk-space-2) 0 0; border: 0; }
.cb-mk-route-timing-mode label { display: flex; gap: var(--cb-mk-space-2); align-items: center; min-height: var(--cb-mk-control-height-sm); padding: var(--cb-mk-space-2) var(--cb-mk-space-3); border: 1px solid var(--cb-mk-color-border-default); border-radius: var(--cb-mk-radius-field); font: var(--cb-mk-text-label-s); cursor: pointer; }
.cb-mk-route-timing-mode label:has(:checked) { background: var(--cb-mk-color-bg-success-soft); color: var(--cb-mk-color-text-success); border-color: var(--cb-mk-color-border-brand); }
.cb-mk-route-timing-mode input { margin: 0; accent-color: var(--cb-mk-color-bg-brand); }
.cb-mk-route-notice { display: block; margin-top: var(--cb-mk-space-2); padding: var(--cb-mk-space-2) var(--cb-mk-space-3); border-radius: var(--cb-mk-radius-sm); font: var(--cb-mk-text-caption); background: var(--cb-mk-color-bg-info-soft); color: var(--cb-mk-color-text-info); }
.cb-mk-route-notice:empty { display: none; }
.cb-mk-route-notice--warning { background: var(--cb-mk-color-bg-attention-soft); color: var(--cb-mk-color-text-attention); }
.cb-mk-route-notice--danger { background: var(--cb-mk-color-bg-danger-soft); color: var(--cb-mk-color-text-danger); }
.cb-mk-route-notice--success { background: var(--cb-mk-color-bg-success-soft); color: var(--cb-mk-color-text-success); }
@media (max-width: 74rem) { .cb-mk-route-order-summary__main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.99rem) {
    .cb-mk-route-stop-row__summary { grid-template-columns: 1.75rem minmax(0, 1fr) 1rem; }
    .cb-mk-route-stop-row__time { grid-column: 2; text-align: left; }
    .cb-mk-route-stop-row__chevron { grid-column: 3; grid-row: 1; }
    .cb-mk-route-stop-row__timing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 36rem) { .cb-mk-route-stop-row__timing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 28rem) { .cb-mk-route-stop-row__timing { grid-template-columns: minmax(0, 1fr); } }