/* El Fereej mobile dock: one floating glass rail with crisp vector glyphs. */
#app [data-el-fereej-dock]{
 --dock-edge:rgba(225,220,208,.18);
 --dock-ink:#e7e4dc;
 --dock-active:#fffaf0;
 position:relative!important;
 isolation:isolate;
 align-self:center;
 flex:0 0 66px!important;
 width:calc(100% - 24px)!important;
 height:66px!important;
 min-height:66px;
 margin:0 12px max(8px,env(safe-area-inset-bottom))!important;
 padding:5px!important;
 display:grid!important;
 grid-template-columns:repeat(5,minmax(44px,1fr))!important;
 gap:0!important;
 overflow:hidden;
 border:1px solid transparent!important;
 border-radius:34px!important;
 color:var(--dock-ink);
 background:
  radial-gradient(ellipse 46% 78% at 50% 3%,rgba(255,255,255,.055),transparent 72%) padding-box,
  linear-gradient(112deg,rgba(18,20,19,.86),rgba(26,27,24,.76) 48%,rgba(10,12,11,.88)) padding-box,
  linear-gradient(115deg,rgba(239,229,205,.12),rgba(120,151,139,.075) 48%,rgba(230,172,128,.09)) border-box!important;
 -webkit-backdrop-filter:blur(12px) saturate(1.12)!important;
 backdrop-filter:blur(12px) saturate(1.12)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.08),
  inset 0 -1px 0 rgba(4,12,9,.46),
  0 10px 28px rgba(0,0,0,.26),
  0 2px 7px rgba(7,28,21,.18)!important;
}
#app [data-el-fereej-dock]::before{
 content:'';
 position:absolute;
 z-index:0;
 pointer-events:none;
 inset:1px 17%;
 border-radius:31px;
 background:radial-gradient(ellipse 68% 52% at 50% 0,rgba(255,255,255,.05),transparent 78%);
 filter:blur(.2px);
}
#app [data-el-fereej-dock]::after{
 content:'';
 position:absolute;
 z-index:0;
 pointer-events:none;
 left:8%;right:8%;top:1px;height:1px;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
#app [data-el-fereej-dock]>a,#app [data-el-fereej-dock]>button{
 position:relative!important;
 z-index:2!important;
 width:100%;
 min-width:44px!important;
 min-height:44px!important;
 height:56px!important;
 margin:0!important;
 padding:0!important;
 display:grid!important;
 place-items:center!important;
 border:0!important;
 border-radius:50%!important;
 background:none!important;
 box-shadow:none!important;
 color:inherit;
 -webkit-backdrop-filter:none!important;
 backdrop-filter:none!important;
 transform:none;
}
#app [data-el-fereej-dock]>a[aria-current=page],#app [data-el-fereej-dock]>button[aria-current=page]{color:var(--dock-active)!important}
#app [data-el-fereej-dock] .dock-label{
 position:absolute!important;
 width:1px!important;height:1px!important;
 padding:0!important;margin:-1px!important;
 overflow:hidden!important;
 clip:rect(0 0 0 0)!important;
 clip-path:inset(50%)!important;
 white-space:nowrap!important;
 border:0!important;
}
#app [data-el-fereej-dock] .dock-coach{
 position:absolute;
 z-index:50;
 left:50%;
 bottom:61px;
 translate:-50% 4px;
 min-width:max-content;
 padding:7px 10px;
 border:1px solid rgba(225,220,208,.2);
 border-radius:999px;
 background:rgba(13,20,17,.94);
 color:#fffaf0;
 box-shadow:0 8px 20px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08);
 opacity:0;
 visibility:hidden;
 pointer-events:none;
 font-size:10px;
 font-weight:700;
 line-height:1;
 white-space:nowrap;
}
#app [data-el-fereej-dock].show-market-coach{overflow:visible}
#app [data-el-fereej-dock].show-market-coach [data-open="market-entry"] .dock-coach{
 visibility:visible;
 animation:dock-market-coach 2800ms ease both;
}
html[data-theme=light] #app [data-el-fereej-dock] .dock-coach{
 border-color:rgba(23,83,72,.15);
 background:rgba(255,253,247,.97);
 color:#173d35;
 box-shadow:0 8px 20px rgba(49,69,60,.18),inset 0 1px rgba(255,255,255,.7);
}
@keyframes dock-market-coach{
 0%{opacity:0;translate:-50% 7px}
 16%,76%{opacity:1;translate:-50% 0}
 100%{opacity:0;translate:-50% -3px}
}
#app [data-el-fereej-dock] .dock-glyph{
 position:static!important;
 display:grid!important;
 place-items:center;
 width:24px!important;height:24px!important;
 margin:0!important;
 color:currentColor;
 transform:none!important;
 filter:none!important;
 transition:color 180ms ease;
}
#app [data-el-fereej-dock] .dock-glyph svg{
 display:block;
 width:24px!important;height:24px!important;
 max-width:none!important;max-height:none!important;
 fill:none;
 stroke:currentColor;
 stroke-width:2;
 vector-effect:non-scaling-stroke;
 shape-rendering:geometricPrecision;
 filter:none!important;
}
#app [data-el-fereej-dock]>a[aria-current=page] .dock-glyph,#app [data-el-fereej-dock]>button[aria-current=page] .dock-glyph{
 transform:none!important;
 filter:none!important;
}
#app [data-el-fereej-dock] .dock-lens{
 display:block!important;
 position:absolute!important;
 z-index:1!important;
 inset:auto;
 margin:0!important;
 border:1px solid rgba(240,230,208,.14)!important;
 border-radius:50%!important;
 background:
  radial-gradient(circle at 31% 18%,rgba(255,255,255,.13),transparent 31%),
  radial-gradient(circle at 66% 76%,rgba(152,180,167,.065),transparent 58%),
  linear-gradient(145deg,rgba(255,255,255,.055),rgba(24,30,27,.16))!important;
 -webkit-backdrop-filter:none!important;
 backdrop-filter:none!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  inset 0 -8px 16px rgba(0,28,20,.11),
  0 4px 14px rgba(0,0,0,.16)!important;
 pointer-events:none;
}
#app [data-el-fereej-dock] .dock-lens.is-moving{transition:none!important}
html[data-theme=light] #app [data-el-fereej-dock]{
 --dock-edge:rgba(23,83,72,.15);
 --dock-ink:#39433f;
 --dock-active:#173d35;
 background:
  radial-gradient(ellipse 48% 80% at 50% 2%,rgba(255,255,255,.48),transparent 71%) padding-box,
  linear-gradient(112deg,rgba(255,254,249,.76),rgba(244,242,236,.66) 48%,rgba(255,248,239,.70)) padding-box,
  linear-gradient(115deg,rgba(255,255,255,.50),rgba(112,139,128,.13) 48%,rgba(214,143,95,.13)) border-box!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.58),
  inset 0 -1px 0 rgba(38,88,74,.08),
  0 9px 25px rgba(49,69,60,.13),
  0 2px 7px rgba(120,82,55,.06)!important;
}
html[data-theme=light] #app [data-el-fereej-dock] .dock-lens{
 border-color:rgba(36,91,78,.17)!important;
 background:
  radial-gradient(circle at 31% 18%,rgba(255,255,255,.65),transparent 34%),
  radial-gradient(circle at 68% 76%,rgba(112,145,132,.075),transparent 60%),
  linear-gradient(145deg,rgba(255,255,255,.30),rgba(219,222,214,.20))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.66),inset 0 -8px 15px rgba(39,103,85,.05),0 4px 13px rgba(53,87,75,.11)!important;
}
@media(max-width:360px){
 #app [data-el-fereej-dock]{
  width:calc(100% - 16px)!important;
  margin-left:8px!important;margin-right:8px!important;
  grid-template-columns:repeat(5,minmax(44px,1fr))!important;
 }
 #app [data-el-fereej-dock] .dock-glyph svg{width:24px!important;height:24px!important}
}
@media(prefers-reduced-motion:reduce){
 #app [data-el-fereej-dock] .dock-lens,
 #app [data-el-fereej-dock] .dock-lens.is-moving,
 #app [data-el-fereej-dock] .dock-glyph{transition:none!important}
 #app [data-el-fereej-dock].show-market-coach [data-open="market-entry"] .dock-coach{animation:none;opacity:1;translate:-50% 0}
}
@media(prefers-reduced-transparency:reduce){
 #app [data-el-fereej-dock]{background:#0c1713!important}
 html[data-theme=light] #app [data-el-fereej-dock]{background:#f7f4ed!important}
}


/* Non-discovery pages let their content travel underneath the frosted dock. */
#app:not([data-route=discover]) [data-el-fereej-dock]{
 position:absolute!important;
 z-index:30!important;
 left:0;right:0;bottom:0;
}
#app:not([data-route=discover]) :is(.rr-scroll,.mr-scroll,.retail-scroll,.et-scroll,.et-event-scroll,.mh-page,.bk-shell>main,.destination-pending,.rp-scroll,.ch-page){
 padding-bottom:116px!important;
 scroll-padding-bottom:116px;
}
#app:not([data-route=discover]) :is(.rp-purchase,.ig-purchase,.ig-cook-action,.mt-actions){
 margin-bottom:76px!important;
}
#app[data-route=grocery] .grocery-plan-page .retail-scroll{
 padding-bottom:180px!important;
 scroll-padding-bottom:180px;
}
@media(max-width:360px){
 #app[data-route=grocery] .grocery-plan-page .retail-scroll{
  padding-bottom:168px!important;
  scroll-padding-bottom:168px;
 }
}


/* Fereejna masthead shared system header */
#app .system-brandbar{
 height:66px;flex:none;padding:7px 14px 0;
 display:flex;align-items:flex-start;justify-content:space-between;
 position:relative;z-index:24;
 background:
  radial-gradient(ellipse 72% 140% at 16% 3%,rgba(62,124,103,.11),transparent 72%),
  radial-gradient(ellipse 90% 120% at 82% 98%,rgba(21,86,72,.12),transparent 76%),
  #050605;
 transition:height 190ms cubic-bezier(.22,.72,.24,1),padding 190ms cubic-bezier(.22,.72,.24,1);
}
html[data-theme=light] #app .system-brandbar{
 background:radial-gradient(circle at 50% 100%,rgba(104,154,134,.08),transparent 60%),#fbf9f5;
}
#app .system-brandbar .system-brand{
 width:200px;height:58px;display:grid;place-items:center;
 transition:width 190ms cubic-bezier(.22,.72,.24,1),height 190ms cubic-bezier(.22,.72,.24,1);
}
#app .system-brandbar .system-brand img{
 display:block;width:194px;height:58px;object-fit:contain;object-position:center;
 scale:1!important;opacity:1;
 transition:width 190ms cubic-bezier(.22,.72,.24,1),height 190ms cubic-bezier(.22,.72,.24,1),opacity 190ms ease;
}
#app .system-brandbar .system-account-actions{position:absolute;z-index:3;right:12px;top:7px;display:flex;align-items:center;gap:4px}
#app .system-brandbar .system-account-actions button{position:relative;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(235,229,215,.13);border-radius:50%;background:rgba(7,18,14,.32);color:inherit;box-shadow:inset 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px)}
#app .system-brandbar .system-account-actions svg{width:20px;height:20px}
#app .system-brandbar .system-account-actions img{width:31px;height:31px;border:1px solid rgba(235,229,215,.18);border-radius:50%;object-fit:cover}
#app .system-brandbar .system-account-actions button:first-child>i:last-child{position:absolute;right:7px;top:6px;width:7px;height:7px;border:1px solid var(--page);border-radius:50%;background:#eaa77a}
html[data-theme=light] #app .system-brandbar .system-account-actions button{border-color:rgba(21,59,53,.12);background:rgba(255,255,255,.55);box-shadow:inset 0 1px rgba(255,255,255,.72)}
/* Discovery and El Tasheh keep their route-specific controls, but those
   controls must remain above the shared masthead's composited glass layer. */
#app .fr-account-actions,#app .et-account-actions{z-index:26!important}
#app.is-logo-compact:not([data-route=discover]) .system-brandbar{height:50px;padding-top:1px}
#app.is-logo-compact:not([data-route=discover]) .system-brandbar .system-brand{width:154px;height:48px}
#app.is-logo-compact:not([data-route=discover]) .system-brandbar .system-brand img{width:148px;height:48px;scale:1!important;opacity:.94}
#app.is-logo-compact:not([data-route=discover]) .system-brandbar .system-account-actions{top:2px}
/* Kitchen scroll anchoring measures the final header geometry synchronously.
   Keep the logo motion, but do not tween the outer layout height. */
#app[data-route=kitchens] .system-brandbar{transition:none}
@media(max-width:330px){
 #app .system-brandbar{height:62px;padding:5px 9px 0}
 #app .system-brandbar .system-brand{width:166px;height:54px}
 #app .system-brandbar .system-brand img{width:160px;height:54px}
 #app.is-logo-compact:not([data-route=discover]) .system-brandbar{height:48px;padding-top:0}
 #app.is-logo-compact:not([data-route=discover]) .system-brandbar .system-brand{width:140px;height:46px}
 #app.is-logo-compact:not([data-route=discover]) .system-brandbar .system-brand img{width:134px;height:46px}
}
@media(prefers-reduced-motion:reduce){
 #app .system-brandbar,#app .system-brandbar .system-brand,#app .system-brandbar .system-brand img{transition:none!important}
}