/* Customer landing responsive polish v1.2 / v21.2 — CSS-only visual layer.
   Purpose: remove root/shell width constraints and make the landing app-ready on desktop/mobile.
   No functional DOM, links, JavaScript, Supabase, or event-handler changes. */

/* ==================== ROOT CANVAS ==================== */
html:has(#meshwarVideoAd),
body:has(#meshwarVideoAd){
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
}
body:has(#meshwarVideoAd){
  padding-inline:clamp(8px,1.25vw,18px)!important;
}

/* Remove boxed constraints from known root wrappers only. */
body:has(#meshwarVideoAd) #shell-root,
body:has(#meshwarVideoAd) .shell-container,
body:has(#meshwarVideoAd) .app-wrapper,
body:has(#meshwarVideoAd) .app-shell,
body:has(#meshwarVideoAd) main{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

/* Main landing canvas: broad but still comfortably centered on very large screens. */
body:has(#meshwarVideoAd) > nav > div,
body:has(#meshwarVideoAd) > section,
body:has(#meshwarVideoAd) .customer-landing-container,
body:has(#meshwarVideoAd) .landing-content,
body:has(#meshwarVideoAd) .header-container,
body:has(#meshwarVideoAd) .nav-container,
body:has(#meshwarVideoAd) .section-title,
body:has(#meshwarVideoAd) .grid-container,
body:has(#meshwarVideoAd) .local-stores-shell,
body:has(#meshwarVideoAd) #meshwarTicker,
body:has(#meshwarVideoAd) #meshwarStoreTabs,
body:has(#meshwarVideoAd) #internationalStoresSection{
  width:96%!important;
  max-width:1400px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Hero wrapper: stretch to the same application canvas. */
body:has(#meshwarVideoAd) > section:first-of-type{
  width:96%!important;
  max-width:1400px!important;
  min-width:0!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
body:has(#meshwarVideoAd) > section:first-of-type > div:first-child{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* ==================== PROMO MEDIA ==================== */
/* Keep the canonical MeshWar promo player only. Allow the CMS YouTube iframe generated from video_url. */
body:has(#meshwarVideoAd) #meshwarVideoAd video:not(#meshwarPromoVideo),
body:has(#meshwarVideoAd) #meshwarVideoAd iframe:not(#meshwarPromoYoutube){
  display:none!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}
body:has(#meshwarVideoAd) #meshwarVideoAd{
  width:min(68%,760px)!important;
  max-width:760px!important;
  min-width:0!important;
  margin:18px auto!important;
  padding:0!important;
  box-sizing:border-box!important;
}
body:has(#meshwarVideoAd) #meshwarVideoAd > div{
  width:100%!important;
  max-width:760px!important;
  min-width:0!important;
  margin:0 auto!important;
  border-radius:12px!important;
  overflow:hidden!important;
  box-shadow:0 10px 25px rgba(0,0,0,.15)!important;
}
body:has(#meshwarVideoAd) #meshwarPromoVideo{
  display:block;
  width:100%!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16 / 9!important;
  object-fit:cover!important;
  object-position:center center!important;
  border:0!important;
  margin:0!important;
}
body:has(#meshwarVideoAd) #meshwarPromoYoutube{
  width:100%!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16 / 9!important;
  border:0!important;
  margin:0!important;
}

/* ==================== STRETCHED LANDING SURFACES ==================== */
body:has(#meshwarVideoAd) .header-container,
body:has(#meshwarVideoAd) .local-stores-shell,
body:has(#meshwarVideoAd) #meshwarTicker,
body:has(#meshwarVideoAd) #meshwarStoreTabs,
body:has(#meshwarVideoAd) #internationalStoresSection{
  align-self:stretch!important;
}
body:has(#meshwarVideoAd) .header-container{
  padding-inline:clamp(20px,4vw,56px)!important;
}
body:has(#meshwarVideoAd) #meshwarStoreTabs > div{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
body:has(#meshwarVideoAd) #meshwarStoreTabs button{
  width:100%!important;
  min-width:0!important;
}
body:has(#meshwarVideoAd) .grid-container{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;
  gap:14px!important;
  padding-inline:0!important;
  align-items:stretch!important;
}
body:has(#meshwarVideoAd) .store-card{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:100%!important;
}
body:has(#meshwarVideoAd) .local-stores-grid{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  align-items:stretch!important;
}
body:has(#meshwarVideoAd) .local-public-card{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

/* ==================== TABLET / MOBILE APP VIEW ==================== */
@media(max-width:768px){
  html:has(#meshwarVideoAd),
  body:has(#meshwarVideoAd){
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  body:has(#meshwarVideoAd){
    padding:0 10px!important;
    box-sizing:border-box!important;
  }
  body:has(#meshwarVideoAd) #shell-root,
  body:has(#meshwarVideoAd) .shell-container,
  body:has(#meshwarVideoAd) .app-wrapper,
  body:has(#meshwarVideoAd) .app-shell,
  body:has(#meshwarVideoAd) main,
  body:has(#meshwarVideoAd) > nav > div,
  body:has(#meshwarVideoAd) > section,
  body:has(#meshwarVideoAd) .customer-landing-container,
  body:has(#meshwarVideoAd) .landing-content,
  body:has(#meshwarVideoAd) .header-container,
  body:has(#meshwarVideoAd) .nav-container,
  body:has(#meshwarVideoAd) .section-title,
  body:has(#meshwarVideoAd) .grid-container,
  body:has(#meshwarVideoAd) .local-stores-shell,
  body:has(#meshwarVideoAd) #meshwarTicker,
  body:has(#meshwarVideoAd) #meshwarStoreTabs,
  body:has(#meshwarVideoAd) #internationalStoresSection,
  body:has(#meshwarVideoAd) > section:first-of-type{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  body:has(#meshwarVideoAd) #meshwarVideoAd{
    width:100%!important;
    max-width:680px!important;
    margin:14px auto!important;
  }
  body:has(#meshwarVideoAd) #meshwarStoreTabs > div{
    grid-template-columns:1fr!important;
  }
  body:has(#meshwarVideoAd) .grid-container,
  body:has(#meshwarVideoAd) .local-stores-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
}

@media(max-width:480px){
  body:has(#meshwarVideoAd){padding:0 8px!important}
  body:has(#meshwarVideoAd) .grid-container,
  body:has(#meshwarVideoAd) .local-stores-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body:has(#meshwarVideoAd) .header-container{
    padding-inline:14px!important;
  }
}