/* Shared navigation rebuilt from approved04. Body/recipe action clearances remain shared. */
/* Keep the approved zero-inset dimensions. The inline percentages resolve
 * against each full-width shell parent, avoiding a second inset on centred
 * desktop shells. QA may override platform variables; shipped values use env(). */
:root{
 --cp-platform-safe-top:env(safe-area-inset-top,0px);
 --cp-platform-safe-bottom:env(safe-area-inset-bottom,0px);
 --cp-platform-safe-left:env(safe-area-inset-left,0px);
 --cp-platform-safe-right:env(safe-area-inset-right,0px);
 --cp-header-base-height:64px;--cp-dock-base-height:clamp(68px,21vw,82px);
 --cp-header-height:calc(var(--cp-header-base-height) + var(--cp-platform-safe-top));
 --cp-dock-extra-bottom:max(0px,calc(var(--cp-platform-safe-bottom) - 9px));
 --cp-dock-height:calc(var(--cp-dock-base-height) + var(--cp-dock-extra-bottom));
 --cp-safe-inline-left:max(0px,calc(var(--cp-platform-safe-left) - (100vw - 100%)/2));
 --cp-safe-inline-right:max(0px,calc(var(--cp-platform-safe-right) - (100vw - 100%)/2));
 --cp-shell-surface:#061722;
}
/* Short landscape and keyboard viewports keep navigation in the visible shell. */
#app{min-height:min(490px,100dvh)}
:is(#app,.recipe-video-layout) [data-el-fereej-dock]{position:absolute!important;z-index:80!important;left:0!important;right:0!important;bottom:0!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;width:100%!important;height:var(--cp-dock-height)!important;min-height:var(--cp-dock-height)!important;flex:0 0 var(--cp-dock-height)!important;margin:0!important;padding:7px max(6px,var(--cp-safe-inline-right)) max(9px,var(--cp-platform-safe-bottom)) max(6px,var(--cp-safe-inline-left))!important;border:0!important;border-top:1px solid var(--cp-border)!important;border-radius:0!important;background:var(--cp-shell-surface)!important;color:var(--cp-text)!important;box-shadow:none!important;overflow:hidden}
:is(#app,.recipe-video-layout) [data-el-fereej-dock]::before,:is(#app,.recipe-video-layout) [data-el-fereej-dock]::after,:is(#app,.recipe-video-layout) [data-el-fereej-dock] .dock-lens{display:none!important}
:is(#app,.recipe-video-layout) [data-el-fereej-dock]>a{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;min-width:0!important;min-height:44px!important;margin:0!important;padding:3px 0 6px!important;border:0!important;border-radius:0!important;background:transparent!important;color:inherit!important;box-shadow:none!important;text-decoration:none!important}
:is(#app,.recipe-video-layout) [data-el-fereej-dock] .dock-glyph{display:grid!important;place-items:center!important;width:24px!important;height:24px!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
:is(#app,.recipe-video-layout) [data-el-fereej-dock] .dock-glyph svg{display:block;width:22px!important;height:22px!important;fill:none;stroke:currentColor;stroke-width:1.7!important;stroke-linecap:round;stroke-linejoin:round}
:is(#app,.recipe-video-layout) [data-el-fereej-dock] .dock-label{display:block!important;position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:nowrap!important;font:400 10px/1.1 Roboto,Arial,sans-serif!important;color:inherit!important}
:is(#app,.recipe-video-layout) [data-el-fereej-dock]>a[aria-current=page]{color:var(--cp-link)!important}
:is(#app,.recipe-video-layout) [data-el-fereej-dock]>a[aria-current=page]::after{content:'';position:absolute;bottom:0;left:50%;width:5px;height:5px;transform:translateX(-50%);border-radius:50%;background:var(--cp-link)}
.recipe-video-layout>[data-el-fereej-dock]{position:relative!important;grid-row:3}
html #app .system-brandbar,:is(#app,.recipe-video-layout) .system-brandbar{position:relative;z-index:24;display:flex;align-items:center;justify-content:space-between;height:var(--cp-header-height);min-height:var(--cp-header-height);flex:none;padding:calc(8px + var(--cp-platform-safe-top)) max(16px,var(--cp-safe-inline-right)) 8px max(16px,var(--cp-safe-inline-left));border:0;background:var(--cp-shell-surface);color:var(--cp-text)}
:is(#app,.recipe-video-layout) .system-brandbar .system-brand{position:relative;display:block;width:132px;height:44px;border:0;padding:0;background:transparent}
:is(#app,.recipe-video-layout) .system-brandbar .system-brand img[data-shrink-logo]{display:block;position:static;width:86px;height:44px;object-fit:contain;object-position:left center;scale:1!important;opacity:1}
:is(#app,.recipe-video-layout) .system-brandbar .system-brand::after{content:'';position:absolute;left:94px;top:3px;width:38px;height:38px;background:url('brand/courtyard-tile.svg') center/contain no-repeat;pointer-events:none}
:is(#app,.recipe-video-layout) .system-brandbar .system-account-actions{position:static;z-index:3;display:flex;align-items:center;gap:0}
:is(#app,.recipe-video-layout) .system-brandbar .system-account-actions button{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:0;padding:0;background:transparent!important;color:var(--cp-text);box-shadow:none!important}
:is(#app,.recipe-video-layout) .system-brandbar .system-account-actions svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:is(#app,.recipe-video-layout) .system-brandbar .system-account-actions img{width:34px;height:34px;padding:2px;border:1px solid var(--cp-border);border-radius:50%;background:var(--cp-card);object-fit:cover}
:is(#app,.recipe-video-layout) .system-brandbar [data-account-open-order]>i:last-child{position:absolute;right:9px;top:7px;width:8px;height:8px;border:1px solid var(--cp-canvas);border-radius:50%;background:var(--cp-coral)}
html #app.is-logo-compact .system-brandbar{height:var(--cp-header-height);min-height:var(--cp-header-height);padding:calc(8px + var(--cp-platform-safe-top)) max(16px,var(--cp-safe-inline-right)) 8px max(16px,var(--cp-safe-inline-left))}
html #app.is-logo-compact .system-brandbar .system-brand{width:132px;height:44px}
html #app.is-logo-compact .system-brandbar .system-brand img{width:86px;height:44px;opacity:1}
html #app.is-logo-compact .system-brandbar .system-brand::after{left:94px;top:3px;width:38px;height:38px}
#app .fr-account-actions,#app .et-account-actions{z-index:26!important}
@media(max-width:360px){:root{--cp-header-base-height:54px}html #app .system-brandbar,html #app.is-logo-compact .system-brandbar{padding:calc(7px + var(--cp-platform-safe-top)) max(12px,var(--cp-safe-inline-right)) 7px max(12px,var(--cp-safe-inline-left))}html #app .system-brandbar .system-brand,html #app.is-logo-compact .system-brandbar .system-brand{width:116px;height:42px}html #app .system-brandbar .system-brand img[data-shrink-logo],html #app.is-logo-compact .system-brandbar .system-brand img{width:74px;height:42px}html #app .system-brandbar .system-brand::after,html #app.is-logo-compact .system-brandbar .system-brand::after{left:82px;top:4px;width:34px;height:34px}}

/* Journeys scroll behind the shared rail; fixed actions remain above it. */
#app:not([data-route=discover]) :is(.rr-scroll,.mr-scroll,.retail-scroll,.et-scroll,.et-event-scroll,.qc-scroll,.mh-page,.bk-shell>main,.destination-pending,.rp-scroll,.ch-page){
 padding-bottom:calc(116px + var(--cp-dock-extra-bottom))!important;
 scroll-padding-bottom:calc(116px + var(--cp-dock-extra-bottom));
}
#app:not([data-route=discover]) :is(.rp-purchase,.ig-purchase,.ig-cook-action,.mt-actions){margin-bottom:calc(76px + var(--cp-dock-extra-bottom))!important}
#app .mr-basket{margin-bottom:calc(91px + var(--cp-dock-extra-bottom))!important}
#app[data-route=grocery] .grocery-plan-page .retail-scroll{padding-bottom:calc(180px + var(--cp-dock-extra-bottom))!important;scroll-padding-bottom:calc(180px + var(--cp-dock-extra-bottom))}


html[data-theme=light]{--cp-shell-surface:#fff}
html #app[data-route] .system-brandbar{height:var(--cp-header-height)!important;min-height:var(--cp-header-height)!important;padding:calc(8px + var(--cp-platform-safe-top)) max(16px,var(--cp-safe-inline-right)) 8px max(16px,var(--cp-safe-inline-left))!important}
@media(max-width:360px){html #app[data-route] .system-brandbar{padding:calc(7px + var(--cp-platform-safe-top)) max(12px,var(--cp-safe-inline-right)) 7px max(12px,var(--cp-safe-inline-left))!important}}

/* Match04's breathing room between Search, alerts and the account portrait. */
html #app .system-brandbar .system-account-actions{gap:4px}
html #app .system-brandbar [data-header-search]{margin-right:8px}
html #app .system-brandbar [data-header-search] svg{width:26px;height:26px}


/* In short landscape, keep the ingredient heading, choices and shopping action
 * in one reachable flow instead of allowing the nested ingredient list to reach
 * zero height. The shared masthead and dock stay outside this scrolling page. */
@media(max-height:430px){
 #app[data-route=ingredients] .ig-page{display:block;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(var(--cp-dock-height) + 12px);scroll-padding-bottom:calc(var(--cp-dock-height) + 12px)}
 #app[data-route=ingredients] .ig-page .ig-scroll{height:auto;max-height:none;overflow:visible}
}