/* Lucky Foodtown marketing site. Same design system as Lucky's Coffee Corner:
   cream page, warm ink, logo red and green, Urbanist headlines with a hand-drawn underline,
   the red ring, bordered chips and the red button with a hard shadow. One designed (light) look. */
@font-face{font-family:"Urbanist";src:url("/v/urbanist.748362d51e.ttf") format("truetype");font-weight:100 900;font-display:swap}
/* While Urbanist downloads, text shows in Arial adjusted to Urbanist's measurements, so nothing moves when it swaps in. */
@font-face{font-family:"Urbanist fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");size-adjust:99.9%;ascent-override:95.1%;descent-override:25%;line-gap-override:0%}
:root{color-scheme:only light;--red:#df2b22;--red-deep:#b5211a;--green:#00a755;--green-deep:#00793d;--cream:#fff8ed;--paper:#fffdf8;--ink:#382f28;--quiet:#6b5d51;--line:#dfcdbb;--radius:20px;--wrap:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Urbanist","Urbanist fallback",Arial,sans-serif;font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--cream);padding:10px 14px;border-radius:10px;z-index:20}
.skip:focus{left:8px}

/* Type */
h1,h2{font-weight:850;letter-spacing:-.045em;line-height:1.03}
h1{font-size:clamp(52px,8.2vw,112px)}
h2{font-size:clamp(36px,4.8vw,60px)}
h3{font-size:25px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.eyebrow{font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.eyebrow-light{color:#ffe1dd}
.lead{font-size:clamp(20px,1.9vw,24px);line-height:1.5;font-weight:500;color:#4d4239;max-width:560px;margin-top:26px}
.quiet{font-size:16px;color:var(--quiet)}
.short{display:none}
.accent{position:relative;display:inline-block;color:var(--red);white-space:nowrap}
.accent>svg{position:absolute;left:0;bottom:-.1em;width:100%;height:.14em;overflow:visible;fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round}

/* Controls */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:66px;padding:16px 28px;border-radius:var(--radius);background:var(--red);color:#fff;font-size:22px;font-weight:750;line-height:1.2;text-decoration:none;box-shadow:0 5px 0 var(--red-deep);transition:transform .08s,box-shadow .08s,background .15s}
.button:hover{background:#cb261e}
.button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-deep)}
.button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.button-small{min-height:48px;padding:10px 18px;font-size:17px;border-radius:16px;box-shadow:0 4px 0 var(--red-deep)}
.button-small svg{width:19px;height:19px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#ffffff80;font-weight:650;text-decoration:none;transition:background .15s}
.chip:hover{background:#fff}
.chip-large{min-height:66px;padding:16px 24px;font-size:20px}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}

/* Header */
.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;padding:14px max(24px,calc((100vw - var(--wrap))/2));background:#fff8edf2;backdrop-filter:blur(8px);border-bottom:1px solid #dfcdbb80}
.brand img{width:214px;height:auto}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{padding:10px 14px;border-radius:14px;font-size:17px;font-weight:650;text-decoration:none}
.nav a:hover{background:#ffffffb3}
.menu{display:none}

/* Hero */
.hero{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,6vw,84px) 24px clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:center}
.open-now{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:16px;font-weight:700}
.open-now i{width:10px;height:10px;border-radius:50%;background:#b0a397}
.open-now[data-open=true]{border-color:#9fd8b8;background:#e9f6ee;color:var(--green-deep)}
.open-now[data-open=true] i{background:var(--green)}

/* Departments strip: sits still when it fits, runs on its own as a loop when it does not. */
.strip{background:var(--ink);color:var(--cream);overflow:hidden}
.strip-track{display:flex;justify-content:center}
.strip ul{flex:none;display:flex;padding:18px 0;font-size:18px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.strip ul[aria-hidden]{display:none}
.strip li{display:flex;align-items:center}
.strip li::after{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--red);margin:0 18px}
.strip ul:first-child li:last-child::after{display:none}
@media(max-width:1180px){
 .strip-track{justify-content:flex-start;width:max-content;animation:marquee 26s linear infinite}
 .strip ul[aria-hidden]{display:flex}.strip ul:first-child li:last-child::after{display:block}
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections */
.section{max-width:var(--wrap);margin:0 auto;padding:clamp(64px,8vw,116px) 24px 0}
.section-head{max-width:720px;margin-bottom:clamp(30px,4vw,52px)}
.section-head>p:last-child{margin-top:20px;font-size:21px;font-weight:500;color:#4d4239}
.ink,.ink-thin{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ink-thin{stroke-width:3}
.fill-green{fill:var(--green)}.fill-leaf{fill:#3fbf7f}.shine{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.7}
.fill-meat{fill:#d9574c}.fat{fill:none;stroke:#fbe3df;stroke-width:6;stroke-linecap:round}.bone{fill:#fff8ed}
.fill-crust{fill:#e0a552}.fill-tin{fill:#d8d2ca}.fill-food{fill:#e3863c}
.fill-cheese{fill:#f4c542}.hole{fill:#d9a521}
.fill-jar{fill:#fff}.fill-lid{fill:var(--red)}.label{fill:#cfe0f3}


/* New Zealand band */
.nz-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(30px,4.5vw,60px);border-radius:34px;background:var(--red);color:#fff;box-shadow:0 8px 0 var(--red-deep)}
.nz-card h2{font-size:clamp(34px,4.2vw,54px)}
.nz-card p:not(.eyebrow){margin-top:20px;font-size:21px;font-weight:500;color:#ffeceb;max-width:560px}
.steps{display:grid;gap:12px}
.steps li{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--radius);background:#ffffff1f;border:1px solid #ffffff4d;font-size:19px;font-weight:700;line-height:1.25}
.steps b{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--red);font-size:18px;font-weight:850}

/* Community */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.trio article{padding:26px;border-radius:26px;background:var(--paper);border:1px solid var(--line)}
.trio h3 span{color:var(--red)}
.trio p{margin-top:10px;font-size:18px;color:#5d5046}
.follow{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;padding:26px 28px;border-radius:26px;border:1px dashed #cdb9a3}
.follow p{flex:1 1 360px;font-size:20px;font-weight:500}
.follow .actions{margin-top:0}
.soc{width:24px;height:24px;flex:none}

/* Visit */
#more{padding-bottom:clamp(72px,8vw,116px)}
.visit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.visit-card{padding:30px;border-radius:26px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hours{width:100%;display:grid;gap:4px}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:14px;font-size:20px}
.hours dt{font-weight:650}.hours dd{font-weight:500;font-variant-numeric:tabular-nums}
.hours div[data-today]{background:#e9f6ee;color:var(--green-deep);font-weight:800}
.contact{width:100%;display:grid;gap:14px}
.contact li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;font-size:20px;align-items:baseline}
.contact span{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a7c70}
.contact a,.contact strong{font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.contact a:hover{color:var(--red)}
.address-note{grid-column:2;margin-top:-10px;font-style:normal;font-size:16px;color:var(--quiet)}

/* Footer: the red band from the store's own posts */
.site-footer{background:var(--red);color:#fff;text-align:center;padding:48px 24px 40px;display:grid;gap:16px;justify-items:center}
.site-footer img{width:min(320px,70vw);height:auto}
.site-footer p{font-size:18px;font-weight:600}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer .small{font-size:15px;font-weight:500;opacity:.9}

@media(max-width:960px){
 .nav,.site-header .button-small{display:none}
 .menu{position:relative;display:block;margin-left:auto}
 .menu summary{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;list-style:none;cursor:pointer}
 .menu summary::-webkit-details-marker{display:none}
 .menu summary svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
 .menu[open] summary{background:#fff}
 .menu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:20;display:grid;gap:2px;width:min(300px,calc(100vw - 32px));padding:10px;border:1px solid var(--line);border-radius:20px;background:#fffdf8;box-shadow:0 18px 36px -18px #2b1d1480}
 .menu-panel a{display:grid;gap:2px;padding:13px 14px;border-radius:13px;text-decoration:none}
 .menu-panel a:hover,.menu-panel a:focus-visible{background:#fff1df}
 .menu-panel .menu-find{display:flex;align-items:center;justify-content:space-between;font-size:18px;font-weight:800}
 .menu-find svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
 .menu-panel p{margin:8px 0 2px;padding:12px 14px 0;border-top:1px solid var(--line);font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
 .menu-panel b{font-size:16.5px}.menu-panel small{font-size:13.5px;color:var(--quiet)}
 .hero{grid-template-columns:1fr;text-align:center}.hero .lead{margin-left:auto;margin-right:auto}.hero .actions{justify-content:center}
 .trio{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nz-card{grid-template-columns:1fr}
}
@media(max-width:620px){
 body{font-size:18px}
 .site-header{padding:12px 16px;gap:8px}.brand img{width:152px}
 .hero,.section{padding-left:18px;padding-right:18px}
 .trio,.visit-grid{grid-template-columns:1fr}
 .button,.chip-large{width:100%}
 .site-header .button-small{width:auto;flex:none}
 .hours dd{white-space:nowrap}.hours div{padding:12px 10px;gap:10px;font-size:17px}
 .contact li{font-size:18px;grid-template-columns:1fr;gap:2px}.address-note{grid-column:1;margin-top:0;font-size:15px}
 .nz-card{border-radius:26px}
}
@media(prefers-reduced-motion:reduce){.strip{overflow-x:auto}.strip-track{animation:none}html{scroll-behavior:auto}.button,.card{transition:none}.button:active,.card:hover{transform:none}}
/* ---- Hero concepts. body[data-hero] picks one; the other is hidden. ---- */
body[data-hero=a] .hero-b,body[data-hero=a] .hero-c,body[data-hero=b] .hero-a,body[data-hero=b] .hero-c,body[data-hero=c] .hero-a,body[data-hero=c] .hero-b,body[data-hero=c] .shop-section{display:none}

/* A: the market board. A bento of what is in store, in the brand's flat colours. */
.board{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:14px;width:min(100%,560px);aspect-ratio:1;justify-self:center}
.tile{position:relative;border-radius:28px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.tile>span{position:relative;font-size:clamp(15px,1.5vw,19px)}
.tile>svg,.tile>img{position:absolute;inset:12% 12% 26% 12%;width:76%;height:62%;object-fit:contain;overflow:visible}
.tile b{font-size:clamp(13px,1.2vw,16px);font-weight:750;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.tile strong{font-size:clamp(28px,3.4vw,46px);font-weight:850;letter-spacing:-.04em;line-height:.98}
.t1{grid-area:1/1/5/4}.t2{grid-area:1/4/3/7}.t3{grid-area:3/4/5/7}.t4{grid-area:5/1/7/3}.t5{grid-area:5/3/7/5}.t6{grid-area:5/5/7/7}
.tile-green{background:var(--green);color:#fff}.tile-green>img{inset:9% 16% 22% 16%;width:68%;height:69%}
.tile-ink{background:var(--ink);color:var(--cream);justify-content:center}
.tile-gold{background:#f8dfa8}.tile-cream{background:#fff;border:1px solid var(--line)}
.tile-red{background:var(--red);color:#fff;justify-content:center}.tile-red strong{font-size:clamp(22px,2.5vw,32px)}
.tile-pink{background:#fbd5cf}
.tile-gold>svg,.tile-pink>svg{inset:8% 18% 30% 18%;width:64%;height:62%}
.tile-cream>svg{inset:8% 22% 28% 22%;width:56%;height:64%}

/* B: the red poster, after the store's own social posts. */
.hero-b{position:relative;overflow:hidden;background:var(--red);color:#fff}
.hero-b-inner{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:clamp(56px,7vw,110px) 24px clamp(64px,8vw,120px)}
.hero-b h1{font-size:clamp(60px,10.5vw,150px);color:#fff}
.hero-b .lead{color:#ffeceb;max-width:600px}
.accent-cream{color:var(--cream)}.accent-cream>svg{stroke:var(--cream)}
.hero-b-apple{position:absolute;right:max(-60px,calc((100vw - var(--wrap))/2 - 120px));bottom:-14%;width:min(52vw,640px);transform:rotate(-8deg);filter:drop-shadow(0 30px 40px #7a100b66)}
.button-cream{background:var(--cream);color:var(--red);box-shadow:0 5px 0 #e5cdb3}.button-cream:hover{background:#fff}
.chip-onred{border-color:#ffffff66;background:#ffffff1f;color:#fff}.chip-onred:hover{background:#ffffff33}
.hero-b .open-now{background:#ffffff1f;border-color:#ffffff4d;color:#fff}
.hero-b .open-now[data-open=true]{background:#fff;border-color:#fff;color:var(--green-deep)}

/* Coffee Corner: the whole photo, uncropped, on a panel in the photo's own background colour. */
.coffee{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(12px,3vw,48px);padding:clamp(18px,2.6vw,34px);padding-right:clamp(24px,4vw,60px);border:1px solid var(--line);border-radius:34px;background:#fdf7ef}
.coffee-photo{margin:0}
.coffee-photo img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;-webkit-mask-image:radial-gradient(circle closest-side at 51% 50%,#000 93%,transparent 100%);mask-image:radial-gradient(circle closest-side at 51% 50%,#000 93%,transparent 100%)}
.coffee-copy>p:not(.eyebrow){margin-top:20px;font-size:20px;font-weight:500;color:#4d4239}
.coffee-copy>.quiet{font-size:16px!important;margin-top:14px!important}
.drinks{margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.drinks li{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;font-size:17px;font-weight:750;letter-spacing:-.01em;line-height:1.15}
.drink-art{width:100%;aspect-ratio:1/1.05;border-radius:18px;background:#f1e4d3;display:grid;place-items:center}
.drink-art svg{width:74%;height:auto;overflow:visible}


@media(max-width:960px){
 .board{width:min(92%,460px)}
 .hero-b-inner{text-align:center}.hero-b .lead{margin-left:auto;margin-right:auto}.hero-b .actions{justify-content:center}
 .hero-b-apple{position:relative;right:auto;bottom:auto;display:block;width:min(64vw,340px);margin:-30px auto -70px}
 .coffee{grid-template-columns:1fr;padding:18px}
 .coffee-copy>.eyebrow,.coffee-copy>h2{text-align:center;text-wrap:balance}
 .coffee-photo img{max-width:420px;margin:0 auto}
}
@media(max-width:620px){
 .board{gap:10px}.tile{border-radius:20px;padding:12px}
 .tile>span{font-size:13px}.tile-cream>svg{inset:7% 26% 40% 26%;width:48%;height:53%}.tile b{font-size:11px}
 .drinks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- The real shop: photos of the building, and the locator map ---- */
.hero-c{padding:clamp(26px,3vw,44px) 0 0;text-align:center;overflow:hidden}
.hero-c-copy{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.hero-c h1{font-size:clamp(44px,6.2vw,88px)}
.hero-c .lead{margin-left:auto;margin-right:auto;max-width:640px}
.open-now.on-photo{position:absolute;right:22px;bottom:22px;margin:0;box-shadow:0 14px 26px -18px #2b1d14aa}
.hero-c .actions{justify-content:center}.hero-c .chip{background:var(--cream)}
.hero-c-photo{position:relative;width:min(1120px,100% - 48px);margin:calc(min(1120px,100vw - 48px)*-.255) auto 0;border-radius:0 0 34px 34px;overflow:hidden}
.hero-c-photo img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 20%,rgba(0,0,0,.14) 27%,rgba(0,0,0,.6) 35%,#000 41%),radial-gradient(ellipse 64% 104% at 50% 100%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 20%,rgba(0,0,0,.14) 27%,rgba(0,0,0,.6) 35%,#000 41%),radial-gradient(ellipse 64% 104% at 50% 100%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect;animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 100%}
@keyframes settle{from{scale:1.05}to{scale:1}}
.photo-tag{position:absolute;left:22px;bottom:22px;display:grid;gap:2px;padding:12px 18px;border:1px solid var(--line);border-radius:20px;background:var(--cream);text-align:left;box-shadow:0 14px 26px -18px #2b1d14aa}
.photo-tag b{font-size:19px;font-weight:800;letter-spacing:-.02em}.photo-tag span{font-size:15px;color:#5d5046}
.shop-photos{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:18px}
.shop-photo{position:relative;margin:0;border:1px solid var(--line);border-radius:34px;overflow:hidden;aspect-ratio:auto;min-height:100%;box-shadow:0 26px 44px -34px #6e3b2799}
.shop-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .8s cubic-bezier(.2,.7,.2,1)}
.shop-photo:hover img{scale:1.03}
@media(max-width:960px){.shop-photos{grid-template-columns:1fr}.shop-photo{aspect-ratio:16/10}}
@media(max-width:620px){.map-frame,.shop-photo{border-radius:22px}.hero-c-copy{padding:0 18px}.hero-c-photo{width:100%;margin-top:-84px;border-radius:0}.hero-c-photo img{aspect-ratio:1/1.02;object-fit:cover;object-position:62% 100%}.hero-c-photo .photo-tag{display:none}.open-now.on-photo{right:auto;left:50%;translate:-50% 0;bottom:14px;white-space:nowrap}.photo-tag{left:12px;bottom:12px;padding:9px 13px}.photo-tag b{font-size:16px}.photo-tag span{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hero-c-photo img{animation:none}.shop-photo img{transition:none}}

/* ---- Round 4: icons, a tighter In store, the map that leads, and a shorter phone page ---- */
.ico{overflow:visible}.ico .s{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ico .f{fill:var(--tint,#f1e4d3)}.ico .fb{fill:#fffdf8}
.tile .ico .s{stroke-width:2.1}.tile-gold{--tint:#e9b05c}.tile-pink{--tint:#ee8f84}
.dept{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dept li{display:flex;align-items:center;gap:18px;padding:20px 22px;border:1px solid var(--line);border-radius:24px;background:var(--paper)}
.dept-icon{flex:none;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:var(--bg)}
.dept-icon svg{width:42px;height:42px}
.dept h3{font-size:22px}.dept p{margin-top:4px;font-size:16.5px;line-height:1.4;color:#5d5046}
.d-veg{--bg:#dcf1e4;--tint:#86d6ab}.d-meat{--bg:#fbdcd7;--tint:#f19d93}.d-bake{--bg:#f9e6bd;--tint:#ecb765}.d-meal{--bg:#f7e1cf;--tint:#efa56b}.d-dairy{--bg:#fdeebf;--tint:#f7d25c}.d-pantry{--bg:#dfe9f5;--tint:#a3c1e6}

.visit-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:stretch}
.visit-side{display:grid;gap:18px}
.map-frame{position:relative;width:100%;min-height:560px;border:1px solid var(--line);border-radius:34px;overflow:hidden;background:#f9f2e6;box-shadow:0 26px 44px -34px #6e3b2799}
.map-art{position:absolute;inset:0;width:100%;height:100%}
.map-link{position:absolute;right:16px;bottom:16px;background:var(--cream);box-shadow:0 12px 24px -16px #2b1d14aa}
.m-label,.m-here-name,.m-here-sub,.m-street{paint-order:stroke;stroke:#fffaf1;stroke-linejoin:round}
.m-label{font:800 25px "Urbanist","Urbanist fallback",Arial,sans-serif;letter-spacing:-.01em;fill:var(--ink);stroke-width:7px}
.m-road,.m-street{font:750 15px "Urbanist","Urbanist fallback",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;fill:#a39280}
.m-street{fill:#b5211a;stroke-width:6px}
.m-sea{font:700 19px "Urbanist","Urbanist fallback",Arial,sans-serif;letter-spacing:.26em;text-transform:uppercase;fill:#7dafcb}
.m-here-name{font:850 32px "Urbanist","Urbanist fallback",Arial,sans-serif;letter-spacing:-.025em;fill:var(--ink);stroke-width:8px}
.m-here-sub{font:700 20px "Urbanist","Urbanist fallback",Arial,sans-serif;fill:#2f5fb3;stroke-width:6px}
.m-badge,.m-ring{transform-box:fill-box;transform-origin:center}.m-badge{scale:var(--bs,1)}
.m-pin{transform-box:fill-box;transform-origin:50% 100%}
.m-dot{opacity:0;offset-rotate:0deg}.m-ring{opacity:0}
.is-live .m-route{stroke-dasharray:1000;animation:m-draw 9s infinite}
.is-live .m-dot{animation:m-dot 9s infinite}
.is-live .m-pin{animation:m-pin 9s infinite}
.is-live .m-ring{animation:m-ring 9s infinite}
.is-live .m-lm-clock .m-badge{animation:m-pop-a 9s infinite}
.is-live .m-lm-mcd .m-badge{animation:m-pop-b 9s infinite}
@keyframes m-draw{0%,7%{stroke-dashoffset:1000;opacity:1;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}52%,90%{stroke-dashoffset:0;opacity:1}97%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes m-dot{0%{offset-distance:0%;opacity:0}4%,7%{offset-distance:0%;opacity:1;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}52%{offset-distance:100%;opacity:1}57%,100%{offset-distance:100%;opacity:0}}
@keyframes m-pin{0%,51%{translate:0 0}55%{translate:0 -18px}59%{translate:0 0}62%{translate:0 -7px}65%,100%{translate:0 0}}
@keyframes m-ring{0%,52%{scale:.5;opacity:0}53%{scale:.5;opacity:.45}71%{scale:3.2;opacity:0}72%{scale:.5;opacity:.4}90%{scale:3.2;opacity:0}100%{scale:3.2;opacity:0}}
@keyframes m-pop-a{0%,1%{scale:var(--bs,1)}5%{scale:calc(var(--bs,1)*1.25)}10%,100%{scale:var(--bs,1)}}
@keyframes m-pop-b{0%,19%{scale:var(--bs,1)}24%{scale:calc(var(--bs,1)*1.25)}30%,100%{scale:var(--bs,1)}}
.coffee-order{margin-top:22px}
.quickbar{display:none}
@media(max-width:960px){.dept{grid-template-columns:repeat(2,minmax(0,1fr))}.visit-layout{grid-template-columns:1fr;align-items:start}.map-frame{min-height:0;aspect-ratio:1/.8;width:100%;align-self:start}}
@media(max-width:620px){
 .long{display:none}.short{display:inline}
 h1{font-size:46px}h2{font-size:31px}h3{font-size:21px}
 .eyebrow{font-size:12.5px;margin-bottom:10px}
 .section{padding-top:46px}.section-head{margin-bottom:20px}.section-head>p:last-child{margin-top:12px;font-size:17.5px}
 .hero{padding-top:26px;padding-bottom:48px;gap:24px}.hero-c{padding-top:22px}
 .hero-a .actions{display:none}.hero-a .lead{margin-top:16px;font-size:17px;text-wrap:balance}
 .lead{margin-top:14px;font-size:18px;line-height:1.45}.actions{margin-top:20px;gap:10px}
 .button{min-height:58px;font-size:20px}
 .hero .chip-large,.hero-c .chip-large,.hero .open-now,.hero-c .open-now{display:none}
 .board{width:100%;aspect-ratio:auto;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,108px);gap:10px}
 .hero-a .board{grid-template-rows:repeat(2,clamp(84px,calc((100svh - 70px - 26px - 232px - 24px - 100px - env(safe-area-inset-bottom,0px) - 10px) / 2),112px))}
 .board .tile{grid-area:auto;border-radius:18px;padding:10px}
 .tile>svg,.tile>img,.tile-green>img,.tile-gold>svg,.tile-pink>svg,.tile-cream>svg{inset:9% 22% 30% 22%;width:56%;height:61%}
 .tile strong{font-size:27px}.tile-red strong{font-size:20px}
 .strip ul{padding:13px 0;font-size:16px}.strip li::after{margin:0 14px}
 .shop-section .section-head>p:last-child{display:none}
 .shop-photos{display:flex;gap:10px;margin:0 -18px;padding:0 18px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
 .shop-photos::-webkit-scrollbar{display:none}
 .shop-photo{flex:0 0 86%;aspect-ratio:4/3;min-height:0;scroll-snap-align:center;box-shadow:none}
 #departments .section-head>p:last-child{display:none}
 .dept{grid-template-columns:1fr;gap:0;padding:2px 16px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
 .dept li{gap:14px;padding:12px 0;border:0;border-radius:0;background:none}.dept li+li{border-top:1px solid #eee1d0}
 .dept-icon{width:48px;height:48px}.dept-icon svg{width:31px;height:31px}
 .dept h3{font-size:18.5px}.dept p{margin-top:1px;font-size:15px;line-height:1.35}
 .coffee{padding:14px 16px 18px;border-radius:24px;gap:4px}.coffee-photo img{max-width:210px}
 .coffee-copy>p:not(.eyebrow){margin-top:12px;font-size:17px}
 .drinks{margin-top:16px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.drinks li{font-size:13px;gap:6px}.drink-art{border-radius:13px}
 .coffee-copy>.quiet{font-size:14.5px!important;margin-top:10px!important}.coffee-order{margin-top:14px;min-height:52px;font-size:18px}
 .nz-card{padding:24px 22px;gap:16px;box-shadow:0 6px 0 var(--red-deep)}.nz-card h2{font-size:29px}.nz-card p:not(.eyebrow){margin-top:12px;font-size:17px}
 .steps{gap:0}.steps li{padding:11px 0;border:0;border-top:1px solid #ffffff40;border-radius:0;background:none;font-size:16.5px;gap:12px}.steps b{width:30px;height:30px;font-size:15px}
 .trio{gap:0;padding:2px 18px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
 .trio article{padding:14px 0;border:0;border-radius:0;background:none}.trio article+article{border-top:1px solid #eee1d0}
 .trio p{margin-top:3px;font-size:15.5px;line-height:1.4}
 .follow{margin-top:12px;padding:18px;gap:12px;border-radius:22px}.follow p{flex-basis:100%;font-size:17px}
 .follow .actions{width:100%;flex-wrap:nowrap}.follow .chip-large{min-height:50px;padding:10px 12px;font-size:17px;justify-content:center}
 .map-frame{aspect-ratio:1/1.02;border-radius:22px}.map-link{right:10px;bottom:10px;min-height:36px;padding:6px 12px;font-size:14px;border-radius:14px}
 .m-label{font-size:35px;stroke-width:9px}.m-here-name{font-size:42px;stroke-width:10px}.m-here-sub{font-size:28px;stroke-width:8px}.m-street,.m-road{font-size:22px}.m-sea{font-size:25px}.m-badge{--bs:1.4}
 .visit-layout,.visit-side{gap:12px}.visit-card{padding:20px;gap:12px;border-radius:22px}.visit-card .button{display:none}
 .hours div{padding:9px 10px}.contact{gap:10px}
 #more{padding-bottom:56px}
 .site-footer{padding:34px 20px calc(96px + env(safe-area-inset-bottom));gap:12px}.site-footer p{font-size:16px}
 .quickbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:12;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;border-radius:22px;background:var(--ink);color:var(--cream);box-shadow:0 16px 30px -12px #2b1d14d9}
 .quick-status{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:750;white-space:nowrap}
 .quick-status i{flex:none;width:9px;height:9px;border-radius:50%;background:#b0a397}.quick-status[data-open=true] i{background:#35d07f}
 .quickbar a{flex:none;min-height:44px;padding:0 16px;border-radius:15px;display:inline-flex;align-items:center;font-size:15.5px;font-weight:800;text-decoration:none}
 .quick-call{background:#ffffff1f;color:var(--cream)}.quick-go{background:var(--red);color:#fff}
}
/* Reduce Motion: the route still draws, once, and stays; the pin, ring and badges do not move. */
@keyframes m-draw-once{0%,6%{stroke-dashoffset:1000}100%{stroke-dashoffset:0}}
@keyframes m-dot-once{0%{offset-distance:0%;opacity:0}6%{offset-distance:0%;opacity:1}98%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.is-live .m-pin,.is-live .m-ring,.is-live .m-badge{animation:none!important}.is-live .m-route{animation:m-draw-once 4.5s cubic-bezier(.45,.05,.55,.95) 1 both}.is-live .m-dot{animation:m-dot-once 4.5s cubic-bezier(.45,.05,.55,.95) 1 both}}

/* ---- Our shop: the living model of the real building (canvas, assets/shop-scene.js) ---- */
.shop-section{max-width:none;margin:0;padding-left:max(24px,calc((100vw - var(--wrap))/2 + 24px));padding-right:max(24px,calc((100vw - 1400px)/2));display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(8px,2vw,32px);align-items:center}
.shop-section .section-head{margin-bottom:26px}.shop-section h2{font-size:clamp(34px,3.7vw,52px)}
.living{position:relative}
.living canvas{display:block;width:100%;aspect-ratio:1.36;touch-action:pan-y}
.shop-tags{display:grid;gap:10px}
.shop-tags li{display:grid;gap:2px;padding:14px 20px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}
.shop-tags b{font-size:19px;font-weight:800;letter-spacing:-.02em}.shop-tags span{font-size:15.5px;color:#5d5046}
@media(max-width:960px){
 .shop-section{grid-template-columns:1fr;gap:0;padding-left:24px;padding-right:24px}.shop-copy{display:contents}
 .shop-section .section-head{order:1;margin-bottom:6px}.living{order:2;margin:0 -18px}.shop-tags{order:3;grid-template-columns:repeat(2,minmax(0,1fr));text-align:center}
 .living canvas{aspect-ratio:1.3}
}
@media(max-width:620px){.shop-section{padding-left:18px;padding-right:18px}.shop-tags{gap:8px}.shop-tags li{padding:10px 8px;border-radius:16px}.shop-tags b{font-size:15.5px}.shop-tags span{font-size:13px;line-height:1.3}}
.m-road-name{font:750 15px "Urbanist","Urbanist fallback",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;fill:#8c7c6b;paint-order:stroke;stroke:#fffaf1;stroke-width:5px;stroke-linejoin:round}
@media(max-width:620px){.m-road-name{font-size:21px}}

/* ---- Round 6: devices. Links land below the sticky header; every tap target is at least 44 px; phones held sideways get
   a short, side-by-side layout instead of the tall tablet one. ---- */
@media(max-width:960px){html{scroll-padding-top:40px}}
@media(max-width:620px){html{scroll-padding-top:56px}}
.brand{display:flex;align-items:center;min-height:44px}
.contact a{display:inline-block;padding:8px 0;margin:-8px 0}
.site-footer a{display:inline-block;padding:10px 0;margin:-10px 0}
@media(max-width:620px){.map-link{min-height:44px;padding:8px 14px}}
@media(orientation:landscape) and (max-height:520px){
 html{scroll-padding-top:32px}
 .site-header{padding-top:7px;padding-bottom:7px}.brand img{width:150px}.site-header .button-small{min-height:44px;padding:8px 14px;font-size:16px}
 .long{display:none}.short{display:inline}
 h1{font-size:clamp(38px,6.4vw,50px)}h2{font-size:clamp(28px,4.2vw,36px)}
 .eyebrow{font-size:12.5px;margin-bottom:10px}
 .section{padding-top:44px}.section-head{margin-bottom:20px}.section-head>p:last-child{margin-top:10px;font-size:17px}
 .hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);text-align:left;padding-top:16px;padding-bottom:24px;gap:22px}
 .hero .lead{margin:12px 0 0;font-size:17px;line-height:1.45}.hero .actions{justify-content:flex-start;margin-top:16px}
 .hero .chip-large,.hero .open-now{display:none}
 .button{min-height:50px;font-size:18px;padding:12px 22px}
 .board{width:100%;max-width:290px;gap:8px}.tile{border-radius:18px;padding:10px}.tile>span{font-size:13px}.tile b{font-size:11px}
 .shop-section{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px}.shop-copy{display:block}
 .shop-section .section-head{margin-bottom:14px}.shop-section .section-head>p:last-child{display:none}.living{margin:0}
 .shop-tags{grid-template-columns:1fr;text-align:left;gap:8px}.shop-tags li{padding:9px 14px;border-radius:16px}.shop-tags b{font-size:16px}.shop-tags span{font-size:13.5px}
 .coffee{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);padding:16px}.coffee-photo img{max-width:240px}
 .coffee-copy>p:not(.eyebrow){margin-top:12px;font-size:17px}.drinks{margin-top:14px;gap:8px}.drinks li{font-size:13px}
 .nz-card{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:24px}.nz-card h2{font-size:30px}.nz-card p:not(.eyebrow){font-size:16.5px;margin-top:10px}.steps li{padding:12px 14px;font-size:16px}
 .visit-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.map-frame{aspect-ratio:1/1;min-height:0}
 .m-label{font-size:34px;stroke-width:9px}.m-here-name{font-size:40px;stroke-width:10px}.m-here-sub{font-size:26px;stroke-width:8px}.m-street,.m-road{font-size:21px}.m-badge{--bs:1.3}
 .visit-card{padding:20px;gap:12px}.hours div{padding:8px 10px;font-size:16.5px}.contact li{font-size:17px}
}
/* Upright tablets: the board is a little smaller so the whole hero fits on the first screen. */
@media(min-width:621px) and (max-width:960px) and (orientation:portrait){.board{width:min(92%,390px)}}
/* The phone bar's status gives way (ellipsis) before it touches the buttons on the narrowest phones. */
.quick-status>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:350px){.quick-status{font-size:13px;gap:6px}.quickbar{padding-left:12px;gap:6px}.quickbar a{padding:0 12px;font-size:14.5px}}
/* Below desktop width each board drawing fills the space above its label, so the two never touch at any size. */
@media(max-width:960px),(orientation:landscape) and (max-height:520px){
 .board .tile>svg,.board .tile>img{position:static;inset:auto;flex:1 1 0;min-height:0;width:auto;height:auto;max-width:100%;margin:2% 4% 6px;object-fit:contain}
 .board .tile-green>img{margin:8% 12% 8px}
}
@media(min-width:961px){.tile-cream>svg{inset:7% 22% 34% 22%;height:59%}.tile-cream>span{white-space:nowrap;font-size:clamp(14px,1.3vw,18px)}}

/* ---- What shoppers say: Google rating and three reviews (one quoted, two summarised with a link to the original) ---- */
.reviews{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,4vw,52px);border:1px solid var(--line);border-radius:34px;background:var(--paper)}
.reviews h2{font-size:clamp(34px,4vw,52px)}
.score-row{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:19px}
.stars{position:relative;display:inline-block;flex:none;line-height:0;white-space:nowrap}
.stars svg{display:inline-block;width:20px;height:20px}.stars-lg svg{width:30px;height:30px}
.stars-off svg{fill:#e6d8c6}.stars-on{position:absolute;inset:0 auto 0 0;width:var(--fill);overflow:hidden}.stars-on svg{fill:#f2a900}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.topics li{padding:6px 14px;border-radius:999px;background:#e9f6ee;color:var(--green-deep);font-size:15.5px;font-weight:700}
.review-cards{display:grid;gap:12px}
.review-cards li{position:relative;padding:18px 22px;border:1px solid var(--line);border-radius:22px;background:#fff;display:grid;gap:8px}
.review-cards li:nth-child(2){margin-left:clamp(0px,3vw,40px)}.review-cards li:nth-child(3){margin-left:clamp(0px,1.5vw,20px)}
.review-top{display:flex;align-items:center;gap:12px}.review-top b{display:block;font-size:17.5px;font-weight:800;line-height:1.2}.review-top span:not(.avatar){font-size:14px;color:var(--quiet)}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:850;font-size:18px}.a1{background:var(--red)}.a2{background:var(--green)}.a3{background:#2f5fb3}
.review-cards p{font-size:17.5px;line-height:1.45;color:#4d4239}
.review-more{justify-self:start;font-size:15px;font-weight:700;color:var(--red-deep);text-decoration:none}.review-more:hover{text-decoration:underline}
@media(max-width:960px){.reviews{grid-template-columns:1fr}.review-cards li{margin-left:0!important}}
@media(max-width:620px){
 .reviews{padding:22px 18px;border-radius:24px;gap:18px}.reviews h2{font-size:30px}.score-row{margin-top:12px;font-size:16.5px;gap:10px}.stars-lg svg{width:24px;height:24px}
 .topics{margin-top:12px}.topics li{font-size:14px;padding:5px 11px}
 .reviews .actions{flex-wrap:nowrap;gap:8px}.reviews .button,.reviews .chip-large{flex:1 1 0;width:auto;min-height:50px;padding:10px 8px;font-size:15.5px;white-space:nowrap;justify-content:center}.reviews .button svg{display:none}
 .review-cards{display:flex;gap:10px;margin:0 -18px;padding:0 18px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.review-cards::-webkit-scrollbar{display:none}
 .review-cards li{flex:0 0 84%;scroll-snap-align:center;padding:16px 18px;align-content:start}.review-cards p{font-size:16px}
 .review-more{font-size:14px}
}

/* More from Lucky: Lucky Pay and Lucky You (2026-10-07) */
/* More from Lucky: two sister products. Each card opens with a picture taken from the product's own page (/you, /pay):
   Lucky You's is its café photo, Lucky Pay's is a small drawing of the pay run on its green. The logo sits on a cream
   tab (the logos are vector copies of the ones on those pages). The cards use quiet text links, so the shop's red
   buttons stay the loudest thing on the page. */
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.more-card{position:relative;display:flex;flex-direction:column;border-radius:26px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .15s}
.more-card:hover{box-shadow:0 20px 36px -26px #2b1d14b3}
.more-card:has(.more-link:focus-visible){outline:3px solid var(--red);outline-offset:3px}
.more-art{position:relative;height:250px;overflow:hidden;font:500 11px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#16241d}
.more-art i,.more-art em{font-style:normal}
.more .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.more-art-you{background:#124634}
.more-art-pay{background:#0f5c3d}
.more-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 58%}
.more-tab{position:absolute;left:18px;top:18px;display:block;padding:10px 15px;border-radius:15px;background:#fffbf3;box-shadow:0 10px 22px -12px #0c1f1780}
.more-logo{display:block;height:24px;width:auto}
.more-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 28px 28px}
.more-body h3{font-size:24px;line-height:1.15}
.more-body p{font-size:18px;color:#5d5046}
.more-link{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:18px;font-weight:750;color:var(--red);text-decoration:none}
.more-link::after{content:"";position:absolute;inset:0}
.more-link:focus-visible{outline:none}
.more-link svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.more-card:hover .more-link svg{transform:translateX(3px)}
/* Lucky Pay: the pay run and its five steps */
.tz-run{position:absolute;left:26px;right:26px;top:86px;display:grid;gap:7px;padding:13px 12px 0;border-radius:14px 14px 0 0;background:#fff;color:#18201c;box-shadow:0 18px 30px -14px #0b332599}
.tz-run-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;white-space:nowrap}
.tz-run-top b{font-size:14px;font-weight:750}
.tz-run-top span{font-size:10.5px;color:#505a55}
.tz-run-top span b{margin-left:3px;font-size:11.5px;color:#18201c}
.tz-run ol{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.tz-run li{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;box-shadow:inset 0 0 0 1px #141c181f;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden}
.tz-run li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:#c9cfcb}
.tz-run li.d::before{background:#14a061}
.tz-run li.n::before{background:#18201c;box-shadow:0 0 0 2.5px #18201c22}
.tz-run li.w{background:#f2f4f3;box-shadow:none;color:#677069}
.tz-run li em{font-weight:500;color:#677069;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .more{grid-template-columns:1fr;gap:14px}
  .more-art{height:210px}
  .more-tab{left:14px;top:14px;padding:9px 13px}
  .more-logo{height:22px}
  .more-body{gap:8px;padding:20px 22px 24px}
  .more-body h3{font-size:21px}
  .more-body p{font-size:17px}
  .more-link{font-size:17px}
  .tz-run{left:18px;right:18px;top:74px}
}
.more.more-single{grid-template-columns:minmax(0,600px);justify-content:center}