/* =============================================================
   318D — FEATURE HIERARCHY + TRUE MOBILE SCROLL BOUNDARY
   Presentation-only. No backend/member/vendor/realtor/admin/data logic.
   ============================================================= */

/* Put the free member feature ahead of the sales showcase.
   Row 1: main content. Row 2: Featured Vendors beside the ad rail.
   Row 3: short Design Services banner across the full page. */
body.home-300d .d300-home-grid{align-items:stretch!important}
body.home-300d .d300-left-column{
  grid-column:1!important;
  grid-row:1 / 3!important;
  align-self:stretch!important;
}
body.home-300d .d300-center-column{grid-column:2!important;grid-row:1!important}
body.home-300d .d300-right-column{grid-column:3!important;grid-row:1!important}
body.home-300d #featured-vendors{
  grid-column:2 / 4!important;
  grid-row:2!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:15px 18px!important;
  align-self:stretch!important;
}
body.home-300d #featured-vendors .d300-random-heading{margin-bottom:10px!important}
body.home-300d #featured-vendors .d300-random-heading h2{font-size:1.38rem!important;margin:.12rem 0!important}
body.home-300d #featured-vendors .d302-spotlight-wink{font-size:.67rem!important}
body.home-300d #featured-vendors .d300-random-slots{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
}
body.home-300d #featured-vendors .d300-random-slot{
  min-height:142px!important;
  padding:9px 10px!important;
  row-gap:3px!important;
  align-content:center!important;
}
body.home-300d #featured-vendors .d300-random-label{font-size:.53rem!important;margin:0 0 2px!important}
body.home-300d #featured-vendors .d300-random-art{width:84px!important;margin:0 auto 3px!important}
body.home-300d #featured-vendors .d300-random-slot>strong{font-size:.83rem!important;line-height:1.05!important}
body.home-300d #featured-vendors .d300-random-slot>small{font-size:.58rem!important;line-height:1.1!important}
body.home-300d #featured-vendors .d304-key-divider.d312-key-divider{width:64px!important;height:90px!important}
body.home-300d #featured-vendors .d304-key-divider.d312-key-divider img{height:84px!important;max-width:60px!important}

/* Sales stays visible, but visually secondary and lower on the page. */
body.home-300d .d317-design-showcase{
  grid-column:1 / 4!important;
  grid-row:3!important;
  min-height:0!important;
  padding:10px 16px!important;
  grid-template-columns:minmax(220px,.78fr) minmax(0,1.22fr)!important;
  gap:16px!important;
}
body.home-300d .d317-design-copy h2{font-size:1.16rem!important;margin:.12rem 0 .28rem!important}
body.home-300d .d317-design-copy p{font-size:.68rem!important;margin:0 0 5px!important}
body.home-300d .d317-shop-link{padding:5px 9px!important;font-size:.65rem!important}
body.home-300d .d317-design-thumbnails{gap:9px!important}
body.home-300d .d317-design-thumbnails img{max-width:92px!important;border-radius:7px!important}

@media(max-width:850px){
  body.home-300d #featured-vendors{width:100%!important;padding:11px 10px!important}
  body.home-300d #featured-vendors .d300-random-heading{margin-bottom:7px!important}
  body.home-300d #featured-vendors .d300-random-heading h2{font-size:1.05rem!important}
  body.home-300d #featured-vendors .d302-spotlight-wink{font-size:.52rem!important}
  body.home-300d #featured-vendors .d300-random-slots{grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr)!important;gap:7px!important}
  body.home-300d #featured-vendors .d300-random-slot{min-height:118px!important;padding:6px!important}
  body.home-300d #featured-vendors .d300-random-art{width:68px!important}
  body.home-300d #featured-vendors .d300-random-slot>strong{font-size:.66rem!important}
  body.home-300d #featured-vendors .d300-random-slot>small{font-size:.44rem!important}
  body.home-300d #featured-vendors .d304-key-divider.d312-key-divider{width:52px!important;height:72px!important}
  body.home-300d #featured-vendors .d304-key-divider.d312-key-divider img{height:68px!important;max-width:48px!important}

  body.home-300d .d317-design-showcase{
    padding:7px 9px!important;
    min-height:0!important;
    grid-template-columns:minmax(150px,.72fr) minmax(0,1.28fr)!important;
    gap:9px!important;
  }
  body.home-300d .d317-design-copy h2{font-size:.84rem!important;margin:1px 0 3px!important}
  body.home-300d .d317-design-copy p{font-size:.49rem!important;margin:0 0 3px!important}
  body.home-300d .d317-shop-link{font-size:.46rem!important;padding:3px 5px!important}
  body.home-300d .d317-design-thumbnails{gap:5px!important}
  body.home-300d .d317-design-thumbnails img{max-width:68px!important}
}

@media(max-width:650px){
  /* Keep the same three-column phone architecture, but place Featured Vendors
     beside the ad rail and the sales strip below everything. */
  body.home-300d #featured-vendors{
    grid-column:2 / 4!important;
    grid-row:2!important;
    width:100%!important;
    padding:7px 6px!important;
    border-radius:7px!important;
  }
  body.home-300d #featured-vendors .d300-random-heading{margin-bottom:5px!important}
  body.home-300d #featured-vendors .d300-random-heading .eyebrow{font-size:.36rem!important}
  body.home-300d #featured-vendors .d300-random-heading h2{font-size:.76rem!important}
  body.home-300d #featured-vendors .d302-spotlight-wink{font-size:.38rem!important}
  body.home-300d #featured-vendors .d300-random-slots{
    grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)!important;
    gap:4px!important;
  }
  body.home-300d #featured-vendors .d300-random-slot{min-height:94px!important;padding:4px 3px!important;row-gap:1px!important}
  body.home-300d #featured-vendors .d300-random-label{font-size:.31rem!important;margin:0!important}
  body.home-300d #featured-vendors .d300-random-art{width:50px!important;margin:0 auto 2px!important}
  body.home-300d #featured-vendors .d300-random-slot>strong{font-size:.48rem!important;line-height:1.02!important}
  body.home-300d #featured-vendors .d300-random-slot>small{font-size:.31rem!important;line-height:1.05!important}
  body.home-300d #featured-vendors .d304-key-divider.d312-key-divider{width:36px!important;height:54px!important}
  body.home-300d #featured-vendors .d304-key-divider.d312-key-divider img{height:50px!important;max-width:34px!important}

  body.home-300d .d317-design-showcase{
    grid-column:1 / 4!important;
    grid-row:3!important;
    padding:6px 7px!important;
    grid-template-columns:minmax(92px,.65fr) minmax(0,1.35fr)!important;
    gap:6px!important;
    border-radius:7px!important;
  }
  body.home-300d .d317-design-copy .eyebrow{font-size:.31rem!important}
  body.home-300d .d317-design-copy h2{font-size:.56rem!important;line-height:1.02!important;margin:1px 0 2px!important}
  body.home-300d .d317-design-copy p{font-size:.31rem!important;line-height:1.08!important;margin:0 0 2px!important}
  body.home-300d .d317-shop-link{font-size:.31rem!important;padding:2px 4px!important;border-radius:3px!important}
  body.home-300d .d317-design-thumbnails{gap:3px!important}
  body.home-300d .d317-design-thumbnails img{max-width:48px!important;border-radius:4px!important;box-shadow:0 3px 6px rgba(0,0,0,.25)!important}

  /* Real mobile scroll boundary: on iOS/WebKit, make BODY the only vertical
     scroll container. This prevents the root viewport from rubber-banding into
     a long blank tail below the footer while preserving fixed headers/modals. */
  html{
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }
  body.home-300d{
    height:100vh!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:none!important;
    -webkit-overflow-scrolling:touch;
  }
  body.home-300d footer{margin-bottom:0!important}
}