/* Uses existing font scale, theme colours and wrap system. */
header #channel-control{display:flex;align-items:center;gap:.4rem;margin-inline-start:auto;min-width:0;max-width:100%}
.channel-active{font-size:1rem;font-weight:600;line-height:1.35;white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:none;min-width:min-content}
.channel-menu{position:relative;min-width:0;max-width:100%}
.channel-menu>summary{display:flex;align-items:center;justify-content:space-between;gap:.65rem;min-width:48px;min-height:48px;padding:.45rem .75rem;color:#fff;background:#ffffff12;border:1px solid #ffffff66;cursor:pointer;list-style:none;border-radius:12px;box-sizing:border-box;max-width:100%}
.channel-dots{font-size:1.8rem;font-weight:700;line-height:1;flex:0 0 auto}
.channel-menu>summary:focus-visible{outline:3px solid #8ee1bf;outline-offset:3px}
.channel-menu>summary:hover{background:#ffffff24}
.channel-menu>summary::-webkit-details-marker{display:none}
.channel-options{position:absolute;z-index:100;inset-inline-end:0;top:100%;width:max-content;max-width:min(18rem,calc(100vw - 32px));padding:.6rem;display:grid;gap:.45rem;background:var(--card,#fff);color:var(--text,#182c26);border:1px solid var(--line,#dbe4df);border-radius:12px;box-shadow:0 8px 24px #0003}
.channel-options strong{font-size:.85rem;overflow-wrap:normal;word-break:normal}
.channel-options button,.channel-admin-selector button{white-space:normal;word-break:normal;overflow-wrap:normal}
.channel-admin-selector{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:.8rem}
.channel-admin-selector [aria-pressed=true]{outline:2px solid #26a879}
.food-quick{grid-column:1/-1;font-size:.9rem;margin-block:.25rem}
.food-quick>summary{cursor:pointer;padding:.4rem 0;min-height:44px;display:flex;align-items:center}
.channel-customer-form{display:flex;flex-wrap:wrap;align-items:end;gap:.6rem;margin-block:.6rem}
.channel-customer-form label{flex:1 1 10rem;min-width:0;max-width:100%}
.channel-customer-form input{width:100%;display:block}
.channel-customer-form button{flex:0 0 auto;white-space:nowrap}
.channel-customer-form h3,.channel-customer-form p{flex-basis:100%;margin:.25rem 0}
.channel-customer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding-block:.65rem;border-block-end:1px solid var(--line,#dbe4df)}
.channel-customer-row>span{flex:1 1 12rem;overflow-wrap:anywhere}
.channel-customer-row small{display:block;opacity:.75}
.channel-customer-row>div{display:flex;flex-wrap:wrap;gap:.4rem}
.channel-customer-row button{white-space:nowrap}
body.theme-dark .channel-options,html[data-theme=dark] .channel-options{background:#13251f;color:#e6f2ec}
@media(max-width:480px){header #channel-control{flex:0 1 auto}}
/* With four header controls, use measured flow instead of the legacy centered overlay. */
header.has-customer-channel .lang-switch,body.rtl header.has-customer-channel .lang-switch{position:static;transform:none;inset:auto;margin:0;flex-shrink:0}
header.has-customer-channel .brand{flex:1 1 auto}
body.rtl header.has-customer-channel #channel-control{order:-1;margin-inline-start:0;margin-inline-end:.3rem}
.channel-options{inset-inline-end:auto;right:0;left:auto}
.channel-options{position:fixed;right:16px;left:auto;top:var(--channel-menu-top,100px);max-height:calc(100dvh - var(--channel-menu-top,100px) - 12px);overflow:auto}
/* v1.4.0: persistent root interpolation also covers newly rendered controls. */
@property --fo-channel-accent{syntax:'<color>';inherits:true;initial-value:#168b5b}
@property --fo-channel-ink{syntax:'<color>';inherits:true;initial-value:#123b30}
@property --fo-channel-tint{syntax:'<color>';inherits:true;initial-value:#e0eee5}
:root{--fo-channel-accent:#168b5b;--fo-channel-ink:#123b30;--fo-channel-tint:#e0eee5;transition:--fo-channel-accent 250ms ease-in-out,--fo-channel-ink 250ms ease-in-out,--fo-channel-tint 250ms ease-in-out}
:root[data-customer-channel=food]{--fo-channel-accent:#245b91;--fo-channel-ink:#173b63;--fo-channel-tint:#e4edf7}
main,dialog{--green:var(--fo-channel-ink)}
body .scan-action,body.theme-dark .scan-action{background:var(--fo-channel-accent)!important;border-color:var(--fo-channel-accent)!important;box-shadow:0 4px 12px color-mix(in srgb,var(--fo-channel-accent) 22%,transparent)}
nav button.active,.step{background:var(--fo-channel-tint);color:var(--fo-channel-ink)}
.product.selected{border-color:var(--fo-channel-accent);background:var(--fo-channel-tint)}
.channel-active::before{content:'';display:inline-block;width:.55em;height:.55em;border-radius:50%;margin-inline-end:.5em;background:var(--fo-channel-accent);box-shadow:0 0 0 1px #ffffff99}
[data-channel=key_account]{--option-accent:#168b5b}
[data-channel=food]{--option-accent:#245b91}
.channel-options button,.channel-admin-selector button{color:var(--option-accent)}
.channel-options button::before,.channel-admin-selector button::before{content:'●';margin-inline-end:.45em}
.channel-options [aria-pressed=true],.channel-admin-selector [aria-pressed=true]{outline:2px solid var(--option-accent);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){:root{transition:none}}

.channel-options button::before,.channel-admin-selector button::before{color:var(--option-accent)}