/* OKFOODD appearance layer. Load last, after every page stylesheet. * IDs are server-validated. Theme/font attributes belong on html or body; * customer menu attributes belong on body.customer-shell. * Screen-only overrides deliberately leave receipts, QR sheets and labels alone. */ @media screen { :root { --appearance-control-radius: 12px; --appearance-panel-radius: 18px; --appearance-header: var(--paper); --appearance-header-ink: var(--ink); --appearance-deep: #17324d; --appearance-deep-ink: #fff; --appearance-deep-muted: #d8e6f0; --appearance-focus: #8b5900; --appearance-input: #fff; --appearance-topbar-height: 72px; --appearance-font-noto: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif; --appearance-font-sarabun: "Sarabun", "Leelawadee UI", Tahoma, system-ui, sans-serif; --appearance-font-prompt: "Prompt", "Leelawadee UI", Tahoma, system-ui, sans-serif; --appearance-font-kanit: "Kanit", "Leelawadee UI", Tahoma, system-ui, sans-serif; --appearance-font-plex: "IBM Plex Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif; --appearance-font-bai: "Bai Jamjuree", "Leelawadee UI", Tahoma, system-ui, sans-serif; --appearance-font-mitr: "Mitr", "Leelawadee UI", Tahoma, system-ui, sans-serif; --appearance-font-pridi: "Pridi", "Leelawadee UI", Tahoma, system-ui, serif; } :where(html[data-font="noto"], body[data-font="noto"]) { --font: var(--appearance-font-noto); } :where(html[data-font="sarabun"], body[data-font="sarabun"]) { --font: var(--appearance-font-sarabun); } :where(html[data-font="prompt"], body[data-font="prompt"]) { --font: var(--appearance-font-prompt); } :where(html[data-font="kanit"], body[data-font="kanit"]) { --font: var(--appearance-font-kanit); } :where(html[data-font="plex"], body[data-font="plex"]) { --font: var(--appearance-font-plex); } :where(html[data-font="bai"], body[data-font="bai"]) { --font: var(--appearance-font-bai); } :where(html[data-font="mitr"], body[data-font="mitr"]) { --font: var(--appearance-font-mitr); } :where(html[data-font="pridi"], body[data-font="pridi"]) { --font: var(--appearance-font-pridi); } body.customer-shell[data-menu-font="noto"] { --font: var(--appearance-font-noto); } body.customer-shell[data-menu-font="sarabun"] { --font: var(--appearance-font-sarabun); } body.customer-shell[data-menu-font="prompt"] { --font: var(--appearance-font-prompt); } body.customer-shell[data-menu-font="kanit"] { --font: var(--appearance-font-kanit); } body.customer-shell[data-menu-font="plex"] { --font: var(--appearance-font-plex); } body.customer-shell[data-menu-font="bai"] { --font: var(--appearance-font-bai); } body.customer-shell[data-menu-font="mitr"] { --font: var(--appearance-font-mitr); } body.customer-shell[data-menu-font="pridi"] { --font: var(--appearance-font-pridi); } /* inherit intentionally adds no override: it follows the global font. */ body { font-family: var(--font); } :where(html[data-theme="ocean"], body[data-theme="ocean"]) { --ink: #182f42; --muted: #536a7a; --paper: #fff; --canvas: #eef5fa; --line: #c9dbe7; --brand: #126b9a; --brand-dark: #07527e; --brand-soft: #e1f1fa; --radius: 10px; --appearance-panel-radius: 10px; --appearance-control-radius: 7px; --shadow: 0 12px 35px rgb(20 76 108 / .08); --appearance-header: #123d59; --appearance-header-ink: #fff; --appearance-deep: #123d59; --appearance-focus: #007bb5; } :where(html[data-theme="garden"], body[data-theme="garden"]) { --ink: #24382d; --muted: #586d60; --paper: #fffffa; --canvas: #f0f4e9; --line: #cedac5; --brand: #376d43; --brand-dark: #255431; --brand-soft: #e2eedc; --radius: 26px; --appearance-panel-radius: 26px; --appearance-control-radius: 999px; --shadow: 0 9px 28px rgb(47 80 48 / .07); --appearance-deep: #294f39; --appearance-deep-muted: #dcebdc; --appearance-focus: #376d43; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) { color-scheme: dark; --ink: #eef3fb; --muted: #b3c1d4; --paper: #172335; --canvas: #0e1725; --line: #3c4c63; --brand: #b3b7ff; --brand-dark: #d2d4ff; --brand-soft: #2b3155; --navy: #adcff7; --navy-soft: #203a56; --green: #92dfb7; --green-soft: #173c30; --amber: #ffda8a; --amber-soft: #47371c; --red: #ffaaa4; --red-soft: #482a30; --radius: 12px; --appearance-panel-radius: 12px; --appearance-control-radius: 8px; --shadow: 0 16px 40px rgb(0 0 0 / .2); --appearance-header: #101b2c; --appearance-header-ink: #eef3fb; --appearance-deep: #202e46; --appearance-deep-muted: #c4d2e4; --appearance-input: #101c2d; --appearance-focus: #d5cbff; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) { --ink: #292820; --muted: #626157; --paper: #fffef8; --canvas: #f7f5ec; --line: #c9c6b8; --brand: #6f432b; --brand-dark: #51321f; --brand-soft: #efe6d9; --radius: 0; --appearance-panel-radius: 0; --appearance-control-radius: 2px; --shadow: none; --appearance-deep: #33382e; --appearance-deep-muted: #e3e6db; --appearance-focus: #6f432b; } /* The original theme inherits app.css. Common fixes protect long Thai copy. */ :where(.page-container, .section-heading > *, .menu-grid > *, .menu-card > *, .customer-hero > *, .customer-tabs > *, .metric-grid > *, .table-grid > *, .task-grid > *, .bill-grid > *, .feature-strip > *, .landing-grid > *, .security-field-grid > *, .platform-feature-grid > *, .button-row > *) { min-width: 0; } :where(h1, h2, h3, .menu-card p, .section-heading p, .appearance-option-copy) { overflow-wrap: anywhere; } :where(.appearance-form, .appearance-form fieldset, .appearance-preview, .menu-order-form) { min-width: 0; } :where(.appearance-form input, .appearance-form select, .appearance-form textarea, .customer-menu-options select, .item-note input, .order-note textarea) { max-width: 100%; } :where(.analytics-table-wrap, .table-scroll, .table-wrap) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; } :where(.account-chip > a, .guest-nav > a, .support-nav-link) { display: inline-flex; align-items: center; min-height: 44px; } .public-guest-header .guest-nav > .button, .support-filter-nav a, .promotion-component-options summary { min-height: 44px; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--appearance-focus); outline-offset: 3px; } .customer-tabs a { gap: 5px; } .customer-shell .menu-card h3 { line-height: 1.55; } .customer-shell .menu-card > p { line-height: 1.75; } .customer-shell .menu-card-top { flex-wrap: wrap; align-items: baseline; } .customer-shell .menu-card-top strong { font-variant-numeric: tabular-nums; } .customer-shell .item-note, .customer-shell .customer-menu-options label { font-size: .82rem; } .customer-shell .quantity-row { flex: 0 0 auto; } .customer-shell .cart-bar { max-width: 100%; } .customer-shell .cart-bar > div { flex: 0 0 auto; } .customer-shell .cart-bar .button { min-width: 0; text-align: center; } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) body, body[data-theme]:not([data-theme="original"]) { background: var(--canvas); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) .customer-shell { background: var(--canvas); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) .topbar { color: var(--appearance-header-ink); background: var(--appearance-header); border-color: var(--line); backdrop-filter: none; } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.button, .quantity-button, input, select, textarea) { border-radius: var(--appearance-control-radius); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background: var(--appearance-input); color: var(--ink); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) .button { box-shadow: none; } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.auth-card, .workflow-card, .feature-strip article, .table-card, .task-card, .bill-card, .platform-card, .settings-card, .security-card, .metric-grid a, .waitlist-card, .waitlist-summary article, .takeaway-card, .menu-admin-card, .order-card, .receipt-payment-card, .receipt-settings-card, .analytics-metric-grid article, .analytics-chart-card, .analytics-ranking-card, .app-dialog, .support-panel, .public-package-card, .promotion-editor, .promotion-set-card) { border-radius: var(--appearance-panel-radius); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) .feature-strip article { background: var(--paper); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.customer-hero, .service-panel, .table-detail-hero, .qr-result-card, .quota-card, .toast, .analytics-metric-grid article.primary, .support-hero, .public-catalog-hero) { color: var(--appearance-deep-ink); background: var(--appearance-deep); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.customer-hero, .service-panel, .table-detail-hero, .qr-result-card, .quota-card, .support-hero, .public-catalog-hero) :is(p, .eyebrow), :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.service-actions small, .toast small, .analytics-metric-grid article.primary span, .analytics-metric-grid article.primary small) { color: var(--appearance-deep-muted); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.bill-total, .detail-total) { color: var(--ink); background: var(--paper); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.order-card > header, .menu-admin-tools, .analytics-table thead th) { background: var(--canvas); } /* Ocean: crisp dock, inset workflow rail and underline tabs. */ :where(html[data-theme="ocean"], body[data-theme="ocean"]) .brand-mark { border-radius: 8px; background: #fff; color: #123d59; box-shadow: none; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .account-chip small { color: #c0dae9; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .account-chip > a { color: #fff; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .topbar .button.ghost { color: #fff; border-color: #769db5; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .section-nav { gap: 12px; padding-block: 0; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .section-nav a { min-height: 58px; border-radius: 0; border-bottom: 3px solid transparent; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .section-nav a.active { border-bottom-color: var(--brand); background: transparent; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .workflow-card { padding: 28px; border-top: 6px solid var(--brand); transform: none; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .workflow-list li { padding-inline: 10px; border: 0; border-left: 2px solid var(--line); } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .workflow-list li:nth-child(even) { background: var(--canvas); } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .customer-tabs { padding: 0; border-radius: 4px; border-bottom: 3px solid var(--brand); } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .customer-tabs a { border-radius: 0; min-height: 52px; } /* Garden: soft, spacious, centered welcome and outlined pill navigation. */ :where(html[data-theme="garden"], body[data-theme="garden"]) body::before, body[data-theme="garden"]::before { background: radial-gradient(ellipse at 20% 0%, #dfe9ca, transparent 65%); } :where(html[data-theme="garden"], body[data-theme="garden"]) .brand-mark { border-radius: 50%; box-shadow: none; } :where(html[data-theme="garden"], body[data-theme="garden"]) .section-nav { gap: 8px; background: var(--canvas); border-bottom: 0; } :where(html[data-theme="garden"], body[data-theme="garden"]) .section-nav a { border: 1px solid var(--line); background: var(--paper); } :where(html[data-theme="garden"], body[data-theme="garden"]) .section-nav a.active { border-color: var(--brand); background: var(--brand-soft); } :where(html[data-theme="garden"], body[data-theme="garden"]) .landing-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 38px; } :where(html[data-theme="garden"], body[data-theme="garden"]) .landing-copy { max-width: 940px; margin-inline: auto; text-align: center; } :where(html[data-theme="garden"], body[data-theme="garden"]) .landing-copy :is(h1, p) { margin-inline: auto; } :where(html[data-theme="garden"], body[data-theme="garden"]) .landing-copy :is(.button-row, .trust-row) { justify-content: center; } :where(html[data-theme="garden"], body[data-theme="garden"]) .workflow-card { transform: none; padding: 24px 28px; border-radius: 36px 36px 16px 16px; } :where(html[data-theme="garden"], body[data-theme="garden"]) .feature-strip article { padding: 28px; border-top: 4px solid var(--brand); } :where(html[data-theme="garden"], body[data-theme="garden"]) .customer-hero { padding-block: 28px; border-radius: 30px 30px 12px 12px; } :where(html[data-theme="garden"], body[data-theme="garden"]) .customer-tabs { border-radius: 999px; padding-inline: 8px; } :where(html[data-theme="garden"], body[data-theme="garden"]) .customer-tabs a { border-radius: 999px; } /* Midnight: a working console with quiet dark surfaces. Semantic tones stay semantic. */ :where(html[data-theme="midnight"], body[data-theme="midnight"]) body::before, body[data-theme="midnight"]::before { display: none; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .brand-mark { color: #151d35; box-shadow: none; border-radius: 9px; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.success-icon, .avatar) { color: #141d31; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.button:not(.secondary):not(.ghost), .quantity-button.add, .count-badge, .category-pills button.active, .copy-field button, .support-mail-nav-badge) { color: #141d31; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .button.secondary:hover { background: #304a68; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .button.ghost:hover { background: var(--brand-soft); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .section-nav { background: #101b2c; gap: 5px; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .section-nav a { border-radius: 7px; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .section-nav a.active { box-shadow: inset 3px 0 var(--brand); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .workflow-card { transform: none; box-shadow: none; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.metric-grid a, .task-card, .bill-card) { box-shadow: none; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.permission-option, .remember-row input[type="checkbox"], code) { background: var(--canvas); color: var(--ink); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.support-ticket-card, .support-ticket-meta div, .promotion-empty, .promotion-catalog-row) { background: var(--paper); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.support-ticket-card.is-selected, .promotion-catalog-row.is-selected) { background: var(--brand-soft); border-color: var(--brand); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .promotion-menu-card { background: var(--paper); border-color: #7f6848; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.promotion-saving s, .promotion-components small, .promotion-order-hint, .promotion-allocated-price) { color: var(--muted); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .promotion-saving span { color: var(--amber); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .promotion-item-label { color: var(--amber); background: var(--amber-soft); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .takeaway-policy-banner.is-prepay { color: var(--ink); background: var(--amber-soft); border-color: #75603e; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .chart-grid-line { stroke: var(--line); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .customer-tabs { background: #101b2c; box-shadow: none; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .customer-tabs a:hover { box-shadow: inset 0 -3px var(--brand); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .dialog-close { color: var(--ink); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .receipt-preview-paper { color-scheme: light; --ink: #111; --muted: #555; } /* Editorial: a masthead, strong rules, square corners and an open page. */ :where(html[data-theme="editorial"], body[data-theme="editorial"]) body::before, body[data-theme="editorial"]::before { display: none; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .topbar { border-bottom: 2px solid var(--ink); } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .brand-mark { border-radius: 0; background: var(--ink); box-shadow: none; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .section-nav { gap: 0; border-bottom: 1px solid var(--ink); padding-block: 0; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .section-nav a { min-height: 54px; border-radius: 0; border-right: 1px solid var(--line); } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .section-nav a.active { background: var(--ink); color: var(--paper); } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .landing-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr); align-items: stretch; gap: 40px; min-height: 0; padding-block: 40px; border-bottom: 3px double var(--ink); margin-bottom: 24px; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .landing-copy h1 { font-size: clamp(2.2rem, 4.8vw, 4.2rem); line-height: 1.3; letter-spacing: -.02em; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .workflow-card { padding: 12px 0 12px 26px; border: 0; border-left: 1px solid var(--ink); background: transparent; transform: none; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .workflow-head { flex-wrap: wrap; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .feature-strip article { border: 0; border-top: 2px solid var(--ink); background: transparent; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .section-heading { padding-bottom: 12px; border-bottom: 2px solid var(--ink); } :where(html[data-theme="editorial"], body[data-theme="editorial"]) :is(.customer-hero, .service-panel, .customer-tabs, .cart-bar) { border-radius: 0; box-shadow: none; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .customer-tabs { padding: 0; border-block: 2px solid var(--ink); background: var(--canvas); } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .customer-tabs a { border-radius: 0; border-right: 1px solid var(--line); } /* Billing, packages, grants, coupons, payment and token screens share the * same surfaces. Their page styles are loaded before this appearance layer. * Keep status hues separate from dark hero backgrounds: --navy becomes a * readable information foreground in midnight, not a usable hero fill. */ :where(.billing-hero > *, .billing-panel, .billing-admin-grid > *, .billing-summary-grid > *, .billing-form-grid > *, .billing-buy-inputs > *, .billing-package-title > *, .billing-plan-card, .public-catalog-hero > *, .public-package-facts > div > *, .package-payment-panel, .coupon-quote-panel, .token-topup-panel) { min-width: 0; } :where(.billing-panel-heading, .billing-package-title, .billing-price) { flex-wrap: wrap; } :where(.billing-panel, .billing-plan-card, .billing-admin-package) :is(input, select, textarea) { max-width: 100%; min-width: 0; } :where(.billing-admin-package, .grant-code-value) { background: var(--paper); color: var(--ink); } :where(.token-topup-details, .package-payment-details, .coupon-proration-details, .grant-package-reference) > summary { min-height: 44px; } .public-catalog-order-form :is(input, .button) { min-height: 44px; } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.billing-hero, .billing-panel, .billing-admin-package, .billing-summary-card, .billing-plan-card, .grant-history-card, .coupon-history-card, .coupon-proration-details, .coupon-token-estimate, .package-payment-confirm, .package-payment-history > article, .package-bank-card, .token-topup-wallet, .token-topup-card, .token-topup-quote, .public-catalog-hero, .public-catalog-message, .public-catalog-note) { border-radius: var(--appearance-panel-radius); } :where(html[data-theme], body[data-theme]) .billing-admin-package { color: var(--ink); background: var(--paper); } :where(html[data-theme], body[data-theme]) .grant-code-value { color: var(--ink); background: var(--appearance-input); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.billing-hero, .billing-active-card, .billing-price) { color: var(--appearance-deep-ink); background: var(--appearance-deep); border-color: var(--appearance-deep); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) .billing-hero :is(h1, h2) { color: var(--appearance-deep-ink); } :where(html[data-theme]:not([data-theme="original"]), body[data-theme]:not([data-theme="original"])) :is(.billing-hero p, .billing-hero .eyebrow, .billing-active-card > span, .billing-active-card > small, .billing-price span) { color: var(--appearance-deep-muted); } /* Hero links may be solid, secondary or outlined. Preserve each button's * own foreground/background pair instead of inheriting the white hero text. */ :is(.billing-hero, .public-catalog-hero) .button.secondary { color: var(--navy); background: var(--navy-soft); border-color: transparent; } :is(.billing-hero, .public-catalog-hero) .button.ghost { color: #fff; background: transparent; border-color: #b8c9d8; } :is(.billing-hero, .public-catalog-hero) .button.ghost:hover { background: rgb(255 255 255 / .12); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.billing-panel, .billing-plan-card, .billing-summary-card, .public-package-card) { box-shadow: none; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.billing-hero, .public-catalog-hero) .button:not(.secondary):not(.ghost) { color: #141d31; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.billing-hero, .public-catalog-hero) .button.secondary:hover { background: #304a68; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .billing-active-card .button.secondary { color: var(--navy); background: var(--navy-soft); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .billing-wallet-card { border-color: var(--green); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) :is(.billing-demo-notice, .billing-plan-card.is-incompatible) { border-color: var(--amber); } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .billing-admin-package.is-inactive { opacity: 1; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .billing-switch-options label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); } /* Customer menu compositions. All controls, options and notes remain available. */ .customer-shell[data-menu-layout] .menu-grid { align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); } .customer-shell[data-menu-layout] .menu-card { min-width: 0; } .customer-shell[data-menu-layout="cards"] .menu-grid { align-items: stretch; gap: 18px; } .customer-shell[data-menu-layout="cards"] .menu-card { border-radius: var(--appearance-panel-radius); padding: 18px; } .customer-shell[data-menu-layout="cards"] .menu-card-image { width: calc(100% + 36px); max-width: none; height: 210px; margin: -18px -18px 16px; border-radius: var(--appearance-panel-radius) var(--appearance-panel-radius) 0 0; } .customer-shell[data-menu-layout="list"] .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .customer-shell[data-menu-layout="list"] .menu-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; min-height: 0; border-radius: 10px; } .customer-shell[data-menu-layout="list"] .menu-card > :not(.menu-card-image) { grid-column: 2; } .customer-shell[data-menu-layout="list"] .menu-card-image { grid-column: 1; grid-row: 1 / 4; width: 112px; height: 112px; margin: 0; border-radius: 8px; } .customer-shell[data-menu-layout="list"] .menu-card-top { grid-row: 1; } .customer-shell[data-menu-layout="list"] .menu-card h3 { grid-row: 2; margin: 3px 0; } .customer-shell[data-menu-layout="list"] .menu-card > p { grid-row: 3; margin: 0 0 6px; } .customer-shell[data-menu-layout="list"] .menu-card > :is(.customer-menu-options, .quantity-row, .item-note, .promotion-saving, .promotion-components, .promotion-order-hint) { grid-column: 1 / -1; } .customer-shell[data-menu-layout="list"] .menu-card:not(:has(.menu-card-image)) { grid-template-columns: minmax(0, 1fr); } .customer-shell[data-menu-layout="list"] .menu-card:not(:has(.menu-card-image)) > * { grid-column: 1; } .customer-shell[data-menu-layout="list"] .customer-menu-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .customer-shell[data-menu-layout="list"] .quantity-row { justify-self: end; } .customer-shell[data-menu-layout="magazine"] .page-container { width: min(1040px, calc(100% - 28px)); } .customer-shell[data-menu-layout="magazine"] .menu-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; } .customer-shell[data-menu-layout="magazine"] .menu-card { padding: 0 0 20px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; background: transparent; } .customer-shell[data-menu-layout="magazine"] .menu-card-image { width: 100%; height: 260px; margin: 0 0 16px; border-radius: 2px; } .customer-shell[data-menu-layout="magazine"] .menu-card:nth-child(2n) .menu-card-image { height: 210px; } .customer-shell[data-menu-layout="magazine"] .menu-card h3 { font-size: 1.45rem; line-height: 1.5; margin-top: 10px; } .customer-shell[data-menu-layout="magazine"] .menu-card > p { font-size: .95rem; } .customer-shell[data-menu-layout="magazine"] .menu-card-top { padding-top: 6px; border-top: 1px solid var(--line); } .customer-shell[data-menu-layout="magazine"] .customer-menu-options { padding: 12px; background: var(--paper); border: 1px solid var(--line); } .customer-shell[data-menu-layout="magazine"] .menu-card.selected { border-bottom-color: var(--brand); box-shadow: 0 3px 0 var(--brand); } .customer-shell[data-menu-layout="compact"] .page-container { width: min(1120px, calc(100% - 28px)); } .customer-shell[data-menu-layout="compact"] .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .customer-shell[data-menu-layout="compact"] .menu-card { min-height: 0; padding: 13px; border-radius: 8px; } .customer-shell[data-menu-layout="compact"] .menu-card-image { width: 76px; height: 76px; margin: 0 0 10px; border-radius: 6px; object-fit: cover; } .customer-shell[data-menu-layout="compact"] .menu-card h3 { margin-block: 7px; font-size: 1rem; } .customer-shell[data-menu-layout="compact"] .menu-card > p { margin-bottom: 10px; } .customer-shell[data-menu-layout="compact"] .customer-menu-options { padding: 8px; margin-block: 6px; } .customer-shell[data-menu-layout="compact"] .quantity-row { grid-template-columns: 44px 44px 44px; } .customer-shell[data-menu-layout="compact"] .item-note { margin-top: 7px; } .customer-shell[data-menu-layout="focus"] .page-container { width: min(760px, calc(100% - 28px)); } .customer-shell[data-menu-layout="focus"] .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .customer-shell[data-menu-layout="focus"] .menu-card { padding: clamp(20px, 4vw, 32px); border-radius: 24px; border-width: 2px; } .customer-shell[data-menu-layout="focus"] .menu-card-image { width: 100%; height: auto; max-height: 380px; aspect-ratio: 16 / 10; margin: 0 0 20px; border-radius: 14px; } .customer-shell[data-menu-layout="focus"] .menu-card h3 { font-size: clamp(1.4rem, 4vw, 1.8rem); } .customer-shell[data-menu-layout="focus"] .menu-card > p { font-size: 1rem; } .customer-shell[data-menu-layout="focus"] .menu-card-top { font-size: 1.15rem; } .customer-shell[data-menu-layout="focus"] .category-label { font-size: .84rem; } .customer-shell[data-menu-layout="focus"] .quantity-row { grid-template-columns: 52px 60px 52px; margin-top: 8px; } .customer-shell[data-menu-layout="focus"] .quantity-button { width: 52px; height: 52px; border-radius: 50%; } .customer-shell[data-menu-layout="focus"] .quantity-row input { min-height: 52px; font-size: 1.2rem; } /* Selection controls: native radios keep keyboard, touch and form semantics. */ .appearance-form { display: grid; gap: 24px; } .appearance-form > fieldset { margin: 0; padding: clamp(16px, 3vw, 24px); border-radius: var(--appearance-panel-radius); background: var(--paper); } .appearance-form > fieldset > legend { padding-inline: 8px; font-size: 1.1rem; } .appearance-section-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 8px 20px; margin-bottom: 18px; } .appearance-section-heading h2, .appearance-section-heading p { margin: 0; } .appearance-section-heading p { max-width: 680px; color: var(--muted); font-size: .9rem; } .appearance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); gap: 14px; } .appearance-option { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-content: start; gap: 12px 9px; padding: 13px; min-height: 44px; border: 2px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--paper); cursor: pointer; transition: border-color .15s, box-shadow .15s; } .appearance-option:hover { border-color: var(--brand); } .appearance-option:has(input:checked), .appearance-option.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); } .appearance-option:has(input:focus-visible) { outline: 3px solid var(--appearance-focus); outline-offset: 3px; } .appearance-option > :is(input[type="radio"], .appearance-radio) { grid-column: 1; grid-row: 2; align-self: start; width: 22px; height: 22px; min-height: 22px; margin: 3px 0 0; padding: 0; accent-color: var(--brand); cursor: pointer; } .appearance-option-copy { grid-column: 2; grid-row: 2; display: grid; gap: 4px; } .appearance-option-copy strong { font-size: .94rem; line-height: 1.6; } .appearance-option-copy small { font-size: .78rem; font-weight: 400; line-height: 1.7; } .appearance-option-badge { display: inline-flex; width: fit-content; padding: 3px 7px; border-radius: 5px; background: var(--brand-soft); color: var(--brand-dark); font-size: .7rem; } .appearance-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--appearance-panel-radius); background: var(--paper); } .appearance-form-actions p { flex: 1 1 240px; margin: 0; color: var(--muted); font-size: .85rem; } .appearance-status { min-height: 1.7em; margin: 0; color: var(--green); font-size: .9rem; } .appearance-font-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 12px; } .appearance-font-sample { grid-column: 1 / -1; grid-row: 1; min-width: 0; margin: 0; padding: 16px 12px; color: var(--ink); border-radius: 9px; background: var(--canvas); font-size: 1.25rem; line-height: 1.8; overflow-wrap: anywhere; } .appearance-font-sample[data-font="noto"] { font-family: var(--appearance-font-noto); } .appearance-font-sample[data-font="sarabun"] { font-family: var(--appearance-font-sarabun); } .appearance-font-sample[data-font="prompt"] { font-family: var(--appearance-font-prompt); } .appearance-font-sample[data-font="kanit"] { font-family: var(--appearance-font-kanit); } .appearance-font-sample[data-font="plex"] { font-family: var(--appearance-font-plex); } .appearance-font-sample[data-font="bai"] { font-family: var(--appearance-font-bai); } .appearance-font-sample[data-font="mitr"] { font-family: var(--appearance-font-mitr); } .appearance-font-sample[data-font="pridi"] { font-family: var(--appearance-font-pridi); } /* Non-interactive CSS thumbnails: no duplicate forms or invented food images. */ .appearance-preview { --preview-canvas: #f6f3ed; --preview-paper: #fffdf9; --preview-ink: #1f252b; --preview-line: #e4ded5; --preview-accent: #c8442e; --preview-radius: 8px; grid-column: 1 / -1; grid-row: 1; position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: 23px 13px 1fr; gap: 5px; height: 142px; padding: 8px; overflow: hidden; border: 1px solid var(--preview-line); border-radius: 9px; background: var(--preview-canvas); color: var(--preview-ink); pointer-events: none; } .appearance-preview[data-preview-theme="ocean"] { --preview-canvas: #eef5fa; --preview-paper: #fff; --preview-ink: #182f42; --preview-line: #c9dbe7; --preview-accent: #126b9a; --preview-radius: 3px; } .appearance-preview[data-preview-theme="garden"] { --preview-canvas: #f0f4e9; --preview-paper: #fffffa; --preview-ink: #24382d; --preview-line: #cedac5; --preview-accent: #376d43; --preview-radius: 13px; } .appearance-preview[data-preview-theme="midnight"] { --preview-canvas: #0e1725; --preview-paper: #172335; --preview-ink: #eef3fb; --preview-line: #3c4c63; --preview-accent: #b3b7ff; --preview-radius: 4px; grid-template-columns: 30px 1fr; grid-template-rows: 23px 1fr; } .appearance-preview[data-preview-theme="editorial"] { --preview-canvas: #f7f5ec; --preview-paper: #fffef8; --preview-ink: #292820; --preview-line: #c9c6b8; --preview-accent: #6f432b; --preview-radius: 0; } .appearance-preview-bar { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: var(--preview-radius); background: var(--preview-paper); } .appearance-preview-bar::before { content: ""; width: 12px; height: 12px; flex: 0 0 auto; border-radius: var(--preview-radius); background: var(--preview-accent); } .appearance-preview-bar::after { content: ""; width: 45%; height: 4px; background: var(--preview-ink); opacity: .65; } .appearance-preview-nav { display: flex; align-items: center; gap: 4px; } .appearance-preview-nav i { display: block; width: 27%; height: 6px; border-radius: var(--preview-radius); background: var(--preview-line); } .appearance-preview-nav i:first-child { background: var(--preview-accent); } .appearance-preview-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; min-height: 0; } .appearance-preview-content i { position: relative; display: block; min-width: 0; border: 1px solid var(--preview-line); border-radius: var(--preview-radius); background: var(--preview-paper); } .appearance-preview-content i::before { content: ""; position: absolute; inset: 8px 6px auto; height: 23%; background: var(--preview-accent); border-radius: var(--preview-radius); opacity: .25; } .appearance-preview-content i::after { content: ""; position: absolute; inset: auto 6px 9px; height: 3px; background: var(--preview-ink); box-shadow: 0 -7px var(--preview-line); opacity: .5; } .appearance-preview[data-preview-theme="ocean"] .appearance-preview-bar { background: #123d59; } .appearance-preview[data-preview-theme="ocean"] .appearance-preview-bar::before, .appearance-preview[data-preview-theme="ocean"] .appearance-preview-bar::after { background: #fff; } .appearance-preview[data-preview-theme="garden"] .appearance-preview-content { gap: 8px; padding-top: 4px; } .appearance-preview[data-preview-theme="midnight"] .appearance-preview-bar { grid-column: 1 / -1; } .appearance-preview[data-preview-theme="midnight"] .appearance-preview-nav { align-self: stretch; flex-direction: column; gap: 9px; padding: 6px 3px; background: var(--preview-paper); } .appearance-preview[data-preview-theme="midnight"] .appearance-preview-nav i { width: 100%; } .appearance-preview[data-preview-theme="editorial"] .appearance-preview-bar { border-bottom: 2px solid var(--preview-ink); background: transparent; } .appearance-preview[data-preview-theme="editorial"] .appearance-preview-content i { border: 0; border-top: 2px solid var(--preview-ink); background: transparent; } .appearance-preview[data-preview-layout] { grid-template-rows: 23px 13px 1fr; } .appearance-preview[data-preview-layout="cards"] .appearance-preview-content { grid-template-columns: repeat(2, minmax(0, 1fr)); } .appearance-preview[data-preview-layout="list"] .appearance-preview-content { grid-template-columns: 1fr; } .appearance-preview[data-preview-layout="list"] .appearance-preview-content i::before { inset: 4px auto 4px 4px; height: auto; width: 22%; } .appearance-preview[data-preview-layout="list"] .appearance-preview-content i::after { left: 32%; bottom: 7px; } .appearance-preview[data-preview-layout="magazine"] .appearance-preview-content { grid-template-columns: 1.3fr 1fr; gap: 10px; } .appearance-preview[data-preview-layout="magazine"] .appearance-preview-content i { border-radius: 0; border-width: 0 0 2px; } .appearance-preview[data-preview-layout="magazine"] .appearance-preview-content i:first-child { grid-row: span 2; } .appearance-preview[data-preview-layout="compact"] .appearance-preview-content { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; } .appearance-preview[data-preview-layout="compact"] .appearance-preview-content i::before { width: 13px; height: 13px; border-radius: 2px; } .appearance-preview[data-preview-layout="focus"] .appearance-preview-content { grid-template-columns: 1fr; } .appearance-preview[data-preview-layout="focus"] .appearance-preview-content i:not(:first-child) { display: none; } .appearance-preview[data-preview-layout="focus"] .appearance-preview-content i::before { height: 42%; } .preview-device { min-width: 0; border: 1px solid var(--line); border-radius: 18px; padding: 10px; background: var(--canvas); } .preview-device[data-device="mobile"] { width: min(360px, 100%); margin-inline: auto; border-width: 5px; border-radius: 28px; } .preview-device[data-device="desktop"] { width: 100%; border-radius: 12px; } .preview-device iframe { display: block; width: 100%; max-width: 100%; min-height: 520px; border: 0; border-radius: 10px; background: var(--paper); } /* Compatible with the production picker's compact span-based markup. */ .appearance-option-content { display: contents; } .appearance-option-content > strong { grid-column: 2; grid-row: 2; align-self: center; line-height: 1.6; font-size: .94rem; } .appearance-option-content > small { grid-column: 2; grid-row: 3; font-size: .78rem; line-height: 1.7; font-weight: 400; } .appearance-mini { --mini-canvas: #f6f3ed; --mini-paper: #fffdf9; --mini-ink: #1f252b; --mini-line: #e4ded5; --mini-accent: #c8442e; --mini-radius: 8px; grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-rows: 25px 1fr; gap: 8px; height: 132px; padding: 8px; border: 1px solid var(--mini-line); border-radius: 9px; background: var(--mini-canvas); color: var(--mini-ink); overflow: hidden; } .appearance-mini-top { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: var(--mini-radius); background: var(--mini-paper); font: 800 .62rem/1 system-ui,sans-serif; } .appearance-mini-top::before { content: ""; display: block; width: 12px; height: 12px; border-radius: var(--mini-radius); background: var(--mini-accent); } .appearance-mini-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .appearance-mini-body > i { display: block; position: relative; border: 1px solid var(--mini-line); border-radius: var(--mini-radius); background: var(--mini-paper); } .appearance-mini-body > i::before { content: ""; position: absolute; inset: 8px 5px auto; height: 24%; border-radius: var(--mini-radius); background: var(--mini-accent); opacity: .25; } .appearance-mini-body > i::after { content: ""; position: absolute; inset: auto 5px 10px; height: 3px; background: var(--mini-ink); box-shadow: 0 -7px var(--mini-line); opacity: .5; } .appearance-mini[data-swatch="ocean"] { --mini-canvas: #eef5fa; --mini-paper: #fff; --mini-ink: #182f42; --mini-line: #c9dbe7; --mini-accent: #126b9a; --mini-radius: 2px; } .appearance-mini[data-swatch="ocean"] .appearance-mini-top { background: #123d59; color: #fff; border-bottom: 3px solid #126b9a; } .appearance-mini[data-swatch="garden"] { --mini-canvas: #f0f4e9; --mini-paper: #fffffa; --mini-ink: #24382d; --mini-line: #cedac5; --mini-accent: #376d43; --mini-radius: 14px; } .appearance-mini[data-swatch="garden"] .appearance-mini-top { justify-content: center; } .appearance-mini[data-swatch="midnight"] { --mini-canvas: #0e1725; --mini-paper: #172335; --mini-ink: #eef3fb; --mini-line: #3c4c63; --mini-accent: #b3b7ff; --mini-radius: 3px; grid-template-columns: 28px 1fr; } .appearance-mini[data-swatch="midnight"] .appearance-mini-top { grid-column: 1 / -1; } .appearance-mini[data-swatch="midnight"]::before { content: ""; grid-row: 2; border-radius: 3px; background: repeating-linear-gradient(to bottom, var(--mini-line) 0 5px, var(--mini-paper) 5px 15px); } .appearance-mini[data-swatch="editorial"] { --mini-canvas: #f7f5ec; --mini-paper: #fffef8; --mini-ink: #292820; --mini-line: #c9c6b8; --mini-accent: #6f432b; --mini-radius: 0; } .appearance-mini[data-swatch="editorial"] .appearance-mini-top { border-bottom: 2px solid var(--mini-ink); background: transparent; } .appearance-mini[data-swatch="editorial"] .appearance-mini-body > i { border-width: 2px 0 0; border-color: var(--mini-ink); background: transparent; } .appearance-mini[data-swatch="cards"] .appearance-mini-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } .appearance-mini[data-swatch="cards"] .appearance-mini-body > i:last-child { display: none; } .appearance-mini[data-swatch="list"] .appearance-mini-body { grid-template-columns: 1fr; } .appearance-mini[data-swatch="list"] .appearance-mini-body > i::before { inset: 4px auto 4px 4px; width: 22%; height: auto; } .appearance-mini[data-swatch="list"] .appearance-mini-body > i::after { left: 32%; bottom: 6px; } .appearance-mini[data-swatch="magazine"] .appearance-mini-body { grid-template-columns: 1.3fr 1fr; gap: 8px; } .appearance-mini[data-swatch="magazine"] .appearance-mini-body > i { border-radius: 0; border-width: 0 0 2px; } .appearance-mini[data-swatch="magazine"] .appearance-mini-body > i:first-child { grid-row: span 2; } .appearance-mini[data-swatch="compact"] .appearance-mini-body { gap: 3px; } .appearance-mini[data-swatch="compact"] .appearance-mini-body > i::before { width: 13px; height: 13px; } .appearance-mini[data-swatch="focus"] .appearance-mini-body { grid-template-columns: 1fr; } .appearance-mini[data-swatch="focus"] .appearance-mini-body > i:not(:first-child) { display: none; } .appearance-mini[data-swatch="focus"] .appearance-mini-body > i::before { height: 45%; } .appearance-font-sample[data-font-sample] { display: flex; align-items: start; gap: 12px; margin: 0; padding: 14px; border: 2px solid var(--line); cursor: pointer; font-size: 1.08rem; } .appearance-font-sample[data-font-sample] > input { flex: 0 0 auto; width: 22px; height: 22px; min-height: 22px; margin-top: 5px; accent-color: var(--brand); } .appearance-font-sample[data-font-sample] > span { display: grid; gap: 5px; min-width: 0; } .appearance-font-sample[data-font-sample]:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); } .appearance-font-sample[data-font-sample="noto"] { font-family: var(--appearance-font-noto); } .appearance-font-sample[data-font-sample="sarabun"] { font-family: var(--appearance-font-sarabun); } .appearance-font-sample[data-font-sample="prompt"] { font-family: var(--appearance-font-prompt); } .appearance-font-sample[data-font-sample="kanit"] { font-family: var(--appearance-font-kanit); } .appearance-font-sample[data-font-sample="plex"] { font-family: var(--appearance-font-plex); } .appearance-font-sample[data-font-sample="bai"] { font-family: var(--appearance-font-bai); } .appearance-font-sample[data-font-sample="mitr"] { font-family: var(--appearance-font-mitr); } .appearance-font-sample[data-font-sample="pridi"] { font-family: var(--appearance-font-pridi); } .appearance-sample { min-width: 0; } .appearance-sample .customer-tabs > span { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 9px 6px; text-align: center; font-size: .85rem; font-weight: 800; } .appearance-image-placeholder { display: grid; place-items: center; color: var(--muted); background: var(--canvas); border: 1px dashed var(--line); font-size: .82rem; text-align: center; } .appearance-device { max-width: 100%; min-width: 0; overflow: hidden; } .appearance-device iframe { display: block; width: 100%; min-width: 0; max-width: 100%; border: 0; min-height: 580px; background: var(--paper); } .appearance-device[data-preview-size="phone"] { width: min(360px, 100%); margin-inline: auto; } } @media screen and (min-width: 901px) { :where(html[data-theme="garden"], body[data-theme="garden"]) .workflow-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } :where(html[data-theme="garden"], body[data-theme="garden"]) .workflow-list li { flex-direction: column; gap: 6px; border-bottom: 0; padding-bottom: 2px; } } @media screen and (min-width: 1100px) { /* The sidebar activates only for staff screens that actually have navigation. */ :where(html[data-theme="midnight"], body[data-theme="midnight"]) body.staff-shell:has(> .section-nav) > .section-nav, body.staff-shell[data-theme="midnight"]:has(> .section-nav) > .section-nav { position: fixed; inset: 72px auto 0 0; width: 208px; padding: 18px 12px 24px; flex-direction: column; white-space: normal; overflow-x: hidden; overflow-y: auto; border-right: 1px solid var(--line); border-bottom: 0; scrollbar-width: thin; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) body.staff-shell:has(> .section-nav) > .section-nav a, body.staff-shell[data-theme="midnight"]:has(> .section-nav) > .section-nav a { flex: 0 0 auto; padding: 10px 13px; font-size: .83rem; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) body.staff-shell:has(> .section-nav) > .page-container, body.staff-shell[data-theme="midnight"]:has(> .section-nav) > .page-container { width: min(1180px, calc(100% - 256px)); margin-left: max(232px, calc((100% - 1180px + 208px) / 2)); margin-right: 24px; padding-top: 28px; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .metric-grid { gap: 10px; } :where(html[data-theme="midnight"], body[data-theme="midnight"]) .metric-grid a { padding: 15px; } } @media screen and (max-width: 900px) { :where(html[data-theme="editorial"], body[data-theme="editorial"]) .landing-grid { grid-template-columns: 1fr; gap: 24px; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .workflow-card { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--ink); } .customer-shell[data-menu-layout="compact"] .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 620px) { :root { --appearance-topbar-height: 62px; } .appearance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .appearance-option { padding: 9px; gap: 8px 6px; border-radius: 12px; } .appearance-preview { height: 118px; padding: 6px; } .appearance-option-copy strong { font-size: .87rem; } .appearance-option-copy small { font-size: .76rem; } .appearance-form > fieldset { padding: 13px; } .appearance-form-actions { align-items: stretch; } .appearance-form-actions .button { width: 100%; } .appearance-font-grid { grid-template-columns: minmax(0, 1fr); } .customer-shell[data-menu-layout] .page-container { width: calc(100% - 20px); } .customer-shell[data-menu-layout] .menu-grid { grid-template-columns: minmax(0, 1fr); } .customer-shell .customer-hero { flex-wrap: wrap; gap: 12px; } .customer-shell .customer-hero > div:first-child { flex: 1 1 160px; } .customer-shell .bill-total { min-width: 110px; } .customer-shell .section-heading { flex-wrap: wrap; gap: 4px 12px; } .customer-shell .category-pills { padding-block: 4px; scroll-padding-inline: 4px; } .customer-shell .cart-bar { gap: 9px; padding: 10px; } .customer-shell .cart-bar .button { padding-inline: 12px; font-size: .85rem; } .customer-shell .cart-bar strong { font-size: .9rem; } .customer-shell[data-menu-layout="list"] .menu-card { grid-template-columns: 86px minmax(0, 1fr); column-gap: 12px; padding: 13px; } .customer-shell[data-menu-layout="list"] .menu-card-image { width: 86px; height: 96px; } .customer-shell[data-menu-layout="list"] .customer-menu-options { grid-template-columns: minmax(0, 1fr); } .customer-shell[data-menu-layout="magazine"] .menu-grid { gap: 24px; } .customer-shell[data-menu-layout="magazine"] .menu-card-image, .customer-shell[data-menu-layout="magazine"] .menu-card:nth-child(2n) .menu-card-image { height: auto; aspect-ratio: 16 / 10; } .customer-shell[data-menu-layout="compact"] .menu-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 5px 12px; } .customer-shell[data-menu-layout="compact"] .menu-card > * { grid-column: 1 / -1; } .customer-shell[data-menu-layout="compact"] .menu-card-image { grid-column: 1; grid-row: 1 / 3; width: 60px; height: 60px; margin: 0; } .customer-shell[data-menu-layout="compact"] .menu-card:has(.menu-card-image) > :is(.menu-card-top, h3) { grid-column: 2; } .customer-shell[data-menu-layout="compact"] .menu-card h3 { margin: 0; } .customer-shell[data-menu-layout="compact"] .menu-card > p { margin: 2px 0 6px; } .customer-shell[data-menu-layout="compact"] .quantity-row { justify-self: end; } .customer-shell[data-menu-layout="focus"] .menu-card { padding: 18px; border-radius: 20px; } :where(html[data-theme="garden"], body[data-theme="garden"]) .landing-copy { text-align: left; } :where(html[data-theme="garden"], body[data-theme="garden"]) .landing-copy .trust-row { justify-content: flex-start; } :where(html[data-theme="garden"], body[data-theme="garden"]) .workflow-card { padding: 20px; } :where(html[data-theme="editorial"], body[data-theme="editorial"]) .landing-grid { padding-top: 20px; } :where(html[data-theme="ocean"], body[data-theme="ocean"]) .section-nav a { min-height: 52px; } } @media screen and (max-width: 380px) { .appearance-grid { grid-template-columns: minmax(0, 1fr); } .appearance-preview { height: 142px; } .customer-tabs a { padding-inline: 7px; font-size: .8rem; } .customer-shell .cart-bar { flex-wrap: wrap; } .customer-shell .cart-bar .button { flex: 1 1 170px; } } @media screen and (forced-colors: active) { .appearance-option:has(input:checked) { border-color: Highlight; } .appearance-preview { border-color: CanvasText; } .appearance-preview-content i, .appearance-preview-nav i { border: 1px solid CanvasText; } }