/* sfd-menu.css · Stepfox Food Delivery · P-MENU · ceiling 35 lines (SPEC §3.1, §4.1): mechanics + token reads only — menu-nav sticky/scroller + scrollspy indicator, menu search, dishes rail, add-button states + in-bag stepper morph, favourite heart swap, share, option rows (states, chips, shake), quantity stepper, note counter, dish form. Looks and the twin style the roots. */
.sfd-menu-nav{position:sticky;top:var(--sfd-header-h);z-index:90;display:flex;background:var(--sfd-bg);align-items:center;gap:var(--wp--preset--spacing--20,.75em);min-width:0}.sfd-menu-nav__search{flex:0 1 20em;min-width:0}
.sfd-menu-nav__scroller{position:relative;flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.sfd-menu-nav__scroller::-webkit-scrollbar{display:none}.sfd-menu-nav--more .sfd-menu-nav__scroller{overflow:visible}
.sfd-menu-nav__list,.sfd-menu-nav__more-list{display:flex;gap:.25em;margin:0;padding:0;list-style:none;white-space:nowrap}.sfd-menu-nav__item,.sfd-menu-nav__more{flex:none}
.sfd-menu-nav__link{display:inline-flex;align-items:center;gap:.25em;min-height:44px;padding:0 .875em;color:var(--sfd-muted);text-decoration:none;border-radius:var(--sfd-radius-pill);cursor:pointer;transition:color var(--sfd-dur-1) var(--sfd-ease)}.sfd-menu-nav__link:hover,.sfd-menu-nav__link[aria-current="true"],.sfd-menu-nav__details[open]>.sfd-menu-nav__summary{color:var(--sfd-ink)}
.sfd-menu-nav__indicator{position:absolute;left:0;bottom:0;width:0;height:.1875rem;background:var(--sfd-accent);border-radius:var(--sfd-radius-pill);pointer-events:none;transition:transform var(--sfd-dur-3) var(--sfd-ease),width var(--sfd-dur-3) var(--sfd-ease)}
.sfd-menu-nav__summary{list-style:none}.sfd-menu-nav__summary::-webkit-details-marker{display:none}.sfd-menu-nav__more{position:relative}.sfd-menu-nav__more-list{position:absolute;inset-inline-end:0;top:100%;z-index:30;flex-direction:column;min-width:12em;padding:.375em;background:var(--sfd-surface);border-radius:var(--sfd-radius-lg);box-shadow:var(--sfd-shadow-pop)}
.sfd-menu-section{scroll-margin-top:calc(var(--sfd-header-h) + var(--sfd-menu-nav-h,0px))}.sfd-dishes__item{scroll-margin-top:calc(var(--sfd-header-h) + var(--sfd-menu-nav-h,0px) + 1em)}.sfd-menu-section:focus:not(:focus-visible){outline:0}
.sfd-menu-search{position:relative;display:flex;align-items:center;gap:.5em;padding:0 .25em 0 .875em;color:var(--sfd-ink);background:var(--sfd-surface-2);border-radius:var(--sfd-radius-pill)}.sfd-menu-search:has(.sfd-menu-search__input:focus-visible){box-shadow:var(--sfd-shadow-focus)}.sfd-menu-search__icon{flex:none;color:var(--sfd-muted)}
.sfd-menu-search__input{flex:1;min-width:0;min-height:44px;padding:0;font:inherit;color:inherit;background:transparent;border:0;appearance:none}.sfd-menu-search__input:focus-visible{outline:0}.sfd-menu-search__input::-webkit-search-cancel-button{appearance:none}
.sfd-menu-search__clear,.sfd-add-button__dec,.sfd-add-button__inc,.sfd-qty__btn,.sfd-share,.sfd-favorite__btn{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:.375em;min-width:44px;min-height:44px;padding:0;font:inherit;color:inherit;background:transparent;border:0;border-radius:var(--sfd-radius-pill);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sfd-dishes--grid,.sfd-dishes--list{display:grid;gap:var(--wp--preset--spacing--30,1rem)}.sfd-dishes--rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--sfd-rail-item);gap:var(--wp--preset--spacing--30,1rem);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}.sfd-dishes--rail.sfd-dishes--compact{grid-auto-columns:var(--sfd-rail-item-compact,var(--wp--custom--sfd--rail-item-compact,168px))}.sfd-dishes--rail::-webkit-scrollbar{display:none}.sfd-dishes--rail>.sfd-dishes__item{min-width:0;scroll-snap-align:start}
.sfd-add-button{--sfd-add-bg:var(--sfd-accent);--sfd-add-fg:var(--sfd-on-accent);position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.375em;min-width:2.25rem;min-height:2.25rem;padding:0 .875em;font:inherit;font-weight:var(--wp--custom--sfd--strong,700);color:var(--sfd-add-fg);background:var(--sfd-add-bg);border:0;border-radius:var(--sfd-radius-pill);box-shadow:var(--sfd-shadow-xs);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--sfd-dur-1) var(--sfd-ease),color var(--sfd-dur-1) var(--sfd-ease),transform var(--sfd-dur-1) var(--sfd-ease)}
.sfd-add-button:not(.is-stepper)::before{content:"";position:absolute;inset:min(0px,calc(50% - 44px / 2))}.sfd-add-button--plus:not(.is-stepper):not(.is-sold-out){width:2.25rem;height:2.25rem;padding:0}.sfd-add-button:active{transform:scale(.92)}.sfd-add-button:focus-visible,.sfd-favorite__btn:focus-visible,.sfd-share:focus-visible{outline:0;box-shadow:var(--sfd-shadow-focus)}
.sfd-add-button.is-in-cart{--sfd-add-bg:var(--sfd-ink);--sfd-add-fg:var(--sfd-bg)}.sfd-add-button.is-closed,.sfd-add-button.is-unavailable{--sfd-add-bg:var(--sfd-accent-soft);--sfd-add-fg:var(--sfd-accent-ink)}.sfd-add-button.is-sold-out{--sfd-add-bg:var(--sfd-surface-3);--sfd-add-fg:var(--sfd-muted);cursor:default;font-size:var(--wp--preset--font-size--small,.8125em)}.sfd-add-button[aria-busy="true"]{cursor:progress}
.sfd-add-button__count{position:absolute;top:0;right:0;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .3em;box-sizing:border-box;font-size:var(--wp--preset--font-size--x-small,.75rem);font-variant-numeric:var(--sfd-nums,tabular-nums);color:var(--sfd-on-accent);background:var(--sfd-accent);border-radius:var(--sfd-radius-pill);transform:translate(40%,-40%)}
.sfd-add-button.is-stepper{--sfd-add-bg:var(--sfd-surface);--sfd-add-fg:var(--sfd-ink);gap:0;padding:0;box-shadow:var(--sfd-shadow-float);animation:sfd-add-morph var(--sfd-dur-2) var(--sfd-spring)}.sfd-add-button.is-stepper .sfd-add-button__count{position:static;min-width:1.5em;color:inherit;background:none;font:inherit;font-variant-numeric:var(--sfd-nums,tabular-nums);transform:none}.sfd-add-button__dec,.sfd-add-button__inc{min-width:2.25rem;min-height:2.25rem}
.sfd-favorite{--sfd-fav-fg:var(--sfd-ink);display:inline-flex;margin:0}.sfd-rrow>.sfd-favorite{position:relative;z-index:1}.sfd-favorite.is-on{--sfd-fav-fg:var(--sfd-accent)}.sfd-favorite__btn{color:var(--sfd-fav-fg);background:var(--sfd-surface);box-shadow:var(--sfd-shadow-xs)}.sfd-favorite--icon-label .sfd-favorite__btn,.sfd-share{padding:0 1em}.sfd-share{color:var(--sfd-ink);background:var(--sfd-surface)}
.sfd-favorite .sfd-favorite__on,.sfd-favorite.is-on .sfd-favorite__off{display:none}.sfd-favorite.is-on .sfd-favorite__on{display:inline-block}.sfd-favorite.is-pop .sfd-favorite__on{animation:sfd-fav-pop var(--sfd-dur-4) var(--sfd-spring)}.sfd-favorite__btn[aria-busy="true"]{cursor:progress}
.sfd-options{display:flex;flex-direction:column;gap:var(--wp--preset--spacing--40,1.5em)}.sfd-options__group{min-width:0;margin:0;padding:0;border:0}.sfd-options__legend{display:flex;box-sizing:border-box;width:100%;align-items:baseline;justify-content:space-between;gap:.5em;margin:0 0 .25em;padding:0}
.sfd-options__rule,.sfd-options__delta,.sfd-item-note__count,.sfd-item-note__help{color:var(--sfd-muted);font-size:var(--wp--preset--font-size--small,.875em);font-variant-numeric:var(--sfd-nums,tabular-nums)}.sfd-options__group.is-required .sfd-options__rule{color:var(--sfd-ink-2)}.sfd-options__group.is-invalid .sfd-options__rule,.sfd-options__error,.sfd-item-note.is-near .sfd-item-note__count,.sfd-dish-dialog__notice{color:var(--sfd-danger-ink)}
.sfd-options__choice{position:relative;display:flex;align-items:center;gap:.75em;min-height:44px;padding:.375em 0;border-bottom:1px solid var(--sfd-line);cursor:pointer}.sfd-options__label{flex:1;min-width:0}.sfd-options__input{flex:none;width:1.25rem;height:1.25rem;margin:0;accent-color:var(--sfd-accent);cursor:inherit}
.sfd-options__choice.is-sold-out,.sfd-options__choice.is-max{cursor:not-allowed;opacity:.5}.sfd-options__choice.is-sold-out .sfd-options__label{text-decoration:line-through}.sfd-options__choice:has(:focus-visible){box-shadow:var(--sfd-shadow-focus)}.sfd-options__error{margin:.5em 0 0;font-size:var(--wp--preset--font-size--small,.875em)}
.sfd-options--chips .sfd-options__group{display:flex;flex-wrap:wrap;gap:.5em}.sfd-options--chips .sfd-options__choice{padding:0 1em;color:var(--sfd-chip-fg);background:var(--sfd-chip-bg);border:0;border-radius:var(--sfd-radius-pill)}.sfd-options--chips .sfd-options__choice:has(:checked){--sfd-chip-bg:var(--sfd-chip-bg-on);--sfd-chip-fg:var(--sfd-chip-fg-on)}
.sfd-options--chips .sfd-options__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;appearance:none}.sfd-options--chips .sfd-options__error{flex-basis:100%}.sfd-options__group.is-shake{animation:sfd-shake var(--sfd-dur-3) var(--sfd-ease)}
.sfd-qty{display:inline-flex;align-items:center;color:var(--sfd-ink);background:var(--sfd-surface-2);border-radius:var(--sfd-radius-pill)}.sfd-qty__btn:disabled{cursor:default;opacity:.35}.sfd-qty__btn:focus-visible,.sfd-menu-search__clear:focus-visible{outline:0;box-shadow:var(--sfd-shadow-focus)}
.sfd-qty__input{width:2.5ch;min-height:44px;margin:0;padding:0;font:inherit;font-weight:var(--wp--custom--sfd--strong,700);font-variant-numeric:var(--sfd-nums,tabular-nums);text-align:center;color:inherit;background:transparent;border:0;appearance:textfield;-moz-appearance:textfield}.sfd-qty__input::-webkit-inner-spin-button,.sfd-qty__input::-webkit-outer-spin-button{margin:0;appearance:none}
.sfd-item-note{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.375em .75em}.sfd-item-note__input,.sfd-item-note__help{grid-column:1/-1}.sfd-item-note__help{margin:0}.sfd-item-note__count{transition:color var(--sfd-dur-1) var(--sfd-ease)}
.sfd-item-note__input{box-sizing:border-box;width:100%;min-height:44px;padding:.625em .875em;font:inherit;color:var(--sfd-ink);background:var(--sfd-surface);border:1px solid var(--sfd-edge);border-radius:var(--sfd-radius-md);resize:vertical}.sfd-item-note__input:focus-visible{outline:0;border-color:var(--sfd-ink);box-shadow:var(--sfd-shadow-focus)}
.sfd-dish-dialog__form{margin:0}.sfd-add-submit{flex:1;min-width:0;min-height:44px;padding:0 1.25em;font:inherit;font-weight:var(--wp--custom--sfd--strong,700);font-variant-numeric:var(--sfd-nums,tabular-nums);color:var(--sfd-on-accent);background:var(--sfd-accent);border:0;border-radius:var(--sfd-radius-pill);cursor:pointer}.sfd-add-submit:disabled{cursor:not-allowed;opacity:.55}.sfd-add-submit[aria-busy="true"]{cursor:progress;opacity:.8}
.sfd-dish-dialog__notice{margin:0;padding:.75em 1.25em;background:var(--sfd-danger-soft)}.sfd-dish-dialog__notice a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-weight:var(--wp--custom--sfd--strong,700);text-decoration:underline;text-underline-offset:.15em}.sfd-dish-dialog .sfd-state--sold-out-now{margin:var(--wp--preset--spacing--30,1rem);padding:var(--wp--preset--spacing--30,1rem);text-align:center;background:var(--sfd-danger-soft);border-radius:var(--sfd-radius-lg)}.sfd-dish-dialog.is-editor-inline{position:static;display:block;max-height:none}.sfd-dish-dialog[open]:not(:modal):not(.is-editor-inline){position:fixed;inset:0;z-index:100000}
@keyframes sfd-add-morph{from{transform:scale(.7);opacity:.5}}@keyframes sfd-fav-pop{40%{transform:scale(1.3)}}@keyframes sfd-shake{20%,60%{transform:translateX(-.375rem)}40%,80%{transform:translateX(.375rem)}}@keyframes sfd-flash{50%{opacity:.4}}
@media (max-width:768px){.sfd-menu-nav{flex-wrap:wrap;row-gap:0}.sfd-menu-nav__search{flex-basis:100%}.sfd-dishes--rail{grid-auto-columns:var(--sfd-rail-item-mobile)}}
@media (prefers-reduced-motion:reduce){.sfd-menu-nav__indicator,.sfd-menu-nav__link,.sfd-add-button,.sfd-item-note__count{transition:none}.sfd-add-button.is-stepper,.sfd-favorite.is-pop .sfd-favorite__on{animation:none}.sfd-options__group.is-shake{animation:sfd-flash var(--sfd-dur-3) var(--sfd-ease)}}