/* Orderly Design System bridge for orderly.co.ke (28 Oct 2026).
   Loads after https://web.orderly.co.ke/assets/ods/ods.css and maps the Orisa theme and the Orderly
   shortcodes onto the --o-* tokens. Every rule is scoped to html[data-orderly-theme], which only
   functions/orderly-ods.php sets, so this file changes nothing until the design system is switched on.
   Rules: colour from tokens only; cards are tone on tone (16px, no border, no shadow); pills 48px;
   no gradients, glows, halos, blur or looping motion. */

/* ---------- page ---------- */
/* the theme colours everything through these variables, so re-pointing them recolours it without fighting each rule */
html[data-orderly-theme] {
    --primary-color: #c4510a; --primary-color-rgb: 196, 81, 10; --at-theme-primary: #c4510a;
    --heading-color: var(--o-text); --body-text-color: var(--o-text-2);
    --link-color: var(--o-accent-deep); --link-hover-color: var(--o-text);
    --at-common-black: var(--o-text); --at-neutral-0: var(--o-bg); --at-neutral-500: var(--o-text-3);
}
html[data-orderly-theme] body { background: var(--o-bg); color: var(--o-text-2); }
html[data-orderly-theme] :is(main, .body-wrapper, #smooth-wrapper, #smooth-content, .bg-neutral-0, .bg-white) { background: var(--o-bg) !important; }
html[data-orderly-theme] :is(h1, h2, h3, h4, h5, h6) { color: var(--o-text); }
/* links in running text are orange words; links that wrap a card, a title or a whole block keep the text colour */
html[data-orderly-theme] :is(p, li) > a:not([class]) { color: var(--o-accent-deep); }
html[data-orderly-theme] :is(.oa-card, .oc2, .opick__card, .opl__card) a,
html[data-orderly-theme] :is(h1, h2, h3, h4, h5, h6) > a { color: inherit !important; }
/* card title and line: the design system's card type */
html[data-orderly-theme] :is(.oa-card, .oc2) :is(h3, h4, .h5) { color: var(--o-text) !important; font-size: 1.125rem !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; margin: 0 0 6px !important; }
html[data-orderly-theme] :is(.oa-card, .oc2) p { color: var(--o-text-2) !important; font-size: .9375rem !important; line-height: 1.5 !important; margin: 0 !important; }
/* the page markup carries empty duplicate links around and inside each card; on phones the theme gives every
   link a 40px tap height, which made the empty band between a card's title and its text */
html[data-orderly-theme] :is(.oa-card, .oc2) > a:empty,
html[data-orderly-theme] [class*="col-"] > a:empty { display: none !important; }
/* phones (swipe rows): a card is as tall as its words, content from the top */
@media (max-width: 991px) {
    html[data-orderly-theme] .row.o-rail-on { align-items: flex-start !important; }
    html[data-orderly-theme] .o-rail-on .oa-card.h-100 { height: auto !important; min-height: 0 !important; justify-content: flex-start !important; }
}
html[data-orderly-theme] :is(.bg-neutral-950, .bg-neutral-900, .bg-black) { background: var(--o-surface-2) !important; }
html[data-orderly-theme] .changeless :is(h1, h2, h3, h4, h5, h6) { color: var(--o-text) !important; }
html[data-orderly-theme] .changeless :is(p, li, span, a) { color: var(--o-text-2) !important; }

/* ---------- header ---------- */
html[data-orderly-theme] .at-header-area,
html[data-orderly-theme] .at-header-area.header-sticky { background: var(--o-bg) !important; box-shadow: none !important; border-bottom: 0 !important; }
html[data-orderly-theme] .at-main-menu nav > ul > li > a { color: var(--o-text-2) !important; font-weight: 600; }
html[data-orderly-theme] .at-main-menu nav > ul > li > a:hover,
html[data-orderly-theme] .at-main-menu nav > ul > li.active > a { color: var(--o-text) !important; }
html[data-orderly-theme] .at-main-menu .submenu,
html[data-orderly-theme] .at-main-menu .at-mega-menu { background: var(--o-surface) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--o-elev-2) !important; }
html[data-orderly-theme] .at-main-menu .submenu a { color: var(--o-text-2) !important; }
html[data-orderly-theme] :is(.at-header-cart-btn, .at-header-search-btn, .at-menu-bar, .hamburger-open-btn) { color: var(--o-text) !important; }
html[data-orderly-theme] :is(.at-header-cart-btn, .at-header-search-btn, .at-menu-bar) svg { stroke: currentColor; }
html[data-orderly-theme] .at-header-currency { color: var(--o-text-2) !important; border-color: var(--o-surface-3) !important; background: var(--o-surface-2) !important; }
/* the logo: the design-system wordmark, never a retyped name */
html[data-orderly-theme] .ods-logo-wrap { display: inline-flex; align-items: center; }
html[data-orderly-theme] .ods-logo { display: none; height: 34px; width: auto; max-width: none; filter: none !important; }
html[data-orderly-theme]:not([data-orderly-theme="dark"]) .ods-logo--light,
html[data-orderly-theme="dark"] .ods-logo--dark { display: block; }
html[data-orderly-theme] .ods-logo-wrap img:not(.ods-logo) { display: none !important; }
/* the header button: centred in the bar (Bootstrap's d-md-block would make it a top-aligned block) */
@media (min-width: 768px) {
    html[data-orderly-theme] .at-header-right .at-btn { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 18px; font-size: 14.5px; }
}
/* the wordmark is wider than the old logo: give it its own room before the menu */
@media (min-width: 1200px) {
    html[data-orderly-theme] .at-header-area .row.align-items-center { flex-wrap: nowrap; }
    html[data-orderly-theme] .at-header-area .row > .col-xl-1 { flex: 0 0 auto; width: auto; margin-right: 28px; }
    html[data-orderly-theme] .at-header-area .row > .col-xl-7 { flex: 1 1 auto; width: auto; min-width: 0; }
    html[data-orderly-theme] .at-header-area .row > .col-xl-4 { flex: 0 0 auto; width: auto; }
    html[data-orderly-theme] .at-header-right { flex-wrap: nowrap; }
}
/* the floating MENU pill only where the header nav is hidden (phones and tablets) */
@media (min-width: 992px) {
    html[data-orderly-theme] .hamburger-sticky-menu { display: none !important; }
}
/* 1280px: the nav, the language switch and the buttons all fit on one line */
@media (min-width: 1200px) and (max-width: 1439px) {
    html[data-orderly-theme] .at-main-menu nav > ul > li > a { font-size: 13.5px !important; padding-left: 0 !important; padding-right: 0 !important; }
    html[data-orderly-theme] .at-main-menu nav > ul > li { margin-right: 14px !important; }
    html[data-orderly-theme] :is(.at-header-cart-btn, .at-header-currency) { display: none !important; }
    html[data-orderly-theme] .at-header-right { gap: 10px !important; }
}

/* ---------- buttons: pills, 48px, orange fill only behind white words ---------- */
html[data-orderly-theme] .o-btn { min-height: 48px; padding: 0 22px; font-size: 15.5px; }
html[data-orderly-theme] :is(.at-btn, .ohero__btn, .oga__btn, .opl__btn, .os-cta, .opick__btn) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0 !important;
    background: var(--o-accent-solid) !important; color: #fff !important;
    font: 600 15.5px/1 var(--o-font); letter-spacing: 0;
    box-shadow: none !important; transform: none !important; transition: background-color 200ms ease-out;
}
html[data-orderly-theme] :is(.at-btn, .ohero__btn, .oga__btn, .opl__btn, .os-cta, .opick__btn):hover { background: var(--o-accent-solid-hover) !important; }
html[data-orderly-theme] :is(.ohero__btn--ghost, .at-header-right .at-btn, .opl__card:not(.is-pick) .opl__btn) {
    background: var(--o-surface-2) !important; color: var(--o-text) !important;
}
html[data-orderly-theme] :is(.ohero__btn--ghost, .at-header-right .at-btn, .opl__card:not(.is-pick) .opl__btn):hover { background: var(--o-surface-3) !important; }
html[data-orderly-theme] .at-btn::before, html[data-orderly-theme] .at-btn::after { display: none !important; }
/* the theme's text-link buttons (footer row, inline links) stay plain words */
html[data-orderly-theme] .at-btn.bg-transparent {
    min-height: 0; padding: 0 !important; border-radius: 0; background: transparent !important;
    color: var(--o-text-2) !important; opacity: 1 !important; font-size: 15px;
}
html[data-orderly-theme] .at-btn.bg-transparent:hover { background: transparent !important; color: var(--o-text) !important; }

/* ---------- chips: neutral facts ---------- */
/* the scenes' own status chips (.ost .o-chip: Paid, Preparing, New...) keep the design system's tones; only page chips go neutral */
html[data-orderly-theme] :is(.ohero__chips li, .oa-pill, .opick__chip, .os-chip, .o-chip:not(.ost .o-chip)) {
    background: var(--o-surface-2) !important; color: var(--o-text-2) !important;
    border: 0 !important; box-shadow: none !important; animation: none !important; transform: none !important;
}
html[data-orderly-theme] .oa-pill:hover { background: var(--o-surface-3) !important; color: var(--o-text) !important; }
/* The theme's own .o-chips / .o-chip / .o-more (the phone tab row over stacked panels, and its "show more" button)
   share names with ods.css: keep the theme's layout, take only the design-system colours. */
html[data-orderly-theme] .o-chips { display: none; flex-wrap: nowrap; justify-content: flex-start; margin-top: 0; }
@media (max-width: 767px) {
    html[data-orderly-theme] .o-chips { display: flex; overflow-x: auto; padding: 4px 12px 10px; margin: 0 -12px; }
    html[data-orderly-theme] .o-chips .o-chip { min-height: 44px; padding: 0 16px; font: 600 14px/1 var(--o-font); letter-spacing: 0; }
    html[data-orderly-theme] .o-more { border: 0 !important; border-radius: 999px; background: var(--o-surface-2); color: var(--o-text); min-height: 48px; }
}
/* the selected tab: ink, not orange (orange fills are for the one main action) */
html[data-orderly-theme] .o-chip[aria-selected="true"] { background: var(--o-text) !important; color: var(--o-bg) !important; }
/* the hero's facts */
html[data-orderly-theme] .ohero--ods .ohero__chips { display: flex !important; flex-wrap: wrap; justify-content: flex-start; gap: 8px; list-style: none; padding: 0; margin: 24px 0 0; }
html[data-orderly-theme] .ohero--ods .ohero__chips .o-chip { min-height: 32px; padding: 0 14px; font-size: 13.5px; letter-spacing: 0; }
html[data-orderly-theme] .ohero--ods .ohero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- cards: tone on tone, 16px, no border, no shadow ---------- */
html[data-orderly-theme] :is(.oc2, .oa-card, .oga__box, .opl__card, .opick__card, .at-faq-item, .accordion-item, .ocalc__box, .oqz, .card) {
    background: var(--o-surface) !important; color: var(--o-text-2);
    border: 0 !important; border-radius: 16px !important; box-shadow: none !important;
}
/* never a card in a card: inner panels become wells */
html[data-orderly-theme] :is(.oga__panel, .oga__tabs, .opl__head, .accordion-body) { background: var(--o-surface-2) !important; border: 0 !important; box-shadow: none !important; }
html[data-orderly-theme] .oga__tab { background: transparent !important; border: 0 !important; color: var(--o-text-2) !important; }
html[data-orderly-theme] .oga__tab.is-on { background: var(--o-surface) !important; color: var(--o-text) !important; }
html[data-orderly-theme] .accordion-button { background: transparent !important; color: var(--o-text) !important; box-shadow: none !important; }
html[data-orderly-theme] .oc2__num { background: var(--o-surface-2) !important; color: var(--o-text) !important; }

/* ---------- the hero (hero-banner style 7) ---------- */
html[data-orderly-theme] .ohero { background: var(--o-bg) !important; color: var(--o-text-2); padding: 140px 0 72px; }
html[data-orderly-theme] :is(.ohero__bg, .ohero__float, .orderly-orb) { display: none !important; }
html[data-orderly-theme] .ohero__eyebrow { color: var(--o-accent-deep) !important; letter-spacing: .12em; }
html[data-orderly-theme] .ohero__title { color: var(--o-text) !important; }
html[data-orderly-theme] .ohero__text { color: var(--o-text-2) !important; }
html[data-orderly-theme] .ohero__chips { gap: 8px; }
/* the product screen sits in a well: 16px, no border, no shadow (the wordmark is already in the header, so no badge) */
html[data-orderly-theme] .ohero-ods__stage { position: relative; margin: 0 auto; max-width: 620px; padding: 12px; border-radius: 16px; background: var(--o-surface-2); border: 0; box-shadow: none; overflow: hidden; }
html[data-orderly-theme] .ohero-ods__screen { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 991px) {
    html[data-orderly-theme] .ohero { padding: 112px 0 48px; }
}
/* phones: the whole desktop dashboard is an unreadable thumbnail, so show its top-left (the day's tiles and the chart) */
@media (max-width: 767px) {
    html[data-orderly-theme] .ohero-ods__stage { padding: 0; aspect-ratio: 4 / 3; }
    html[data-orderly-theme] .ohero-ods__screen { width: 215%; max-width: none; margin-left: -33%; border-radius: 0; }
}

/* ---------- story scenes ([orderly-story]) and showcases ([orderly-showcase]) ---------- */
html[data-orderly-theme] :is(.ost, .oga, .opl, .oaic, .opick, .ofl, .ocalc, .oqz) {
    --o-ink: var(--o-text); --o-mut: var(--o-text-3); --o-panel: var(--o-surface); --o-line: var(--o-surface-3);
    --o-alt: var(--o-surface-2); --o-track: var(--o-surface-3); --o-head: var(--o-text); --o-bot: var(--o-surface-2);
    --o-bubme: var(--o-accent-tint);
    background: transparent;
}
html[data-orderly-theme] .ost-phone, html[data-orderly-theme] .ost-wcard { border: 0 !important; box-shadow: none !important; }
html[data-orderly-theme] .ost-wcard.on { box-shadow: none !important; outline: 2px solid var(--o-accent-solid); outline-offset: -2px; }
html[data-orderly-theme] .ost-av { background: var(--o-accent-solid) !important; }
html[data-orderly-theme] .ost-track i { background: var(--o-accent-solid) !important; }
html[data-orderly-theme] .ost-bub.me { color: var(--o-accent-deep); }
/* the scenes' fixed colours (29 Oct 2026, the owner: no purple, the design system in every animation). The SVG half reads the
   same tokens in orderly-story.js (odsPal); these are the HTML half: orange for the one action, green for done, paper stays white. */
html[data-orderly-theme] .ost__live b { color: var(--o-accent-deep); }
html[data-orderly-theme] :is(.ost-qb, .ost-kbtn, .ost-tile.new) { background: var(--o-accent) !important; color: #18181b !important; border-color: transparent !important; }
html[data-orderly-theme] :is(.ost-tile, .ost-kt, .ost-kcart, .ost-kd, .ost-step, .ost-kiosk) { border-color: transparent !important; }
html[data-orderly-theme] .ost-tile.busy { background: var(--o-accent-tint); color: var(--o-accent-deep); }
html[data-orderly-theme] .ost-kt.pick { background: var(--o-accent-tint) !important; outline: 2px solid var(--o-accent); outline-offset: -2px; }
html[data-orderly-theme] .ost-ticket { background: #fff; color: #18181b; border: 0; box-shadow: var(--o-elev-1); }
html[data-orderly-theme] .ost-pill { border-color: var(--o-accent); color: var(--o-accent-deep); }
html[data-orderly-theme] .ost-pill.paid { border-color: var(--o-go); color: var(--o-go-deep); }
html[data-orderly-theme] .ost-done { color: var(--o-go-deep); }
html[data-orderly-theme] :is(.ost-toast, .ost-bub.ok) { background: var(--o-go-tint) !important; border-color: transparent !important; color: var(--o-text); }
html[data-orderly-theme] .ost-sw i { background: var(--o-text-3); }
html[data-orderly-theme] .ost-spin { border-color: var(--o-surface-3); border-top-color: var(--o-accent); }
html[data-orderly-theme] .ost-cursor { background: var(--o-accent); box-shadow: none; }
html[data-orderly-theme] .ost__scrub::-webkit-slider-thumb { background: var(--o-accent); }
html[data-orderly-theme] .ost__scrub::-moz-range-thumb { background: var(--o-accent); }
html[data-orderly-theme] .ost__scrub:focus-visible { outline-color: var(--o-accent); }

/* ---------- section labels: every small label over a heading looks like the scenes' one (the owner, 29 Oct 2026: "FOR EXAMPLE, A BAKERY") ---------- */
html[data-orderly-theme] :is(.ost__eyebrow, .os__eyebrow, .opl__eyebrow, .oga__eyebrow, .opick__eyebrow, .opq__eyebrow, .ocalc__eyebrow, .oaic__eyebrow, .ofl__eyebrow, .ohero__eyebrow, .oa-iam__lab, span.at-btn.bg-transparent.rounded-0.p-0 > .text-uppercase, p > .text-uppercase.fz-font-md) {
    font: 600 13px/1.3 var(--o-font) !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--o-accent-deep) !important;
}
html[data-orderly-theme="dark"] :is(.ost__eyebrow, .os__eyebrow, .opl__eyebrow, .oga__eyebrow, .opick__eyebrow, .opq__eyebrow, .ocalc__eyebrow, .oaic__eyebrow, .ofl__eyebrow, .ohero__eyebrow, .oa-iam__lab, span.at-btn.bg-transparent.rounded-0.p-0 > .text-uppercase, p > .text-uppercase.fz-font-md) { color: var(--o-accent) !important; }
html[data-orderly-theme] .os-win,
html[data-orderly-theme] .os-win[data-theme] {
    --bg2: var(--o-surface); --bg3: var(--o-surface-2); --line: var(--o-surface-3); --fg: var(--o-text);
    --inv: var(--o-surface); --mute: var(--o-text-3); --dim: var(--o-text-3); --or: var(--o-accent-solid);
    --ok: var(--o-go); --bad: var(--o-danger);
    border: 0 !important; border-radius: 16px !important; box-shadow: none !important;
}
html[data-orderly-theme] .os-theme { display: none !important; }
html[data-orderly-theme] .os-paper { box-shadow: none !important; }
html[data-orderly-theme] :is(.os-alert, .os-pill, .os-todo .go) { background: var(--o-accent-tint) !important; color: var(--o-accent-deep) !important; border-color: transparent !important; }
html[data-orderly-theme] .os-profit { background: var(--o-go-tint) !important; color: var(--o-go-deep) !important; }
html[data-orderly-theme] .os-note { background: var(--o-surface-2) !important; color: var(--o-accent-deep) !important; border: 0 !important; }

/* ---------- no glows, halos, blobs or looping motion ---------- */
html[data-orderly-theme] :is(.oc2__glow, .orderly-orb__bars, .ohero__bg) { display: none !important; }
html[data-orderly-theme] .orderly-stage { background: var(--o-surface-2) !important; }
html[data-orderly-theme] .os-js.is-in .hl { animation: none !important; }
html[data-orderly-theme] :is(.ohero__btn, .oga__btn, .at-btn):hover { transform: none !important; box-shadow: none !important; }
html[data-orderly-theme] [class*="glow"], html[data-orderly-theme] [class*="halo"] { box-shadow: none !important; filter: none !important; }
html[data-orderly-theme] * { text-shadow: none !important; backdrop-filter: none !important; }

/* ---------- closing band and footer ---------- */
html[data-orderly-theme] .at-banner-area { background: var(--o-surface) !important; border-radius: 20px; }
html[data-orderly-theme] .at-footer-area { background: var(--o-surface-2) !important; }
html[data-orderly-theme] .at-footer-area :is(h1, h2, h3, h4, h5, h6, .at-footer-widget-title) { color: var(--o-text) !important; }
html[data-orderly-theme] .at-footer-area :is(p, li, a, span) { color: var(--o-text-2) !important; }
html[data-orderly-theme] .at-footer-area a:hover { color: var(--o-text) !important; }
html[data-orderly-theme] .at-footer-area :is(.at-footer-copyright-wrap, hr) { border-color: var(--o-surface-3) !important; }

/* ---------- the one WhatsApp button: a ghost pill, not a neon green blob ---------- */
html[data-orderly-theme] .orderly-wa { background: var(--o-surface) !important; color: var(--o-text) !important; box-shadow: var(--o-elev-2) !important; transform: none !important; }
html[data-orderly-theme] .orderly-wa svg { color: var(--o-go); }
/* phones: bottom right, so it never sits on the hero's Start free; back-to-top steps up above it */
@media (max-width: 767px) {
    html[data-orderly-theme] .orderly-wa { left: auto; right: 16px; bottom: 16px; }
    html[data-orderly-theme] .back-to-top-wrapper { bottom: 84px !important; right: 22px !important; }
}

/* ---------- motion: explain a step, then stop ---------- */
@media (prefers-reduced-motion: reduce) {
    html[data-orderly-theme] * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- no Replay, Pause or timeline under the animations (the owner, 29 Oct 2026: "remove the replay pause slider, it just loops") ----------
   The story scenes loop on their own and the showcases stop on their last frame. The controls stay in the page, hidden, because the
   homepage industry stories read the scene timeline to move to the next chapter; reduced motion still shows a scene's last frame. */
html[data-orderly-theme] :is(.ost__bar, .os__replay, .orderly-chat__replay, .ofl__btn) { display: none !important; }
html[data-orderly-theme] .ost__live { padding-bottom: 0; }

/* ---------- the app on phones (owner, 7 Nov 2026: "download my app isn't visible on mobile"; clients go to client.orderly.co.ke) ---------- */
/* phones: the header CTA is hidden below 768px, so a compact app button opens the Manager app (client.orderly.co.ke) */
html[data-orderly-theme] .at-header-right .at-btn--app { display: none !important; }
@media (min-width: 350px) and (max-width: 767.98px) {
    html[data-orderly-theme] .at-header-area .row.align-items-center { flex-wrap: nowrap; }
    html[data-orderly-theme] .at-header-area .row > .col:last-child { min-width: 0; }
    html[data-orderly-theme] .at-header-right .at-btn--app { display: inline-flex !important; align-items: center; min-height: 48px; padding: 0 14px; font-size: 15px; text-transform: none; white-space: nowrap; margin-left: 4px; }
}
.at-btn.at-btn--app .at-btn--app__short { display: none; }
@media (max-width: 389.98px) {
    .at-btn.at-btn--app .at-btn--app__long { display: none; }
    .at-btn.at-btn--app .at-btn--app__short { display: inline; }
}
@media (min-width: 768px) {
    html[data-orderly-theme] .at-header-right .at-btn { white-space: nowrap; }
}
/* one label in sentence case (Design lead, 7 Nov): the theme title-cases buttons */
html[data-orderly-theme] .at-header-right .at-btn, html[data-orderly-theme] .at-header-right .at-btn span { text-transform: none !important; }
/* phones: the same app, first thing in the menu */
html[data-orderly-theme] .at-offcanvas-app { margin: 0 0 28px; }
html[data-orderly-theme] .at-offcanvas-app .o-btn { display: flex; width: 100%; justify-content: center; text-decoration: none; }
html[data-orderly-theme] .at-offcanvas-app__note { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--o-text-3); text-align: center; }

/* computers: Sign in beside the app button (the menu carries it below 1200px) */
.at-header-signin { display: none; }
@media (min-width: 1200px) {
    html[data-orderly-theme] .at-header-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 600 14.5px/1 var(--o-font); color: var(--o-text) !important; text-decoration: none; white-space: nowrap; }
    html[data-orderly-theme] .at-header-signin:hover { text-decoration: underline; text-underline-offset: 4px; }
}
html[data-orderly-theme] .at-offcanvas-signin { margin: -20px 0 20px; text-align: center; font-size: 15px; color: var(--o-text-2); }
html[data-orderly-theme] .at-offcanvas-signin a { display: inline-flex; align-items: center; min-height: 48px; color: var(--o-text) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* tablets (768 to 1199px): no app block above it, so the line sits with the left-aligned menu */
@media (min-width: 768px) { html[data-orderly-theme] .at-offcanvas-signin { margin-top: 0; text-align: left; } }
/* 1440 to 1679px: the nav keeps its own width (no padding on the links) so Sign in fits beside the app button */
@media (min-width: 1440px) and (max-width: 1679.98px) {
    html[data-orderly-theme] .at-main-menu nav > ul > li > a { padding-left: 0 !important; padding-right: 0 !important; }
    html[data-orderly-theme] .at-main-menu nav > ul > li { margin-right: 24px !important; }
}
/* hero: one quiet line under the buttons for the other visitor */
html[data-orderly-theme] .ohero__aside { margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
html[data-orderly-theme] .ohero__aside a.o-link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0; margin: 0; font: 600 15px/1.3 var(--o-font); color: var(--o-accent-deep) !important; text-decoration: none !important; }
html[data-orderly-theme="dark"] .ohero__aside a.o-link { color: var(--o-accent) !important; }
html[data-orderly-theme] .ohero__aside a.o-link:hover .ohero__aside-t { text-decoration: underline; text-underline-offset: 3px; }
/* /login is the agent and shop login: owners get pointed to the sign-in chooser */
.orderly-login-owner { margin: 0 0 20px; padding: 12px 14px; border-radius: var(--o-r, 12px); background: var(--o-surface-2, #f4f4f5); color: var(--o-text, #18181b); font-size: 14.5px; line-height: 1.45; }
.orderly-login-owner a { color: inherit !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* /sign-in: three doors, then a line for new owners and diners */
.osign__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.osign__item { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 16px; border-radius: var(--o-r-lg, 16px); background: var(--o-surface-2, #f4f4f5); color: var(--o-text, #18181b) !important; text-decoration: none !important; transition: background-color 200ms ease-out; }
.osign__item:hover { background: var(--o-surface-3, #e4e4e7); }
.osign__item:focus-visible { outline: none; box-shadow: var(--o-ring); }
.osign__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--o-surface, #fff); color: var(--o-text, #18181b); }
.osign__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.osign__text strong { font: 600 16px/1.3 var(--o-font); }
.osign__text span { font-size: 14px; line-height: 1.35; color: var(--o-text-3, #71717a); }
.osign__go { flex: none; font-size: 18px; color: var(--o-text-3, #71717a); }
.osign { padding-top: 120px !important; }
@media (min-width: 992px) { .osign { padding-top: 160px !important; } }
.osign .oga__head h1 { margin: 8px 0 6px; font: 700 clamp(30px, 6vw, 42px)/1.1 var(--o-font); letter-spacing: -0.01em; color: var(--o-text, #18181b); }
.osign__more { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--o-text-2, #52525b); }
.osign__more--food { margin-top: 8px; }
html[data-orderly-theme] .osign__more a, .osign__more a { display: inline-flex; align-items: center; min-height: 48px; color: var(--o-text, #18181b) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .osign .oga__box { max-width: 620px; margin: 0 auto; } }