/* Global thin scrollbar (Firefox + Chromium 121+). Loaded by the menu/stores/auth layouts; site.css carries the same rule for the default _Layout. Component rules that set their own scrollbar-width (none/thin) keep winning via higher specificity. */ * { scrollbar-width: thin; } /* ---------- Top accessibility bar ---------- */ /* First element in , in normal flow — NOT fixed or sticky. The store header under it is `position: sticky; top: 0` (menu.css), so this scrolls away and the header pins itself; a fixed bar would mean keeping every sticky `top` offset in sync with this height forever. No z-index for the same reason: nothing overlaps, so nothing can be overlapped. */ .a11y-bar { background: #f3f4f6; color: #4b5563; border-bottom: 1px solid #e5e7eb; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 12px; line-height: 1.2; } .a11y-bar-inner { max-width: 1180px; margin: 0 auto; padding: 3px 16px; display: flex; align-items: center; gap: 8px; } .a11y-bar-ico { width: 13px; height: 13px; flex-shrink: 0; } .a11y-bar-text { flex: 1 1 auto; min-width: 0; } .a11y-bar-btn { flex: 0 0 auto; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #374151; padding: 1px 11px; font: inherit; font-weight: 600; line-height: 1.5; cursor: pointer; } /* Options — a plain text link next to the pill, so the bar still reads as one thin strip with a single primary action rather than two competing buttons. */ .a11y-bar-link { flex: 0 0 auto; border: 0; background: transparent; color: inherit; padding: 1px 2px; font: inherit; text-decoration: underline; cursor: pointer; } .a11y-bar-link:hover { color: #111827; } .a11y-bar-link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .a11y-bar-btn:hover { background: #e5e7eb; } .a11y-bar-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* On = filled, so the state reads without relying on the label alone. */ .a11y-bar-btn.is-on { background: #2563eb; border-color: #2563eb; color: #fff; } /* Mobile carries the short label instead: the full sentence wrapped to three lines next to the button, which is no longer a thin bar. Two spans rather than one ellipsized one — a sentence cut off mid-word reads as broken, a short label reads as intended. */ .a11y-bar-text-sm { display: none; } @media (max-width: 600px) { .a11y-bar-inner { padding: 3px 12px; gap: 8px; } .a11y-bar-text { display: none; } .a11y-bar-text-sm { display: block; flex: 1 1 auto; } } @media print { .a11y-bar { display: none; } } /* The floating blue .a11y-fab and its rules are gone with the button itself — the bar above is the only entry point. Nothing else styled that class, so this is a straight deletion. */ /* ---------- Panel ---------- */ /* Anchored top-right now that it hangs off the bar's Options button rather than a corner FAB. Still `fixed`: the bar itself scrolls away (it is in normal flow), and a panel that scrolled off with it would close itself out from under whoever opened it. */ .a11y-panel { position: fixed; top: 44px; right: 22px; width: 280px; background: #fff; color: #1a1a1a; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); z-index: 99999; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; animation: a11y-pop 0.18s ease-out; } @keyframes a11y-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .a11y-panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; } .a11y-close { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px; font-size: 20px; color: #6b6b6b; cursor: pointer; line-height: 1; } .a11y-close:hover { background: #f4f4f5; color: #1a1a1a; } /* ---------- Text-size segmented control ---------- */ .a11y-section { margin-bottom: 12px; } .a11y-label { display: block; font-size: 12px; font-weight: 500; color: #6b6b6b; margin-bottom: 6px; } .a11y-seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; background: #f4f4f5; border-radius: 10px; padding: 4px; } .a11y-seg button { height: 34px; border: 0; border-radius: 7px; background: transparent; color: #1a1a1a; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; } .a11y-seg button:hover { background: #ffffff; } .a11y-seg button.is-active { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* ---------- Options list ---------- */ .a11y-options { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .a11y-opt { width: 100%; height: 36px; border: 0; background: transparent; border-radius: 8px; color: #1a1a1a; font-size: 13px; font-weight: 500; text-align: left; padding: 0 10px; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 10px; transition: background 0.12s ease; } .a11y-opt:hover { background: #f4f4f5; } .a11y-opt.is-on { background: #eef4ff; color: #1d4ed8; font-weight: 600; } .a11y-opt-ico { width: 22px; height: 22px; border-radius: 6px; background: #f4f4f5; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .a11y-opt.is-on .a11y-opt-ico { background: #dbeafe; color: #1d4ed8; } .a11y-reset { width: 100%; height: 36px; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; color: #1a1a1a; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .a11y-reset:hover { background: #f4f4f5; } /* ============== Applied accessibility modes ============== */ /* Rem anchor for the text-size feature. This lives here (not only in site.css) because the customer layouts that carry the accessibility widget — _MenuLayout, _StoresLayout, _AuthLayout — load a11y.css but NOT site.css. Every component now sizes text in rem, so this single root rule + the multiplier below rescale the whole page. Anchored at 16px so the default (scale 1) reproduces the original px rendering exactly. */ :root { --a11y-scale: 1; } html { font-size: calc(16px * var(--a11y-scale)); } /* Text-size levels (Small / Default / Large / Extra Large). These set ONLY the global --a11y-scale multiplier consumed by the html rule above. The old rules set an absolute html font-size (17/19/13px) which the px-based components ignored — that is why the feature saved the setting but had no visible effect. */ html.a11y-text-smaller { --a11y-scale: 0.875; } /* ~14px root */ html.a11y-text-larger { --a11y-scale: 1.15; } /* ~18.4px root */ html.a11y-text-larger-2 { --a11y-scale: 1.35; } /* ~21.6px root */ html.a11y-contrast { filter: contrast(1.25) saturate(1.15); } html.a11y-contrast body, html.a11y-contrast .auth-form, html.a11y-contrast .loc-sidebar { background: #000 !important; color: #fff !important; } html.a11y-contrast .field input, html.a11y-contrast .select-wrap select, html.a11y-contrast .otp-box, html.a11y-contrast .loc-search input { background: #111 !important; color: #fff !important; border-color: #fff !important; } /* Login's combined phone control: the WRAPPER owns the surface (its two native controls are transparent), so it needs its own re-pin — otherwise it keeps the white background from auth.css and the #fff-forced text inside goes invisible. The divider is .phone-cc-wrap's border-right, so it is re-coloured explicitly too. */ html.a11y-contrast .phone-combo { background: #111 !important; border-color: #fff !important; } /* .phone-cc-face carries the VISIBLE dial code (the / don't inherit an ancestor's colour reliably, so pin each one an explicit dark value on its light field: menu/offer size pickers, the pre-order Date/Time selects, the rewards picker, the edit-profile phone field, and the referral-code box. */ html.a11y-contrast .menu-card-size, html.a11y-contrast .offer-cand-size, html.a11y-contrast .chk-timing-picker select, html.a11y-contrast .pt-rewards-card select, html.a11y-contrast .profile-phone-input, html.a11y-contrast #chkReferralCode { color: #1a1a1a !important; } html.a11y-contrast #chkReferralCode::placeholder { color: #595959 !important; } html.a11y-readable-font, html.a11y-readable-font * { font-family: Verdana, Tahoma, Arial, sans-serif !important; letter-spacing: 0.01em; } html.a11y-underline-links a { text-decoration: underline !important; } html.a11y-pause-anim, html.a11y-pause-anim *, html.a11y-pause-anim *::before, html.a11y-pause-anim *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important; } html.a11y-highlight-focus *:focus, html.a11y-highlight-focus *:focus-visible { outline: 3px solid #fbbf24 !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.25) !important; } /* ---------- Small screens: tuck the panel into the corner ---------- */ @media (max-width: 560px) { .a11y-panel { top: 38px; right: 14px; width: calc(100vw - 28px); max-width: 320px; } } /* ============================================================ iOS zoom floor for text-entry fields ============================================================ Mobile Safari zooms the whole page whenever a focused text field renders below 16px. The app's viewport meta carries no maximum-scale to suppress that, and it must not gain one — that would also disable pinch-zoom, which the rest of this file exists to protect. The zoom then drags any position:fixed overlay off-centre with no way back, which is what "the address popup opens misaligned in Safari" was: not a layout bug, a zoom the layout never recovers from. WHY THIS IS ONE GLOBAL RULE rather than a fix per component: - font-size is NOT inherited by form controls. A field with no font-size of its own renders at the UA default of ~13.3px and zooms exactly like an explicitly-small one, so any list of "the small ones" is incomplete the moment someone adds a plain . - It is the same defect everywhere, so it wants one guard, not eight. - a11y.css is loaded LAST by all four customer layouts (_Layout, _MenuLayout, _AuthLayout, _StoresLayout), so this lands after every component stylesheet. !important is required, not lazy: nearly every field here is styled through a class, and a class (0,1,0) outranks any element selector no matter how it is written. Specificity cannot be won by construction, so the floor has to state that it wins. max(1rem, 16px) rather than a bare 16px keeps the accessibility text-size scale working — the floor only ever raises the size, never caps it. Non-text controls are excluded: they never summon a keyboard, so they never trigger the zoom, and restyling them would change buttons and checkboxes for no reason. */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]), textarea, select { font-size: max(1rem, 16px) !important; } }