/* Elevated SF — handle "elevated-a11y" (every page; a <link> in <head>): the accessibility toolbar
   (inc/a11y-toolbar.php, assets/js/a11y.js) and the visitor's settings. Each setting is a class on <html>
   that the inline head script sets before first paint. The modes re-point the theme's tokens (DESIGN.md
   §2; site.css maps them from theme.json's presets), so every component follows without rules of its
   own; CSS filters only where nothing else reaches (grayscale, and the logo files on a swapped band). */

/* the toolbar: a tab on the left edge, vertically centred. From 1024 px it is 40 px wide and sits in the
   40 px page gutter, so it covers no content; below that it is 32 × 48 (WCAG 2.5.8 asks 24 × 24) and
   overlaps at most 16 px of the content beside the 16 px gutter, so no focused control is ever entirely
   under it (2.4.11). The panel is a disclosure that closes when the focus leaves it. The toolbar takes the
   page's tokens (theme.json presets, which the modes re-point), not those of a band it sits in: inside the
   gate it looks as it does on the page. */
.a11y{display:contents;--ink:var(--wp--preset--color--ink,#0B0B0B);--ink-hover:var(--wp--preset--color--ink-hover,#2B2B2B);--paper:var(--wp--preset--color--paper,#FFF);--rule:var(--wp--preset--color--rule,#D6D7D2);--field:var(--wp--preset--color--field,#85867F);--graphite:var(--wp--preset--color--graphite,#434548);--mute:var(--wp--preset--color--mute,#5E605B)}
.a11y svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.a11y__open{position:fixed;left:0;top:50%;z-index:46;display:grid;place-items:center;width:32px;height:48px;margin:-24px 0 0;padding:0;border:2px solid var(--paper);border-left:0;border-radius:0 var(--r-1) var(--r-1) 0;background:var(--ink);color:var(--paper);cursor:pointer}
.a11y__open:hover,.a11y__open[aria-expanded=true]{background:var(--ink-hover)}
/* inside the age gate (a11y.js moves it there while the gate is open) the tab sits in the gate's empty
   top-left corner, clear of the question and its buttons */
.gate .a11y__open{top:var(--s-4);margin-top:0}
.a11y__icon{width:24px;height:24px}
.a11y__icon .a11y__head{fill:currentColor;stroke:none}
.a11y__panel{--focus:var(--ink);position:fixed;z-index:46;inset:var(--s-2) var(--s-2) calc(var(--bar) + var(--s-2) + env(safe-area-inset-bottom)) 40px;width:auto;max-width:340px;height:fit-content;max-height:calc(100% - 2*var(--s-2) - var(--bar) - env(safe-area-inset-bottom));margin-block:auto;padding:var(--s-2) var(--s-4) var(--s-4);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--rule);border-radius:var(--r-2);background:var(--paper);color:var(--ink);box-shadow:var(--sh-2)}
.a11y__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-right:-10px}
.a11y__h{min-width:0;font:800 min(1.75rem,36px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.004em;overflow-wrap:anywhere}
.a11y__size{margin-bottom:var(--s-3);color:var(--graphite);font-size:var(--fs-sm)}
.a11y__size b{color:var(--ink)}
.a11y__list{display:grid;gap:6px}
.a11y__btn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:1.5px solid var(--field);border-radius:var(--r-1);background:var(--paper);color:var(--ink);font-size:var(--fs-sm);font-weight:600;line-height:1.25;text-align:left;cursor:pointer}
.a11y__btn:hover{border-color:var(--ink)}
/* state is never colour alone: a pressed setting is filled AND ticked; a step that cannot go further is
   dashed (and aria-disabled, so it keeps the focus) */
.a11y__box{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1.5px solid currentColor;border-radius:3px}
.a11y__box .a11y__mark{width:16px;height:16px;stroke-width:2.25}
.a11y__btn[aria-pressed] .a11y__mark{visibility:hidden}
.a11y__btn[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.a11y__btn[aria-pressed=true] .a11y__mark{visibility:visible}
.a11y__btn[aria-disabled=true]{border-style:dashed;color:var(--mute);cursor:default}
.a11y__btn--reset{margin-top:var(--s-2)}
.a11y__more{display:grid;margin-top:var(--s-3);padding-top:var(--s-1);border-top:1px solid var(--rule);font-size:var(--fs-sm)}
.a11y__link{display:inline-flex;align-items:center;justify-self:start;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.a11y__help{color:var(--graphite)}
.a11y__help a{color:var(--ink);font-weight:600}
@media (min-width:1024px){.a11y__open{width:40px}.a11y__panel{inset:var(--s-4) auto var(--s-4) 48px;width:320px;max-height:calc(100% - 2*var(--s-4))}}
@keyframes a11y-in{from{opacity:0;transform:translateX(-8px)}}
@media (prefers-reduced-motion:no-preference){html:not(.a11y-still) .a11y__panel:not([hidden]){animation:a11y-in .18s var(--ease)}}
@media print{.a11y{display:none}}

/* Text size: the root font size, as the browser's own text-size setting does (every type size in the
   theme is rem), not zoom: layout widths in px stay put and the text reflows. Nothing may widen the page
   at 320 px (WCAG 1.4.10): a word too long for its box breaks (numbers and phone numbers excepted); the
   display sizes, already large, and the one-row chrome (utility bar, header button, action bar, drawer
   links, Pickup/Delivery) grow only as far as the screen allows and never below their normal size —
   max(normal in px, min(scaled in rem, a share of the width)). The readable font sets --a11y-d to .75. */
html.a11y-text-125{font-size:125%}
html.a11y-text-150{font-size:150%}
html.a11y-text-175{font-size:175%}
html.a11y-text-200{font-size:200%}
html[class*="a11y-text-"],html.a11y-font{--fs-hero:calc(var(--a11y-d,1)*max(clamp(52px,25.6px + 7vw,120px),min(clamp(3.25rem,1.6rem + 7vw,7.5rem),16vw)));--fs-3xl:calc(var(--a11y-d,1)*max(clamp(44px,28.8px + 4vw,84px),min(clamp(2.75rem,1.8rem + 4vw,5.25rem),14vw)));--fs-2xl:calc(var(--a11y-d,1)*max(clamp(32px,24px + 2.3vw,56px),min(clamp(2rem,1.5rem + 2.3vw,3.5rem),11vw)));--fs-xl:max(clamp(24px,20.8px + .8vw,32px),min(clamp(1.5rem,1.3rem + .8vw,2rem),9vw));--wp--preset--font-size--hero:var(--fs-hero);--wp--preset--font-size--3-xl:var(--fs-3xl);--wp--preset--font-size--2-xl:var(--fs-2xl);--wp--preset--font-size--xl:var(--fs-xl)}
html[class*="a11y-text-"] :is(.util,.util .status,.seg__opt span){font-size:max(14px,min(.875rem,4.4vw))}
html[class*="a11y-text-"] .site-header__order{font-size:max(13px,min(.8125rem,4vw))}
html[class*="a11y-text-"] .actionbar__item{font-size:max(12px,min(.75rem,3.5vw))}
html[class*="a11y-text-"] :is(.drawer__main a,.drawer__locs summary){font-size:max(36px,min(2.25rem,11vw))}
html[class*="a11y-text-"] body,html[class*="a11y-text-"] .prose{overflow-wrap:anywhere!important}
html[class*="a11y-text-"] :is(.cat__count,.card__price,.pdp__price,.rating__score,.offer__big,.stats dd,.nowrap){overflow-wrap:normal!important}
html[class*="a11y-text-"] :is(.form>.btn,.signup__form>a.btn){min-width:min(12rem,100%)}
html[class*="a11y-text-"] select{max-width:100%}
html[class*="a11y-text-"] .sort{flex-wrap:wrap;min-width:0}
/* from 150 %, phones get one column where two would leave a word or two per line */
@media (max-width:599px){
html:is(.a11y-text-150,.a11y-text-175,.a11y-text-200) :is(.cats,.grid-products:not(.grid-products--rail),.hero__cta,.drawer__cta,.ratings,.site-footer__grid){grid-template-columns:minmax(0,1fr)}
html:is(.a11y-text-150,.a11y-text-175,.a11y-text-200) .grid-products--rail{grid-auto-columns:calc(100vw - 2*var(--gutter) - 36px)}
html:is(.a11y-text-150,.a11y-text-175,.a11y-text-200) :is(.fcol--locs ul,.drawer__locs ul){columns:1}
html:is(.a11y-text-150,.a11y-text-175,.a11y-text-200) .legal-links{display:flex}
html:is(.a11y-text-150,.a11y-text-175,.a11y-text-200) .hours .nowrap{white-space:normal}}
/* the map's address link grows the frame instead of spilling out of its 2 : 1 box */
@media (max-width:1023px){
html[class*="a11y-text-"] .map__frame{aspect-ratio:auto;min-height:calc((100vw - 2*var(--gutter))/2)}
html[class*="a11y-text-"] .map__fallback{position:relative;min-height:inherit;padding:calc(var(--s-4) + 3.5rem) var(--s-4) var(--s-4);text-align:center}}

/* Grayscale: a filter on <html> (the root is exempt from the containing-block rule, so fixed and sticky
   parts stay put); open dialogs sit in the top layer outside it and get their own. */
html.a11y-gray,html.a11y-gray dialog[open],html.a11y-gray dialog[open]::backdrop{filter:grayscale(1)}

/* High contrast: the light design at full strength — pure black on pure white, secondary greys and every
   rule black, deal red darkened to 8.2:1, a 4 px focus ring. */
html.a11y-high{--wp--preset--color--ink:#000;--wp--preset--color--ink-hover:#2B2B2B;--wp--preset--color--ink-line:#FFF;--wp--preset--color--fog:#FFF;--wp--preset--color--rule:#000;--wp--preset--color--field:#000;--wp--preset--color--graphite:#000;--wp--preset--color--mute:#1C1C1C;--wp--preset--color--smoke:#FFF;--wp--preset--color--red:#A3000B;--wp--preset--color--red-press:#7A0008;--wp--preset--color--flare:#FF8A8A;--wp--preset--color--go:#0B5A2E;--wp--preset--color--go-on-ink:#5BE38F}
html.a11y-high :focus-visible{outline-width:4px}

/* Negative contrast: white text on black, links yellow. Light surfaces turn black and black-filled
   controls (selected chips, "Everything") white, so the "on ink" greys turn dark; the bands that were
   already black (utility bar, footer, gate, ticket, black panels, today's row) keep their own colours,
   the panels with a grey edge so they stay apart from the black page. */
html.a11y-negative{color-scheme:dark;--wp--preset--color--ink:#FFF;--wp--preset--color--ink-hover:#D6D6D6;--wp--preset--color--paper:#000;--wp--preset--color--fog:#000;--wp--preset--color--concrete:#1A1A1A;--wp--preset--color--rule:#6E706B;--wp--preset--color--field:#A6A7A2;--wp--preset--color--graphite:#E6E6E3;--wp--preset--color--mute:#D2D3CE;--wp--preset--color--red:#FF5C5C;--wp--preset--color--red-press:#FF8585;--wp--preset--color--go:#3FCB74;--wp--preset--color--smoke:#434548;--wp--preset--color--flare:#D4111B;--wp--preset--color--go-on-ink:#1B7A42}
html.a11y-negative :is(.util,.site-footer,.gate,.ticket,.panel--ink,.is-style-panel-ink,.day.is-today,.site-main .signup:not(.signup--page)){--ink:#0B0B0B;--ink-2:#1C1C1C;--ink-hover:#2B2B2B;--ink-line:#2E2E2E;--paper:#FFF;--smoke:#A6A7A2;--flare:#FF4F4F;--go-on-ink:#3FCB74;--field:#85867F;--red:#D4111B;--red-press:#AE0E16}
html.a11y-negative :is(.ticket,.panel--ink,.is-style-panel-ink,.day.is-today,.site-main .signup:not(.signup--page)){border:1px solid #6E706B}
html.a11y-negative :is(a:not([class]),.link-arrow,.a11y__link){color:#FFE34D}
html.a11y-negative :is(.blog-topics .current-cat a,.blog-topics a[aria-current]){color:var(--paper)}
html.a11y-negative .actionbar{background:rgb(0 0 0/.97)}
html.a11y-negative .brand__img{filter:invert(1)}

/* Light background: no dark bands — those turn white with black text (a black edge keeps each panel a
   panel), the page is white. Text on red stays white. */
html.a11y-light{--wp--preset--color--fog:#FFF;--wp--preset--color--concrete:#F3F3F0}
html.a11y-light :is(.util,.site-footer,.gate,.ticket,.panel--ink,.is-style-panel-ink,.day.is-today,.site-main .signup:not(.signup--page)){--ink:#FFF;--ink-2:#F3F3F0;--ink-hover:#E8E8E4;--ink-line:#D6D7D2;--paper:#0B0B0B;--smoke:#434548;--flare:#D4111B;--go-on-ink:#1B7A42;--field:#85867F}
html.a11y-light :is(.util,.site-footer,.gate,.ticket,.panel--ink,.is-style-panel-ink,.day.is-today,.site-main .signup:not(.signup--page)) :is(.daytag,.rail__day.is-today,.btn--deal,.is-style-deal .wp-block-button__link,.tag--sale){--paper:#FFF}
html.a11y-light :is(.ticket,.panel--ink,.is-style-panel-ink,.day.is-today,.site-main .signup:not(.signup--page)){border:1.5px solid #0B0B0B}
html.a11y-light .util{border-bottom:1px solid #D6D7D2}
html.a11y-light .site-footer{border-top:1.5px solid #0B0B0B}
html.a11y-light :is(.gate__logo,.fbrand__logo){filter:invert(1)}

/* Underline links: every link, whatever the component says. */
html.a11y-links a{text-decoration-line:underline!important;text-decoration-thickness:max(1px,.08em);text-underline-offset:.18em}

/* Readable font: a plain, open sans in place of the condensed display face and the wide Archivo, no
   capitals-only text, no letter-spacing; headings a quarter smaller (they were sized for the condensed
   face) with room between lines. The ticket's weekday stamp keeps its face: it is decorative and fitted
   to its column. Chips drop the widths reserved for Archivo. */
html.a11y-font{--a11y-d:.75;--wp--preset--font-family--display:Arial,Helvetica,"Liberation Sans",Arimo,sans-serif;--wp--preset--font-family--body:Arial,Helvetica,"Liberation Sans",Arimo,sans-serif}
html.a11y-font body :not(.ticket__day,.ticket__day *){text-transform:none!important;letter-spacing:normal!important;font-stretch:100%!important}
html.a11y-font :is(h1,h2,.h1,.h2,.hero__h,.panel__h,.cta-band__h,.signup__h,.gate__title,.pdp__name,.post-lead__h,.post-card__h,.ticket__deal,.timeline__h,.drawer__main a,.drawer__locs summary,.filters__h,.day__name,.a11y__h){line-height:1.15}
html.a11y-font :is(.chip span,.chip-link)[style*="--cw"]{width:auto}

/* Stop animations: nothing moves — no animation, transition, smooth scroll or scroll reveal (a11y.js also
   pauses videos and running script animations; site.js and deals.js read the class as reduced motion). */
html.a11y-still,html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after,html.a11y-still ::backdrop{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-still [data-reveal]{opacity:1!important;transform:none!important}