/* Home banners by where the shopper is (class-elathi-banners.php, banner.js). Every place is in the page; the class
   the location script puts on <html> before paint shows the right one. Slides stack in one grid cell, so the
   banner keeps the height of its tallest slide and nothing jumps when they change. */
.gl-vmain .gl-promo.eb-wrap{display:block;padding:0;background:none;border-radius:0}
.eb-h1{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eb-g{display:none;position:relative}
html.ew-near .eb-g[data-p="near"],html.ew-town .eb-g[data-p="town"],html.ew-far .eb-g[data-p="far"],html:not(.ew-near):not(.ew-town):not(.ew-far) .eb-g[data-p="unset"]{display:block}
.eb-ss{display:grid}
.eb-s{grid-area:1/1;--eb-bg:#F1F7EA;--eb-ink:#1F6B2E;display:flex;align-items:center;gap:10px;min-width:0;padding:18px 16px;background:var(--eb-bg);opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity .35s ease,transform .35s cubic-bezier(.65,0,.35,1),visibility 0s .35s}
.eb-s.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s cubic-bezier(.65,0,.35,1),visibility 0s}
.eb-s.t-gold{--eb-bg:#FFF1C2;--eb-ink:#4D3800}
.eb-s.t-blue{--eb-bg:#EAF1FD;--eb-ink:#173E7A}
.eb-s.t-rose{--eb-bg:#FBEFF5;--eb-ink:#7A1F4B}
.eb-tx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.eb-k{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px 3px 7px;border-radius:999px;background:#FFFFFF;color:var(--eb-ink);font-size:10px;line-height:1.3;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.eb-i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gl-vmain .eb-t{margin:0;font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.01em;color:var(--eb-ink)}
.eb-l{margin:0;font-size:12px;line-height:1.4;color:#3F4A3B}
.eb-cd{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.eb-n{display:block;margin-top:3px;font-weight:700;color:var(--pns-green-dark,#1F6B2E)}
.eb-n .eb-i{display:inline-block;vertical-align:-2px;margin-right:3px}
.eb-n .warn,.eb-n.is-warn .ok{display:none}
.eb-n.is-warn{color:#7A5A00}
.eb-n.is-warn .warn{display:inline-block}
.eb-bs{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.eb-btn{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;background:var(--eb-ink);color:#FFFFFF;font-size:13px;line-height:1.2;font-weight:800;text-decoration:none;transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s ease}
.eb-btn.ghost{background:#FFFFFF;color:var(--eb-ink)}
.eb-btn:active{transform:scale(.97)}
.eb-btn:focus-visible,.eb-ar:focus-visible,.eb-dot:focus-visible{outline:2px solid var(--eb-ink,#1F6B2E);outline-offset:2px}
.eb-pics{position:relative;flex:none;width:108px;height:108px}
.eb-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.eb-pics.n2{width:118px;height:112px}
.eb-pics.n2 .eb-pic{width:84px;height:84px;inset:auto}
.eb-pics.n2 .eb-pic:first-child{left:0;top:4px;transform:rotate(-6deg)}
.eb-pics.n2 .eb-pic:last-child{right:0;bottom:2px;transform:rotate(5deg)}
.eb-art{flex:none;display:grid;place-items:center;width:88px;height:88px;border-radius:999px;background:rgba(255,255,255,.7);color:var(--eb-ink)}
.eb-ai{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.eb-nav{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:8px}
.eb-dots{display:flex;gap:4px}
.eb-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.eb-dot::before{content:"";display:block;width:8px;height:8px;border-radius:999px;background:rgba(20,33,15,.22);transition:width .3s cubic-bezier(.65,0,.35,1),background-color .3s ease}
.eb-dot.on::before{width:22px;background:var(--eb-cur,#1F6B2E)}
.eb-dot.on{width:34px}
.eb-ar{display:none;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:#FFFFFF;color:var(--eb-cur,#1F6B2E);cursor:pointer;place-items:center;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.eb-ar .eb-i{width:18px;height:18px}
.eb-ar:active{transform:scale(.92)}
.eb-g:not([data-n="1"]) .eb-bs{margin-bottom:22px}
@media (hover:hover){.eb-btn:hover{opacity:.9}.eb-ar:hover{background:#F4F6F2}}
@media (min-width:783px){
 .eb-s{gap:24px;min-height:240px;padding:28px 32px;border-radius:20px}
 .eb-g,.eb-ss{height:100%}
 .eb-tx{gap:10px}
 .eb-k{font-size:11px;padding:4px 10px 4px 8px}
 .gl-vmain .eb-t{font-size:28px;line-height:1.15;max-width:440px}
 .eb-l{font-size:15px;max-width:440px}
 .eb-btn{min-height:44px;padding:0 18px;font-size:14px;border-radius:12px}
 .eb-pics{width:200px;height:200px}
 .eb-pics.n2{width:240px;height:220px}
 .eb-pics.n2 .eb-pic{width:150px;height:150px}
 .eb-art{width:160px;height:160px}
 .eb-ai{width:64px;height:64px}
 .eb-nav{right:20px;bottom:18px}
 .eb-ar{display:grid}
 .eb-g:not([data-n="1"]) .eb-bs{margin-bottom:0}
 .eb-g:not([data-n="1"]) .eb-pics,.eb-g:not([data-n="1"]) .eb-art{margin-bottom:40px}
}
@media (prefers-reduced-motion:reduce){.eb-s,.eb-s.on,.eb-dot::before,.eb-btn,.eb-ar{transition:none}}
/* the theme's link colour must not reach the filled buttons */
.gl-vmain .eb a.eb-btn{color:#FFFFFF;text-decoration:none}
.gl-vmain .eb a.eb-btn.ghost{color:var(--eb-ink)}
.eb-ss{overflow:hidden}
/* short and to the point (owner, 2026-10-31): the small line stays on one line, title and line at most two */
.eb-k>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gl-vmain .eb-t,.eb-l{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.gl-vmain .eb-t{-webkit-line-clamp:3}
.eb-l:has(.eb-n:not([hidden])){-webkit-line-clamp:3}
/* tap anywhere: the whole banner is the link, with a round arrow where the button would be */
.gl-vmain .eb a.eb-s.is-link{color:inherit;text-decoration:none;cursor:pointer}
.eb-go{display:grid;place-items:center;width:40px;height:40px;margin-top:2px;border-radius:999px;background:var(--eb-ink);color:#FFFFFF;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.eb-go .eb-i{width:18px;height:18px}
.eb-s.is-link:active .eb-go{transform:scale(.94)}
.eb-s.is-link:focus-visible{outline:2px solid var(--eb-ink);outline-offset:-4px}
@media (hover:hover){.eb-s.is-link:hover .eb-go{transform:translateX(3px)}}
.eb-g:not([data-n="1"]) .eb-go{margin-bottom:22px}
/* computers: the banner fills the height beside the Discount zone */
@media (min-width:783px){
 .gl-vmain .gl-promo.eb-wrap,.eb{height:100%}
 .eb-g:not([data-n="1"]) .eb-go{margin-bottom:0}
 .eb-go{width:44px;height:44px}
}