.header-nav-links{display:contents}
@font-face{font-family:'Hoa Serif';src:url('assets/hoa-serif.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
h1,h2,.menu-panel h3{font-family:'Hoa Serif',serif;letter-spacing:normal}
h1{font-size:clamp(36px,4.8vw,60px);line-height:1.25}
h1 em{font-style:normal}
@media(max-width:760px){h1{font-size:40px}}
@media(max-width:380px){h1{font-size:36px}}
.drink-gallery figure>figcaption{display:block;width:100%;box-sizing:border-box;margin:0;text-align:center!important;padding:12px 6px 0;line-height:1.45;text-wrap:balance}
.drink-gallery .collection-banner{display:block;width:100%;max-width:780px;margin:38px auto 0}.drink-gallery .collection-banner img{display:block;width:100%;height:420px;object-fit:contain;border-radius:16px}
.drink-gallery-grid>figure[hidden]{display:none!important}
@media(min-width:901px){.drink-gallery-grid>figure.last-row-start{grid-column:2}}
@media(max-width:760px){.drink-gallery .collection-banner{margin-top:28px}.drink-gallery .collection-banner img{height:320px}}
.drink-photo-link{display:block;width:100%;border-radius:12px;cursor:pointer}.drink-photo-link:focus-visible{outline:3px solid var(--green);outline-offset:5px}.drink-photo-link img{transition:filter .18s ease}.drink-photo-link:hover img{filter:brightness(.96)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.drink-photo-link img{transition:none}}
.drink-filters{padding:16px 0}.drink-filters .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:0;padding-bottom:0}.drink-filters button{border:1px solid #e7efaa66;border-radius:999px;background:transparent;color:var(--lime);font:inherit;font-weight:700;padding:9px 18px;min-height:44px;cursor:pointer;line-height:1.4}.drink-filters button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--deep)}.drink-filters button:hover{border-color:var(--lime)}.drink-filters button:focus-visible{outline:2px solid white;outline-offset:3px}@media(max-width:760px){.drink-filters{padding:16px 0}.drink-filters .wrap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:480px}.drink-filters button{grid-column:span 2;display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;font-size:12px;padding:8px 7px;letter-spacing:0;text-align:center}.drink-filters button:nth-child(n+4){grid-column:span 3}}

.hero-foot.hero-slogan{display:block;text-align:center;color:var(--green);font-weight:600;font-size:clamp(12px,3.3vw,19px);line-height:1.6;white-space:nowrap}


#menu{background:#f3f0e5;border-top:1px solid #d8dfcf}
#menu .section-head h2{color:var(--green);font-size:clamp(38px,4.8vw,58px);position:relative;padding-bottom:18px}
#menu .section-head h2:after{content:'';display:block;position:absolute;bottom:0;left:0;width:110px;height:9px;border-bottom:3px solid #b49a4e;border-radius:50%;transform:rotate(-3deg)}
#menu .eyebrow{color:var(--green)}
#menu .menu-layout{grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
#menu .menu-tabs{gap:10px;margin-bottom:22px}
#menu .tab{background:#fffdf7;border:1.5px solid #a8b9a5;font-weight:600;padding:11px 19px;min-height:46px}
#menu .tab[aria-selected=true]{background:var(--green);color:#fff7dc;border-color:var(--green);box-shadow:0 4px 12px #124f2b20}
#menu .menu-panel{background:#fffdf6;border:1px solid #cbd5c2;border-radius:18px;padding:0;overflow:hidden;box-shadow:0 12px 32px #103d260c}
#menu .menu-panel h3{background:var(--deep);color:#fff4cf;font-size:30px;padding:20px 26px;margin:0;border-bottom:3px solid #c7b86c}
#menu .menu-rows{padding:8px 26px 12px}
#menu .menu-row{padding:13px 0;font-size:18px;border-bottom:1px dashed #d5ddc8;align-items:center;gap:14px}
#menu .menu-row:last-child{border:0}
#menu .menu-row strong{font-size:17px;color:var(--green);font-variant-numeric:tabular-nums}
#menu .menu-photos{background:#e7ebdb;border:1px solid #d3dbc6;border-radius:24px;padding:18px;gap:12px;margin-top:68px}
#menu .menu-photos img{height:355px;border-radius:100px 100px 12px 12px;object-fit:cover;object-position:center}
#menu .menu-photos img:nth-child(2){margin-top:44px}
#menu .menu-photos p{text-align:center;font-size:16px;color:var(--green);font-weight:600;margin:8px 0 2px}
#menu .full-menu{background:#e8eddc;border:1px solid #cbd7bd;border-radius:12px;padding:16px 20px}
@media(max-width:1000px){#menu .menu-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px}#menu .menu-photos img{height:300px}}
@media(max-width:900px){#menu .menu-layout{grid-template-columns:1fr}#menu .menu-photos{display:none}}
@media(max-width:760px){#menu .section-head h2{font-size:38px}#menu .tab{padding:10px 14px;font-size:14px}#menu .menu-panel h3{font-size:27px;padding:17px 20px}#menu .menu-rows{padding:6px 18px 10px}#menu .menu-row{font-size:16px;padding:13px 0}#menu .menu-row strong{font-size:15px}}

.drink-gallery .collection-banner{width:100%;max-width:none;margin:38px 0 0}.drink-gallery .collection-banner .drink-photo-link{border-radius:0}.drink-gallery .collection-banner img{width:100%;height:auto;object-fit:contain;border-radius:0}.drink-gallery .collection-banner figcaption{padding:16px 18px 0}@media(max-width:760px){.drink-gallery .collection-banner{margin-top:28px}.drink-gallery .collection-banner img{height:auto}}

/* Full-width banner on narrow screens; no fixed image height. */
@media(max-width:900px){section.drink-gallery>figure.collection-banner{display:block;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}section.drink-gallery>figure.collection-banner>a{display:block;width:100%;height:auto}section.drink-gallery>figure.collection-banner img{display:block;width:100%!important;height:auto!important;max-height:none!important;border-radius:0!important}}

@media(min-width:901px){section.drink-gallery>figure.collection-banner{width:min(640px,52.5vh);max-width:640px;margin:38px auto 0}section.drink-gallery>figure.collection-banner>a{width:100%}section.drink-gallery>figure.collection-banner figcaption{font-size:19px}}

.menu-panel + .menu-panel{margin-top:24px}

/* Cup-inspired custom lettering, sized for mobile and desktop. */
.hero h1.hero-art-title{margin-top:22px;margin-bottom:24px;line-height:1.15}
.hero-art-title .hero-title-art{display:block;width:min(100%,480px);height:auto;margin:0 0 16px;object-fit:contain}
.hero-art-title em{display:block;font-size:clamp(30px,3.6vw,48px);font-style:normal;line-height:1.25}
@media(max-width:760px){.hero h1.hero-art-title{margin-top:18px;margin-bottom:22px}.hero-art-title .hero-title-art{width:min(100%,390px);margin-bottom:14px}.hero-art-title em{font-size:clamp(28px,7.7vw,38px)}}

/* Brand-colored main navigation on every screen size. */
header .nav>a[href="#menu"],header .nav>a[href="#visit"]{color:#124f2b;font-weight:700}

.hero-contact>a{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.hero-contact .hero-phone-icon{font-size:.8em;line-height:1;font-weight:700}

/* Keep the phone symbol visibly separate from the first digit. */
.hero-contact>a{gap:0!important}
.hero-contact .hero-phone-icon{display:inline-block;margin-right:14px;flex-shrink:0}

/* Drink names share the same order destination as their photos. */
.drink-name-link{display:block;color:inherit;font:inherit;text-align:center;text-decoration:none;padding:4px 0}
.drink-name-link:hover{text-decoration:underline;text-underline-offset:4px}
.drink-name-link:focus-visible{outline:2px solid #124f2b;outline-offset:4px;border-radius:4px}

/* A gentle handwritten greeting in place of the slow-juice tagline. */
.hero-foot.hero-question{white-space:normal}
.hero-question img{display:block;width:100%;max-width:520px;aspect-ratio:6/1;height:auto;object-fit:cover;margin:0 auto}

/* Custom juice mixes */
#menu .mix-tagline{display:inline-block;font-size:.72em}
#menu .mix-intro{margin:0;padding:18px 26px 8px;color:var(--green);font-size:16px;line-height:1.65}
@media(max-width:760px){#menu .mix-tagline{display:block;margin-top:5px}#menu .mix-intro{padding:15px 18px 8px;font-size:15px}}

.gallery-mix-title{display:inline-block}
@media(max-width:760px){.gallery-mix-title{display:block;margin-top:7px;font-size:.8em;font-style:italic;color:var(--green);line-height:1.35}.gallery-title-separator{display:none}}

/* Show all header actions on mobile in two compact rows. */
@media(max-width:760px){
 header .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;padding:10px 0}
 header .brand{grid-column:1;grid-row:1}
 header .nav{display:contents}
 header .header-nav-links{display:flex;align-items:center;gap:18px;grid-column:2;grid-row:1;justify-self:end}
 header .nav .header-phone{display:inline-flex;align-items:center;gap:8px;grid-column:1;grid-row:2;font-size:14px;min-height:40px}
 header .nav .btn{display:inline-flex;grid-column:2;grid-row:2;justify-self:end;min-height:40px;padding:8px 10px;font-size:14px;white-space:nowrap}
 html{scroll-padding-top:125px}
}

/* Warm cream hero with a restrained terracotta accent. */
.hero{background:radial-gradient(ellipse at 100% 0%,#f6e7c9 0%,#f6e7c900 60%),linear-gradient(135deg,#fffaf1,#f8f3e9)}
.hero .hero-art-title em{color:#a34f2d}
.hero .intro{color:#434a43}
.hero .hero-foot{border-top-color:#ded5c5}
/* Preserve brand color for grouped header links. */
header .header-nav-links>a{color:var(--green);font-weight:700}

/* Clear prices and a compact gallery with progressive disclosure. */
.drink-name-link .drink-name{display:block}
.drink-name-link .drink-price{display:block;margin-top:5px;font-size:15px;font-weight:500;color:#a34f2d;line-height:1.4;font-variant-numeric:tabular-nums}
.gallery-more{text-align:center;margin-top:28px}
.gallery-more button{cursor:pointer;font:inherit;font-weight:600}
.gallery-more button[hidden]{display:none}
.hero-highlights{display:flex;flex-wrap:wrap;gap:12px 24px;margin:23px 0 0;padding:13px 0;border-top:1px solid #ded5c5;color:var(--green);font-size:14px;font-weight:600}
.hero-highlights span{display:inline-flex;align-items:center;gap:8px}
.hero-highlights svg{width:22px;height:22px;flex-shrink:0}
@media(max-width:760px){.hero-highlights{gap:12px 18px;font-size:13px}.drink-name-link .drink-price{font-size:14px}}

/* Explicit sizes preserve the original price pairs. */
#menu .menu-row .size-prices{display:flex;flex-direction:column;gap:4px;text-align:right;white-space:nowrap;font-size:15px}
.drink-size-prices>span{display:block}
.opening-hours{margin:18px 0;color:var(--green);line-height:1.65}
.opening-hours strong{font-size:14px;text-transform:uppercase;letter-spacing:.07em}
@media(max-width:760px){#menu .menu-row .size-prices{font-size:14px}.drink-size-prices{font-size:13px!important}}

/* An editorial pause celebrating Hoa's ingredients and care. */
.hoa-story{padding:70px 0;background:#f8f3e9}
.hoa-story-card{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;padding:60px;background:#103d26;color:#fff8e9;border-radius:28px;overflow:hidden;box-shadow:0 18px 45px #103d2612}
.hoa-story-card:before{content:'';position:absolute;inset:14px;border:1px solid #d5bc7955;border-radius:18px;pointer-events:none}
.hoa-story-lead,.hoa-story-copy{position:relative;min-width:0}
.hoa-story .eyebrow{font-size:11px;letter-spacing:1.8px;color:#e5d6af;margin-bottom:22px}
.hoa-story h2{font-family:'Hoa Serif',serif;font-size:clamp(32px,3.6vw,45px);line-height:1.25;margin-bottom:14px;color:#fff8e9}
.hoa-story h2 em{display:inline-block;font-style:italic;color:#e8cd8a;margin-top:5px}
.hoa-story-art{display:block;width:min(100%,320px);height:auto;color:#d9c595;margin-top:15px}
.hoa-story-copy{padding-top:5px;font-size:16px;line-height:1.85}
.hoa-story-opening{font-family:'Hoa Serif',serif;font-size:25px;line-height:1.4;color:#fff8e9;margin-bottom:24px}
.hoa-story-copy>p:not(.hoa-story-opening){color:#eee8d9;margin-bottom:18px}
.hoa-story-copy .hoa-story-heart{font-style:italic;border-left:2px solid #d8bb77;padding-left:18px;margin-top:26px}
.hoa-story-signature{display:flex;flex-wrap:wrap;gap:8px 24px;border-top:1px solid #d5bc794d;margin-top:28px;padding-top:20px;color:#e8cd8a;font-size:14px;font-weight:600}
@media(max-width:900px){.hoa-story-card{gap:32px;padding:42px}.hoa-story-copy{font-size:15px}}
@media(max-width:760px){.hoa-story{padding:38px 0}.hoa-story-card{grid-template-columns:1fr;gap:24px;padding:34px 26px;border-radius:22px}.hoa-story-card:before{inset:10px;border-radius:14px}.hoa-story .eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:16px}.hoa-story h2{font-size:34px}.hoa-story-art{width:190px;margin:2px auto 0}.hoa-story-copy{padding-top:0;font-size:15px;line-height:1.8}.hoa-story-opening{font-size:23px}.hoa-story-signature{flex-direction:column;gap:5px;font-size:13px}}

/* The supplied brand emblem anchors Hoa's story. */
.hoa-story-logo{display:block;width:min(100%,270px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:50%;margin:25px auto 0}
@media(max-width:760px){.hoa-story-logo{width:190px;margin:20px auto 4px}}

.hoa-story-thanks{text-align:center;margin:18px 0 0;color:#fff0cf;font-family:'Hoa Serif',serif;font-size:19px;font-style:italic;line-height:1.6}
@media(max-width:760px){.hoa-story-thanks{font-size:17px;margin-top:14px}}

/* Desktop menu uses the full width; mobile keeps the original stack. */
@media(min-width:901px){
 #menu .menu-layout{grid-template-columns:minmax(0,1fr)}
 #menu .menu-photos{display:none}
 #menu .menu-panels-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
 #menu .menu-panels-grid>.menu-panel{margin-top:0}
 #menu .menu-panels-grid:has(>.menu-panel[hidden]){grid-template-columns:minmax(0,1fr)}
}
/* Keep both signature phrases beside each other on phones. */
@media(max-width:760px){
 .hoa-story-signature{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:baseline;gap:8px;font-size:clamp(9px,2.65vw,12px);letter-spacing:-.1px}
 .hoa-story-signature>span{white-space:nowrap}
}

/* Center the two story promises around a small botanical ornament. */
.hoa-story-signature{flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:12px;text-align:center}
.hoa-story-signature>span{white-space:nowrap}
.hoa-story-ornament{display:block;flex:0 0 18px;width:18px;height:22px;color:#e8cd8a}
@media(max-width:760px){.hoa-story-signature{justify-content:center;align-items:center;gap:8px}.hoa-story-ornament{flex-basis:16px;width:16px;height:20px}}

.menu-subheading{margin:20px 22px 8px;color:#124f2b;font-size:16px;font-weight:700}

#gallery-title{scroll-margin-top:150px}
@media(min-width:901px){#gallery-title{scroll-margin-top:100px}}

/* Photo viewer uses the native modal layer above the mobile order bar. */
html.drink-viewer-open{overflow:hidden}
.drink-viewer{padding:0;border:0;border-radius:18px;width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 32px);background:#fffaf1;color:#103d26;box-shadow:0 20px 70px #0005;overflow:auto}
.drink-viewer::backdrop{background:#07190fd9}
.drink-viewer-content{position:relative}
.drink-viewer-close{position:absolute;right:12px;top:12px;z-index:1;width:44px;height:44px;display:grid;place-items:center;border:1px solid #103d2622;border-radius:50%;background:#fffaf1ed;color:#103d26;font:30px/1 sans-serif;cursor:pointer}
.drink-viewer-close:focus-visible{outline:3px solid #a34f2d;outline-offset:3px}
#drink-viewer-image{display:block;width:100%;height:auto;max-height:calc(100dvh - 130px);object-fit:contain;background:#f8f3e9}
.drink-viewer-caption{text-align:center;padding:15px 20px 19px}
.drink-viewer-caption h2{margin:0;font-size:20px;line-height:1.4}
.drink-viewer-caption p{margin:6px 0 0;color:#a34f2d;font-size:16px}
.menu-panel{scroll-margin-top:150px}
@media(min-width:901px){.menu-panel{scroll-margin-top:100px}}

/* Ordering stays beside the product details in the enlarged photo. */
.drink-viewer-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;text-align:left}
.drink-viewer-details{min-width:0}
.drink-viewer-order{white-space:nowrap;min-height:44px;padding:12px 18px;text-align:center;align-content:center;font-size:16px}
#drink-viewer-image{max-height:calc(100dvh - 180px)}
@media(max-width:400px){.drink-viewer-caption{gap:12px;padding:14px 16px 18px}.drink-viewer-caption h2{font-size:18px}.drink-viewer-order{padding:12px 14px;font-size:15px}}

button.drink-viewer-order{border:0;font-family:inherit;cursor:pointer}