/* TradesFolks 18.4.112 — Homepage Unified Margins + Mobile Categories Fix
   Goal:
   1) Desktop homepage sections align to the same left/right gutter as the hero.
   2) Explore Industries mobile view becomes compact, readable and overflow-safe. */

/* =========================================================
   DESKTOP HOMEPAGE — SAME HORIZONTAL GUTTER AS HERO
   Hero screenshot target ≈ 28px left + right.
   ========================================================= */
@media(min-width:1024px){
  /* Generic homepage section shells */
  .tf-homepage main > section > .shell,
  .tf-homepage .section > .shell,
  .tf-homepage section.section > .shell,
  .tf-homepage .marketplace-products > .shell,
  .tf-homepage .trending-products > .shell,
  .tf-homepage .tf-home-v3-industries > .shell,
  .tf-homepage .country-network-premium > .shell,
  .tf-homepage .trade-advantage > .shell,
  .tf-homepage .homepage-section > .shell{
    width:calc(100% - 56px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Hero itself uses same exact gutter */
  .tf-homepage .tf-home-v3-hero,
  .tf-homepage .home-hero,
  .tf-homepage .hero-slider{
    width:calc(100% - 56px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Some full-width homepage modules don't have .shell */
  .tf-homepage .marketplace-products,
  .tf-homepage .trending-products,
  .tf-homepage .tf-home-v3-industries,
  .tf-homepage .country-network-premium,
  .tf-homepage .trade-advantage{
    box-sizing:border-box!important;
  }
}

/* Wide screens: keep consistent edge spacing instead of huge max-width gutters */
@media(min-width:1600px){
  .tf-homepage main > section > .shell,
  .tf-homepage .section > .shell,
  .tf-homepage section.section > .shell,
  .tf-homepage .marketplace-products > .shell,
  .tf-homepage .trending-products > .shell,
  .tf-homepage .tf-home-v3-industries > .shell,
  .tf-homepage .country-network-premium > .shell,
  .tf-homepage .trade-advantage > .shell,
  .tf-homepage .homepage-section > .shell,
  .tf-homepage .tf-home-v3-hero{
    width:calc(100% - 56px)!important;
  }
}

/* =========================================================
   EXPLORE INDUSTRIES / CATEGORIES — MOBILE FIX
   ========================================================= */
@media(max-width:699px){
  /* Section itself */
  .tf-homepage .tf-home-v3-industries{
    width:100%!important;
    margin:0!important;
    padding:11px 0 13px!important;
    overflow:hidden!important;
  }

  .tf-homepage .tf-home-v3-industries > .shell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  /* Header becomes clean two-row layout; CTA no longer crushes title */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    align-items:end!important;
    gap:4px 8px!important;
    width:100%!important;
    margin:0 0 9px!important;
    padding:0!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > div{
    min-width:0!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > div > span{
    margin-bottom:3px!important;
    font-size:6px!important;
    letter-spacing:.09em!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
    max-width:100%!important;
    margin:0!important;
    font-size:20px!important;
    line-height:1.03!important;
    letter-spacing:-.035em!important;
    white-space:normal!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head p{
    margin:3px 0 0!important;
    font-size:6.4px!important;
    line-height:1.3!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > a{
    align-self:center!important;
    min-height:30px!important;
    height:30px!important;
    max-width:146px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    font-size:5.8px!important;
    white-space:nowrap!important;
  }

  /* True 2-column compact grid */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
  }

  /* Compact app-like category card */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:148px!important;
    min-height:148px!important;
    max-height:148px!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:13px!important;
    box-sizing:border-box!important;
  }

  /* Smaller product image zone */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 112px!important;
    width:100%!important;
    height:112px!important;
    min-height:112px!important;
    max-height:112px!important;
    padding:7px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }

  /* Clean category title strip */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 36px!important;
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    margin:0!important;
    padding:4px 6px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-body > strong{
    display:block!important;
    width:100%!important;
    margin:0!important;
    overflow:hidden!important;
    font-size:7.3px!important;
    font-weight:850!important;
    line-height:1.15!important;
    text-align:center!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  /* popular subcategories become lightweight horizontal pills */
  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories{
    display:block!important;
    width:100%!important;
    margin-top:9px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > strong{
    display:block!important;
    margin:0 0 5px!important;
    font-size:6px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > div{
    display:flex!important;
    gap:5px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > div::-webkit-scrollbar{
    display:none!important;
  }
}

/* Very small phones */
@media(max-width:380px){
  .tf-homepage .tf-home-v3-industries > .shell{
    padding-inline:7px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
    gap:6px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
    height:138px!important;
    min-height:138px!important;
    max-height:138px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
    flex-basis:104px!important;
    height:104px!important;
    min-height:104px!important;
    max-height:104px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
    flex-basis:34px!important;
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
    font-size:18px!important;
  }

  .tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > a{
    max-width:124px!important;
    padding-inline:8px!important;
    font-size:5.3px!important;
  }
}