/* V34 — premium marketplace polish, reference-led dashboard grid, map preview and soft ambient motion. */
:root{--v34-navy:#091847;--v34-blue:#075acb;--v34-purple:#6529ec;--v34-gold:#ffc83d;--v34-ink:#151d40;--v34-line:#e7eaf4;--v34-shadow:0 12px 34px rgba(7,18,66,.14)}
html{scroll-padding-top:94px}
body{background:#0a1747}
/* Keep the Sri Lankan scenery visible but intentionally quiet behind the cards. */
.lsm9-cinematic-bg{background:radial-gradient(ellipse at 78% 12%,#1a4a9a 0,transparent 39%),linear-gradient(135deg,#07143f,#11135b 52%,#24116f)!important}
.lsm9-cinematic-bg video{opacity:.27!important;filter:saturate(.76) contrast(.94) blur(1px)!important;transform:scale(1.035)!important}
.lsm9-bg-shade{background:linear-gradient(90deg,rgba(4,13,49,.72),rgba(7,24,70,.57) 50%,rgba(23,12,76,.61)),linear-gradient(180deg,rgba(5,13,47,.45),rgba(7,20,59,.24) 45%,rgba(9,14,53,.58))!important}
.lsm9-bg-glow{inset:-8%!important;opacity:.62;animation:lsm34GlowDrift 34s ease-in-out infinite alternate!important}
.lsm9-cinematic-bg:after{content:"";position:absolute;inset:-24%;pointer-events:none;background:radial-gradient(ellipse at 18% 35%,rgba(58,135,255,.18),transparent 34%),radial-gradient(ellipse at 82% 65%,rgba(149,74,255,.20),transparent 38%),radial-gradient(ellipse at 52% 12%,rgba(255,211,96,.08),transparent 32%);filter:blur(35px);animation:lsm34Aurora 42s ease-in-out infinite alternate;opacity:.72}
@keyframes lsm34GlowDrift{0%{transform:translate3d(-1.5%,0,0) scale(1)}100%{transform:translate3d(1.5%,1%,0) scale(1.035)}}
@keyframes lsm34Aurora{0%{transform:translate3d(-1.2%,0,0) rotate(-2deg) scale(1)}50%{transform:translate3d(1%,1.2%,0) rotate(1deg) scale(1.04)}100%{transform:translate3d(0,-.8%,0) rotate(2deg) scale(1.02)}}
/* One coherent 16-column bento layout like the supplied dashboard reference. */
.lsm30-board{grid-template-columns:repeat(16,minmax(0,1fr))!important;gap:14px!important;padding:15px clamp(10px,1.3vw,20px) 32px!important;width:min(1540px,100%)!important}
.lsm30-board>section{border:1px solid rgba(255,255,255,.82)!important;border-radius:20px!important;box-shadow:0 10px 28px rgba(4,13,58,.16)!important;backdrop-filter:blur(15px) saturate(118%)!important;transition:box-shadow .22s ease,border-color .22s ease}
.lsm30-board>section:hover{box-shadow:0 15px 34px rgba(4,13,58,.22)!important;border-color:#fff!important}
.b30-hero{grid-column:span 9!important;min-height:260px!important;border-radius:22px!important;background:linear-gradient(95deg,rgba(7,19,69,.94),rgba(7,28,79,.77) 45%,rgba(7,32,82,.12)),url('/assets/visuals/hero-shopping.webp') right center/cover!important}
.b30-hero h1{font-size:clamp(34px,3.6vw,56px)!important;max-width:650px;letter-spacing:-.045em!important}
.b30-hero p{max-width:480px!important;font-size:clamp(14px,1.28vw,18px)!important}
.b30-services{grid-column:span 7!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important}
.b30-services a{min-height:100px!important;border-radius:15px!important;background:linear-gradient(155deg,#fff,#f0f3ff)!important}
.b30-services a:nth-child(3n+2){background:linear-gradient(155deg,#fff,#fff0f5)!important}
.b30-services a:nth-child(3n){background:linear-gradient(155deg,#fff,#edf7ff)!important}
.b30-cats{grid-column:span 9!important}
.b30-cat-row a{flex-basis:86px!important}
.b30-cat-row img{width:68px!important;height:68px!important;border-radius:20px!important}
.b30-food{grid-column:span 7!important;min-height:190px!important}
.b30-food-visual{height:145px!important;flex-basis:min(41%,270px)!important;transform:rotate(0)!important}
.b30-ride{grid-column:span 9!important;min-height:246px!important;padding-right:43%!important;background:linear-gradient(132deg,#086ee3 0%,#143db5 58%,#4f20b0 100%)!important}
.b30-ride>p,.b30-ride>ul,.b30-ride>.b30-btn{max-width:100%!important}
.b30-ride-map{position:absolute;top:15px;right:15px;bottom:15px;width:39%;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.68);border-radius:16px;background:#fff;color:#151d40;box-shadow:0 12px 26px rgba(3,13,63,.22)}
.b30-map-art{position:relative;flex:1;min-height:120px;overflow:hidden;background:#edf4f7}
.b30-map-art svg{display:block;width:100%;height:100%;min-height:120px;object-fit:cover}
.b30-map-pin{position:absolute;display:flex;align-items:center;gap:4px;padding:4px 7px;border-radius:8px;background:#fff;box-shadow:0 3px 10px rgba(10,25,65,.16);font-size:9px;font-weight:900;color:#23304a}
.b30-map-pin:before{content:"";width:7px;height:7px;border-radius:50%;background:#10b877}
.b30-map-pin.pickup{left:9%;bottom:17%}
.b30-map-pin.destination{right:7%;top:12%}
.b30-map-pin.destination:before{background:#ed426e}
.b30-map-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;background:#fff}
.b30-map-foot span{display:grid;gap:2px}.b30-map-foot b{font-size:10px}.b30-map-foot small{font-size:8px;color:#758098;line-height:1.25}
.b30-map-foot a{flex:0 0 auto;color:#5b35e7;font-size:9px;font-weight:900;text-decoration:none}
.b30-track{grid-column:span 7!important;min-height:246px!important}
.b30-track-steps{gap:10px!important}
.b30-track-steps span{font-size:10px!important}
.b30-feat{grid-column:span 7!important}
.b30-feat-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.b30-seller,.b30-wa,.b30-pay{grid-column:span 3!important}
.b30-p .im{height:118px!important;background:linear-gradient(145deg,#f2f5ff,#fafbff)!important}
.b30-p img{max-width:100%;max-height:118px;object-fit:contain}
.b30-p .b30-btn{min-height:38px!important;font-size:11px!important}
.b30-seller button.row{min-height:44px!important}
/* The cards and links are real actions; the map preview itself never impersonates live GPS. */
.b30-ride-map a:focus-visible,.b30-services a:focus-visible,.b30-cat-row a:focus-visible{outline:3px solid #ffcf43;outline-offset:2px}
/* Tablet: pair cards in two-column rows without squeezing text. */
@media(max-width:1100px){
 .lsm30-board{grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:12px!important}
 .b30-hero,.b30-services,.b30-cats,.b30-food,.b30-ride,.b30-track,.b30-feat{grid-column:span 4!important}
 .b30-services{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .b30-services a{min-height:88px!important}
 .b30-ride{padding-right:14px!important;min-height:300px!important}
 .b30-ride-map{position:relative;inset:auto;width:100%;height:145px;margin-top:14px}
 .b30-ride>p,.b30-ride>ul,.b30-ride>.b30-btn{max-width:100%!important}
 .b30-seller,.b30-wa,.b30-pay{grid-column:span 8!important}
 .b30-feat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Phone: compact sticky app shell, readable tap targets and safe-area-aware cards. */
@media(max-width:680px){
 html{scroll-padding-top:78px}
 body{padding-bottom:calc(72px + env(safe-area-inset-bottom))!important}
 .lsm8-header{border-radius:0 0 16px 16px!important}
 .lsm8-header-inner{min-height:54px!important;padding:7px 10px!important;gap:7px!important}
 .lsm8-brand-icon{width:37px!important;height:37px!important;flex-basis:37px!important}
 .lsm8-brand-copy b{font-size:15px!important}
 .lsm8-brand-copy small{font-size:7px!important}
 .lsm8-searchbar{height:40px!important;min-height:40px!important}
 .lsm8-searchbar input{font-size:14px!important}
 .lsm-mobile-menu{top:58px!important;left:8px!important;right:8px!important;border-radius:16px!important}
 .lsm30-board{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;padding:10px 9px calc(25px + env(safe-area-inset-bottom))!important}
 .lsm30-board>section{grid-column:span 2!important;min-width:0!important;padding:12px!important;border-radius:16px!important;box-shadow:0 5px 16px rgba(9,18,66,.10)!important}
 .b30-hero{min-height:216px!important;padding:16px!important;background-position:center right!important}
 .b30-hero h1{max-width:82%!important;font-size:clamp(27px,7.8vw,36px)!important;line-height:1.06!important}
 .b30-hero p{max-width:84%!important;font-size:11px!important;line-height:1.45!important}
 .b30-hero-points{max-width:90%!important;gap:6px 9px!important;font-size:8px!important}
 .b30-hero-actions{gap:7px!important}
 .b30-btn{min-height:43px!important;padding:0 13px!important;font-size:11px!important}
 .b30-ghost{min-height:42px!important;font-size:10px!important}
 .b30-services{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;padding:9px!important}
 .b30-services a{min-height:78px!important;padding:7px 2px!important;border-radius:12px!important;gap:4px!important}
 .b30-services a>.b30-service-photo{width:38px!important;height:36px!important;border-radius:10px!important}
 .b30-services a>b{font-size:8px!important;line-height:1.15!important;overflow-wrap:anywhere}
 .b30-services a>small{font-size:6.5px!important;line-height:1.15!important}
 .b30-cats{padding:11px!important}
 .b30-cats h2,.b30-feat h2{font-size:14px!important}
 .b30-cat-row{gap:8px!important}
 .b30-cat-row a{flex:0 0 66px!important;min-height:78px!important;gap:5px!important}
 .b30-cat-row img{width:49px!important;height:49px!important;border-radius:15px!important}
 .b30-cat-row b{font-size:8px!important}
 .b30-food{min-height:166px!important;padding:13px!important}
 .b30-food>div:first-child{max-width:70%!important}
 .b30-food h2{font-size:20px!important}
 .b30-food p{font-size:9px!important}
 .b30-food-visual{height:92px!important;flex-basis:31%!important;border-radius:13px!important}
 .b30-ride{min-height:0!important;padding:13px!important}
 .b30-ride .b30-card-title{margin-bottom:9px!important}
 .b30-ride .b30-card-title>span{width:35px;height:35px;flex-basis:35px;font-size:20px}
 .b30-ride .b30-card-title h2{font-size:14px!important}
 .b30-ride p{font-size:10px!important;line-height:1.45!important}
 .b30-ride ul{gap:6px 10px!important;margin-bottom:10px!important}
 .b30-ride li{font-size:8px!important}
 .b30-ride-map{height:160px!important;margin-top:12px!important}
 .b30-map-foot{padding:8px!important}
 .b30-map-foot b{font-size:10px!important}.b30-map-foot small{font-size:8px!important}
 .b30-track{min-height:0!important}
 .b30-track-steps{margin:12px 0!important}
 .b30-track-steps span{font-size:8px!important}
 .b30-track-steps i{width:21px;height:21px;flex-basis:21px}
 .b30-track p{font-size:9px!important}
 .b30-feat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .b30-p{padding:8px!important;border-radius:13px!important}
 .b30-p .im{height:auto!important;min-height:0!important;aspect-ratio:1/1!important}
 .b30-p img{height:100%!important;max-height:none!important;object-fit:contain!important}
 .b30-p>b{font-size:10px!important;white-space:normal!important;line-height:1.25!important;min-height:25px}
 .b30-p .pr{font-size:12px!important}
 .b30-p .b30-btn{min-height:40px!important;font-size:10px!important}
 .b30-seller,.b30-wa,.b30-pay{grid-column:span 1!important}
 .b30-seller h2,.b30-wa h2,.b30-pay h2{font-size:13px!important}
 .b30-seller button.row{min-height:42px!important;font-size:10px!important}
 .b30-wa p,.b30-pay p{font-size:9px!important;line-height:1.4}
 .b30-wa small,.b30-pay small{font-size:8px!important}
 .b30-pay>div{gap:5px!important}
 .b30-pay>div span{font-size:8px!important;padding:7px!important}
 .lsm-mobile-bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;height:66px!important;padding:5px 3px calc(5px + env(safe-area-inset-bottom))!important;gap:2px!important}
 .lsm-mobile-bottom-nav small{font-size:9px!important}
 .lsm-mobile-bottom-nav>*:nth-child(6){min-height:58px!important;top:-12px!important}
 .overlay .modal,.overlay .drawer{max-height:calc(100dvh - 14px - env(safe-area-inset-top))!important}
}
@media(max-width:380px){
 .b30-services{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 .b30-seller,.b30-wa,.b30-pay{grid-column:span 2!important}
 .b30-ride-map{height:148px!important}
 .lsm-mobile-bottom-nav small{font-size:8px!important}
}
@media(prefers-reduced-motion:reduce){
 .lsm9-cinematic-bg:after,.lsm9-bg-glow{animation:none!important}
 .lsm9-cinematic-bg video{display:none!important}
 .lsm30-board>section,.b30-services a{transition:none!important}
}