/* Original approved Supermarket.lk wordmark. Artwork and colours are preserved. */
header .brand{display:block;width:clamp(260px,28vw,400px);flex-shrink:0;min-width:0}
.approved-logo-image{display:block;width:100%;height:auto;object-fit:contain;aspect-ratio:2098/386;max-width:100%}
.grand-footer .brand{display:block;width:min(360px,100%);padding:14px 18px;background:#fff;border-radius:12px;box-sizing:border-box}
.phone-content .phone-brand{display:block;width:100%;padding:0 0 12px;box-sizing:border-box}
.phone-brand .approved-logo-image{width:245px;max-width:100%;height:auto;margin:0}
.preview-logo .approved-logo-image{width:100%;height:auto}
@media(min-width:761px) and (max-width:1100px){header .brand{width:280px}header nav{gap:18px}}
@media(max-width:760px){header .brand{width:clamp(220px,65vw,320px);flex-shrink:1}header{gap:16px}.mobile-menu{flex-shrink:0}}
@media(max-width:360px){header .brand{width:220px}.header-wrap{padding-inline:15px}}
/* Floating pill navigation after scrolling. Keep the original header height to avoid layout jumps. */
.header-wrap{transition:background-color .2s,border-color .2s}
header{transition:border-radius .25s,box-shadow .25s,padding .25s}
body.nav-scrolled .header-wrap{top:12px;width:calc(100% - 32px);max-width:1680px;margin-inline:auto;padding:0;background:transparent;border-bottom-color:transparent}
body.nav-scrolled .header-wrap header{padding:14px 32px 14px 64px;border:1px solid #003c2910;border-radius:999px;box-shadow:0 8px 30px #003c2917;background:#fff}
body.nav-scrolled header>.btn{border-radius:999px}
body.nav-scrolled .explore-panel{top:calc(100% + 10px);border-radius:24px}
body.nav-scrolled #mobile-nav{margin-top:10px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 8px 30px #003c2917}
@media(max-width:1100px) and (min-width:761px){body.nav-scrolled .header-wrap header{gap:20px;padding-inline:40px 24px}body.nav-scrolled header .brand{width:250px}}
@media(max-width:760px){body.nav-scrolled .header-wrap{top:8px;width:calc(100% - 20px)}body.nav-scrolled .header-wrap header{min-height:76px;padding:12px 20px 12px 28px;gap:12px}body.nav-scrolled header .brand{width:clamp(180px,60vw,280px)}}
@media(prefers-reduced-motion:reduce){.header-wrap,header{transition:none}}