/* Banner pictures (class-elathi-banner-pics.php). The picture is only the background; the text sits straight on its
   empty middle (no box) in white or dark, whichever reads best on that picture, with a soft glow behind the letters. */
.ink-light{--ebp-ink:#FFFFFF;--ebp-glow:rgba(0,0,0,.62)}
.ink-dark{--ebp-ink:#1E1E1E;--ebp-glow:rgba(255,255,255,.92)}
.ebp-wm,.ebp-ta{display:block;width:auto;max-width:100%;fill:currentColor;filter:drop-shadow(0 0 6px var(--ebp-glow,transparent))}
.ebp-ta{margin:2px auto 0}

/* home banner */
.eb-s.has-pic{position:relative;isolation:isolate;overflow:hidden;justify-content:center;text-align:center;aspect-ratio:390/223}
.eb-s.has-pic>.ebp-img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center}
.eb-s.has-pic .eb-tx{flex:0 1 auto;align-items:center;max-width:60%;gap:5px;--eb-ink:var(--ebp-ink)}
.eb-s.has-pic .eb-k{background:none;padding:0;color:var(--ebp-ink);text-shadow:0 0 10px var(--ebp-glow),0 0 3px var(--ebp-glow)}
.gl-vmain .eb-s.has-pic .eb-t{color:var(--ebp-ink);font-size:20px;text-shadow:0 0 14px var(--ebp-glow),0 0 4px var(--ebp-glow)}
.eb-s.has-pic .eb-t:has(.ebp-wm){display:block;-webkit-line-clamp:unset}
.eb-s.has-pic .eb-t .ebp-wm{height:40px;margin:0 auto}
.eb-s.has-pic .eb-t .ebp-ta{height:19px}
.eb-s.has-pic .eb-l{color:var(--ebp-ink);font-weight:600;text-shadow:0 0 12px var(--ebp-glow),0 0 3px var(--ebp-glow)}
.eb-s.has-pic .eb-n,.eb-s.has-pic .eb-n.is-warn{color:var(--ebp-ink)}
.eb-s.has-pic .eb-bs{justify-content:center}
.gl-vmain .eb .eb-s.has-pic.ink-light a.eb-btn{background:#FFFFFF;color:#1E1E1E}
.gl-vmain .eb .eb-s.has-pic.ink-dark a.eb-btn{background:#1E1E1E;color:#FFFFFF}
.eb-s.has-pic .eb-go{background:var(--ebp-ink);color:var(--ebp-glow)}
.eb-s.has-pic~.eb-nav,.eb-g:has(.eb-s.has-pic.on) .eb-nav{--eb-cur:#FFFFFF}
.eb-g:has(.eb-s.has-pic.on) .eb-dot::before{background:rgba(255,255,255,.55)}
.eb-g:has(.eb-s.has-pic.on) .eb-dot.on::before{background:#FFFFFF}
@media (min-width:783px){
 .eb-s.has-pic{aspect-ratio:auto;padding:28px 24px}
 .eb-s.has-pic .eb-tx{max-width:58%;gap:8px}
 .gl-vmain .eb-s.has-pic .eb-t{font-size:28px}
 .eb-s.has-pic .eb-t .ebp-wm{height:62px}
 .eb-s.has-pic .eb-t .ebp-ta{height:26px}
}

/* festival page top */
.efp.has-pic{isolation:isolate;background:var(--fx-sb,#7A1F2B)}
.efp.has-pic>.ebp-img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center}
.efp.has-pic .efp-in{color:var(--ebp-ink);max-width:62%;margin:0 auto}
.efp.has-pic .efp-kick,.efp.has-pic .efp-sub{color:var(--ebp-ink);text-shadow:0 0 12px var(--ebp-glow),0 0 3px var(--ebp-glow)}
.efp.has-pic .efp-h{color:var(--ebp-ink)}
.efp.has-pic.ink-light .efp-chip{background:#FFFFFF;color:#1E1E1E}
.efp.has-pic.ink-dark .efp-chip{background:#1E1E1E;color:#FFFFFF}
.efp .efp-h .ebp-wm{height:48px;margin:0 auto}
.efp .efp-h .ebp-ta{height:22px}
@media (min-width:783px){.efp .efp-h .ebp-wm{height:76px}.efp .efp-h .ebp-ta{height:30px}}

/* header band: the picture is a CSS background on .gl-band (printed in <head>); letters get the glow */
.gl-hero .gl-kick,.gl-hero .gl-sub{text-shadow:0 0 10px var(--ebp-glow,transparent),0 0 3px var(--ebp-glow,transparent)}
.gl-hero .gl-hwm>svg,.gl-hero .gl-hwm>img,.gl-hero .gl-lxm>img{filter:drop-shadow(0 0 5px var(--ebp-glow,transparent))}
.gl-l-fest .ebp-wm.gl-fhero{height:34px;max-width:260px}
@media (prefers-reduced-motion:reduce){.ebp-img{transition:none}}
.efp.has-pic .efp-dots,.efp.has-pic .efp-row,.efp.has-pic .efp-fl{display:none}
.gl-l-fest .gl-dot{display:var(--ebp-dots,block)}
.efp.has-pic .efp-chip{white-space:nowrap}
@media (max-width:782px){.efp.has-pic .efp-in{max-width:none;padding-left:18%;padding-right:18%}.efp.has-pic .efp-sub{max-width:24ch;margin-left:auto;margin-right:auto}}
.efp.has-pic .efp-sub{line-height:1.4}

/* phone search place (Settings › Shop interactions): top = round button in the address row, edge = box on the
   bottom edge of a taller picture. Computers keep the search box in their top row. */
.gl-sbtn{display:none}
@media (max-width:782px){
 .eps-top .gl-header .gl-sbtn{display:grid;place-items:center;flex:none;width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:999px;background:#FFFFFF;color:#14210F;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
 .gl-sbtn:active{transform:scale(.94)}
 .gl-sbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
 .eps-top .gl-header .gl-band .gl-search-m{display:none!important}
 .eps-top .gl-header:not([data-store="main"]) .gl-stage{height:118px}
 .eps-edge .gl-header:not([data-store="main"]){margin-bottom:30px}
 .eps-edge .gl-header:not([data-store="main"]) .gl-band{overflow:visible}
 .eps-edge .gl-header:not([data-store="main"]) .gl-band .gl-in{display:flex;flex-direction:column}
 .eps-edge .gl-header:not([data-store="main"]) .gl-band .gl-search-m{order:2;position:relative;z-index:3;margin:0 0 -26px;border:1px solid #E3E8E2}
 .eps-edge .gl-header:not([data-store="main"]) .gl-stage{height:156px}
}
@media (prefers-reduced-motion:reduce){.gl-sbtn{transition:none}}

/* open store tab = filled with the store's own colour, name in white (owner picked 1, 2026-11-02), on every store;
   the gliding curved shape that joined the band is gone. Specific selectors: the header part's own tab colours print later. */
.gl-header .gl-tabs .gl-tab{--tab-fill:#1F6B2E}
.gl-header .gl-tabs .gl-t-fest{--tab-fill:var(--fx-st,#4A0F1A)}
.gl-header .gl-tabs .gl-t-local{--tab-fill:#1F6B2E}
.gl-header .gl-tabs .gl-t-combo{--tab-fill:#5A4510}
.gl-header .gl-tabs .gl-t-offer{--tab-fill:#1E4FA3}
.gl-header .gl-tabs .gl-t-samayal{--tab-fill:#7A2E14}
.gl-header .gl-tabs .gl-ind{display:none}
.gl-header .gl-tabs .gl-tab.is-on{padding-bottom:20px}
.gl-header .gl-tabs[data-n="5"] .gl-tab.is-on{padding-bottom:18px}
.gl-header .gl-tabs .gl-tab.is-on::before{opacity:1;background:var(--tab-fill);border-color:var(--tab-fill)}
.gl-header .gl-tabs .gl-tab.is-on .gl-wm-on{opacity:0}
.gl-header .gl-tabs .gl-tab.is-on .gl-wm-off{opacity:1;filter:brightness(0) invert(1)}
.gl-header .gl-tabs .gl-tab.is-on .gl-lab,.gl-header .gl-tabs .gl-t-fest.is-on .gl-lab{color:#FFFFFF;opacity:1}
.gl-header .gl-tabs .gl-t-fest.is-on .gl-fsvg path{fill:#FFFFFF}
.gl-header .gl-tabs .gl-t-offer.is-on .gl-oz,.gl-header .gl-tabs .gl-t-offer.is-on .gl-oz small{color:#FFFFFF}
.gl-header .gl-tabs .gl-tab::before{transition:background-color .3s ease,border-color .3s ease,opacity .3s ease}
@media (prefers-reduced-motion:reduce){.gl-header .gl-tabs .gl-tab::before{transition:none}}
/* main shop picture (home page): the delivery promise words sit on the picture, so they get the light glow */
/* on the home page the main shop's picture is behind the promise, so its heading sits on a white card like the boxes
   beside it (owner, 2026-11-02: the words alone were hard to read on the picture) */
.home .gl-header[data-store="main"] .gl-promise .ep-head{justify-self:start;max-width:100%;padding:8px 14px 8px 8px;border-radius:12px;background:#FFFFFF;border:1.5px solid #E1EBD8}
@media (max-width:782px){.home .gl-header[data-store="main"] .gl-promise .ep-head{justify-self:stretch}}
/* open Home tab: the shop icon turns white (its tree shows the green fill through) */
.gl-header .gl-tabs .gl-t-main .gl-mk-on{display:none}
.gl-header .gl-tabs .gl-t-main.is-on .gl-mk-off{display:none}
.gl-header .gl-tabs .gl-t-main.is-on .gl-mk-on{display:block}
.gl-header .gl-tabs .gl-t-main .gl-lab{letter-spacing:.14em}