:root{color-scheme:light;--navy:#080d42;--muted:#526399;--blue:#0064ff;--border:#dce6f4}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--navy);background:radial-gradient(ellipse at 90% 15%,#edf5ff70,transparent 48%),#fcfdff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:3px solid #173e9d;outline-offset:4px}
.icon{width:24px;height:24px;flex-shrink:0}
button,a{-webkit-tap-highlight-color:transparent}
.page{width:min(100% - 36px,900px);margin:auto}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.24em;color:var(--muted);margin:0 0 14px}
.branch-section{margin-top:0}
.branch-section .eyebrow{margin-bottom:12px}
.branch-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 3px 12px;margin:-3px -3px 0}
.branch-track::-webkit-scrollbar{display:none}
.branch-choice{flex:0 0 43%;min-width:0;text-align:left;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--border);border-radius:13px;padding:15px 13px;color:var(--muted);box-shadow:0 4px 10px #16395409;scroll-snap-align:start}
.branch-choice .number{font-size:19px;font-weight:650;margin-bottom:9px}
.number:after{content:'';display:block;width:18px;height:1px;background:currentColor;margin-top:8px}
.branch-choice strong{font-size:14px;letter-spacing:-.4px;color:var(--navy);line-height:1.25}
.branch-choice>span:last-child{font-size:12px;line-height:1.3}
.branch-choice[aria-pressed=true]{background:linear-gradient(120deg,#0061ff,#0073ff);color:#fff;border-color:#79baff;box-shadow:0 5px 14px #0064ff24}
.branch-choice[aria-pressed=true] strong{color:white}
.dots{display:flex;justify-content:center;gap:0;margin:0 0 12px}
.dots button{border:0;background:none;padding:8px;min-width:32px;min-height:32px;display:grid;place-items:center}
.dots span{width:9px;height:9px;background:#d5deea;border-radius:50%}
.dots [aria-pressed=true] span{background:var(--blue)}
.branch-panel{padding:22px 18px 12px;border-radius:16px;background:#fff;box-shadow:0 10px 36px #2539510d;border:1px solid #f1f4f9}
.branch-panel h2{font-size:28px;line-height:1.12;letter-spacing:-1px;margin:0 0 5px}
.branch-panel>p{margin:0;color:var(--muted);font-size:16px}
.branch-info{border-block:1px solid var(--border);padding:16px 0;margin:18px 0 12px;display:grid;gap:12px}
.branch-info>div{display:flex;align-items:flex-start;gap:15px;font-size:14px;line-height:1.45}
.branch-info .icon{width:22px;height:22px;color:#485f94}
.branch-info address{font-style:normal}
.branch-info a{min-height:24px;display:inline-flex;align-items:center}
#branch-hours{font-size:13px}
.action-box{border:1px solid #e3edfd;border-radius:12px;background:linear-gradient(#fff,#f8fbff);padding:10px 8px}
.primary-actions{display:grid;grid-template-columns:1.35fr .75fr 1.2fr;gap:6px}
.primary-actions a{display:flex;justify-content:center;align-items:center;gap:5px;min-height:46px;border:1px solid #deebff;border-radius:30px;font-size:12px;white-space:nowrap}
.primary-actions .icon{width:19px;height:19px}
.directions{background:var(--blue);color:white;font-weight:600}
.call{background:#eff6ff}
.whatsapp{background:#ecfaf3;color:#00a946;border-color:#d7f2e3!important;font-weight:600}
.secondary-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);padding-top:10px;margin-top:10px;gap:8px}
.secondary-actions button{background:#eff6ff;border:1px solid #dfeafb;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;font-size:12px;color:var(--navy)}
.secondary-actions .icon{width:19px;height:19px}
#feedback{font-size:12px;margin-top:8px;min-height:0}
#feedback:empty{display:none}






.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--border);margin-top:22px;padding:20px 0 40px}
.support{display:flex;align-items:center;gap:10px}
.support-icon{display:grid;place-items:center;background:#e9f3ff;border-radius:50%;width:42px;height:42px;color:var(--blue);flex-shrink:0}
.support strong{font-size:15px;display:block;letter-spacing:-.3px}
.support>span>span{font-size:12px;color:var(--muted)}
.socials{display:flex;align-items:flex-start;gap:8px;border-left:1px solid var(--border);padding-left:12px}
.socials a{display:flex;align-items:center;flex-direction:column;min-width:32px;min-height:44px}
.socials .icon{width:27px;height:27px}
.facebook{color:#0064ff}
.instagram{color:#d900c5}
.google span{font-size:9px;white-space:nowrap;margin-top:4px;color:var(--muted)}
[hidden]{display:none!important}

@media(max-width:360px){.header-inner,.page{width:calc(100% - 28px)}
.branch-choice{flex-basis:49%;padding:14px 10px}
.branch-panel{padding:18px 12px 10px}
.primary-actions a{font-size:11px;gap:3px}
.primary-actions .icon{width:16px;height:16px}
.secondary-actions button{font-size:11px;gap:4px}
.support{gap:6px}
.support-icon{width:30px;height:30px}
.support strong{font-size:13px}
.support>span>span{font-size:10px}
.socials{gap:4px;padding-left:8px}
.socials .icon{width:23px;height:23px}

}



@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}
}


/* The shared QR interface stays compact at every viewport size. */
html{background:#eef1f6;overscroll-behavior-y:none}

body{width:min(100%,480px);min-height:100svh;margin:0 auto;background:radial-gradient(ellipse at 95% 18%,#edf5ff90,transparent 45%),#fcfdff;box-shadow:0 8px 50px #16375b0c}


.page{width:calc(100% - 32px)}






.eyebrow{font-size:9px;letter-spacing:.22em;margin-bottom:12px}

.branch-choice{flex-basis:44%;min-height:116px;padding:14px 13px}

.branch-choice strong{font-size:15px}

.branch-choice .number{font-size:20px;margin-bottom:6px}

.branch-panel{padding:20px 17px 12px;border-radius:14px}

.branch-panel h2{font-size:28px}
.branch-panel>p{font-size:15px}

.branch-info{margin:15px 0 10px;padding:14px 0;gap:11px}

.branch-info>div{font-size:14px;gap:13px}









.footer{padding:18px 0 max(16px,env(safe-area-inset-bottom));margin-top:18px}

@media(min-width:520px){body{margin:20px auto;min-height:0;border:1px solid #e0e7f0;border-radius:18px}
}

@media(max-width:360px){.branch-choice strong{font-size:13px}
.branch-panel{padding-inline:12px}


}


/* Match the approved hero composition within the compact page. */
.page{container-type:inline-size}









/* One proportional header/hero composition for the compact QR interface. */
@font-face{font-family:VP Inter;src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}

@font-face{font-family:VP Inter;src:url('fonts/inter-800.woff2') format('woff2');font-weight:800;font-display:swap}

.site-header{position:relative;z-index:2;background:#fff;box-shadow:0 5px 18px #153f7610;border-radius:0 0 10px 10px}

.header-inner{width:calc(100% - 40px);margin:auto;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}

.brand{display:flex;align-items:center;width:150px;flex-shrink:0}

.brand img{display:block;width:100%;height:auto}


.header-inner nav{display:flex;align-items:center;gap:16px}

.website-link{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600}

.website-link .icon{width:17px;height:17px}

.header-whatsapp{display:flex;align-items:center;min-height:44px;border-left:1px solid var(--border);padding-left:16px;color:#00bb50}

.header-whatsapp .icon{width:29px;height:29px}

.hero{position:relative;isolation:isolate;height:48cqw;margin:0 -16px 4cqw;padding:0;overflow:hidden}

.hero-copy{position:relative;z-index:1;width:64cqw;padding:6.4cqw 0 0 calc(16px + 1cqw);font-family:'VP Inter',Arial,sans-serif}

.hero .eyebrow{font-size:1.95cqw;letter-spacing:.23em;font-weight:400;line-height:1.4;margin:0 0 3.5cqw}

.hero-copy h1{font-family:'VP Inter',Arial,sans-serif;font-size:7.45cqw;line-height:1.1;letter-spacing:-.39cqw;font-weight:800;white-space:nowrap;margin:0 0 2.6cqw}

.hero-intro{font-size:3.25cqw;font-weight:400;line-height:1.38;color:var(--muted);width:51cqw;margin:0}

.hero-art{position:absolute;width:57cqw;height:57cqw;object-fit:contain;max-width:none;right:-2cqw;top:-3.6cqw;z-index:0;opacity:1;pointer-events:none}

.hero::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    /* Separate map texture: no transparent asset margins or duplicated store. */
    background:url('imgs/hero-map.svg') right center / cover no-repeat;
    opacity:.65;
    -webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 82%),linear-gradient(0deg,transparent,#000 23%,#000 80%,transparent);
    mask-image:linear-gradient(90deg,transparent 25%,#000 82%),linear-gradient(0deg,transparent,#000 23%,#000 80%,transparent);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
}

@media(min-width:520px){.site-header{border-radius:18px 18px 10px 10px}
}

@media(max-width:360px){.header-inner{width:calc(100% - 28px);gap:10px;min-height:60px}
.brand{width:124px}
.header-inner nav{gap:10px}
.website-link{font-size:12px}
.header-whatsapp{padding-left:10px}
.header-whatsapp .icon{width:26px;height:26px}
}

/* Keep the compact composition, including the carousel hint, at every width. */
.branch-choice{flex-basis:40%;padding:3.55cqw 2.7cqw;min-height:29.5cqw}
.branch-choice strong{font-size:clamp(12px,3.8cqw,17px)}
.branch-choice>span:last-child{font-size:clamp(11px,3.05cqw,14px)}
.branch-choice .number{font-size:5.1cqw;margin-bottom:1.5cqw}
.branch-panel{padding:5.1cqw 4.3cqw 3cqw}
.branch-panel h2{font-size:7.1cqw}
.primary-actions{grid-template-columns:1.35fr .75fr 1.2fr}
.primary-actions a{font-size:clamp(11px,3cqw,13px);gap:1.2cqw}
.primary-actions .icon{width:4.8cqw;height:4.8cqw}
.secondary-actions button{font-size:clamp(11px,3cqw,13px);gap:1.7cqw}
.shop-banner{position:relative;display:flex;align-items:center;isolation:isolate;overflow:hidden;aspect-ratio:4.85;min-height:86px;margin-top:3.5cqw;padding:4.2cqw 4.8cqw;border-radius:2cqw;color:white;background:radial-gradient(ellipse at 70% 10%,#1c3e65 0%,transparent 60%),linear-gradient(110deg,#102e55,#071c39)}
.shop-banner{width:100%;max-width:100%;min-width:0}
.shop-banner>div{position:relative;z-index:1;width:100%;min-width:0}
.shop-banner h2{font-family:'VP Inter',Arial,sans-serif;font-size:5.8cqw;line-height:1.15;letter-spacing:-.23cqw;font-weight:800;margin:0 0 1.2cqw;white-space:nowrap}
.shop-banner p{display:flex;align-items:center;gap:1.2cqw;width:max-content;max-width:100%;font-size:2.75cqw;line-height:1.4;color:#abe1ff;margin:0;white-space:nowrap}
.shop-banner p span{font-size:4.3cqw;line-height:1}
.shop-banner img{position:absolute;z-index:0;width:110%;height:auto;max-width:none;right:-43%;top:-45%;opacity:.48;pointer-events:none}