/* TradesFolks 18.4.139
   Homepage zoom-safe exact-section hotfix.
   Targets live homepage classes that were missed by the generic responsive layer.
*/

.tf-homepage{
  --tf-home-gutter:28px;
}

@media(max-width:1279px){
  .tf-homepage{ --tf-home-gutter:22px; }
}
@media(max-width:1023px){
  .tf-homepage{ --tf-home-gutter:16px; }
}
@media(max-width:820px){
  .tf-homepage{ --tf-home-gutter:8px; }
}
@media(max-width:430px){
  .tf-homepage{ --tf-home-gutter:6px; }
}

/* =========================================================
   EXACT LIVE HOMEPAGE SECTIONS
   Every major section uses the same outer gutter as hero.
   ========================================================= */
.tf-homepage .tf-home-v3,
.tf-homepage .country-network,
.tf-homepage .curated-b2b-market,
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services,
.tf-homepage .home-category-showcases,
.tf-homepage .festival-marketplace,
.tf-homepage .marketplace-products,
.tf-homepage .trade-advantage,
.tf-homepage .trending-products,
.tf-homepage .new-arrivals,
.tf-homepage .tf-rfq-enterprise,
.tf-homepage .commerce-offers,
.tf-homepage .tf-commerce-capabilities,
.tf-homepage .tf-industry-enterprise,
.tf-homepage .tf-process-enterprise,
.tf-homepage .tf-dual-cta-enterprise,
.tf-homepage .tf-insights-enterprise,
.tf-homepage .home-reels,
.tf-homepage .tf-content-enterprise,
.tf-homepage .tf-custom-sourcing-enterprise{
  width:calc(100% - (var(--tf-home-gutter) * 2))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Sections with full-bleed colour/background may keep their background wrapper,
   but their inner shell must follow the same hero gutter width. */
.tf-homepage .country-network > .shell,
.tf-homepage .curated-b2b-market > .shell,
.tf-homepage .tf-sourcing-solutions > .shell,
.tf-homepage .tf-business-growth-services > .shell,
.tf-homepage .home-category-showcases > .shell,
.tf-homepage .festival-marketplace > .shell,
.tf-homepage .marketplace-products > .shell,
.tf-homepage .trade-advantage > .shell,
.tf-homepage .trending-products > .shell,
.tf-homepage .new-arrivals > .shell,
.tf-homepage .tf-rfq-enterprise > .shell,
.tf-homepage .commerce-offers > .shell,
.tf-homepage .tf-commerce-capabilities > .shell,
.tf-homepage .tf-industry-enterprise > .shell,
.tf-homepage .tf-process-enterprise > .shell,
.tf-homepage .tf-dual-cta-enterprise > .shell,
.tf-homepage .tf-insights-enterprise > .shell,
.tf-homepage .home-reels > .shell,
.tf-homepage .tf-content-enterprise > .shell,
.tf-homepage .tf-custom-sourcing-enterprise > .shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Hero already owns its internal visual gutter; avoid double shrinking. */
.tf-homepage .tf-home-v3{
  width:100%!important;
}
.tf-homepage .tf-home-v3 > .tf-home-v3-hero,
.tf-homepage .tf-home-v3 > .tf-home-v3-trust,
.tf-homepage .tf-home-v3 > .tf-home-v3-industries{
  width:calc(100% - (var(--tf-home-gutter) * 2))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* =========================================================
   SERVICE SECTIONS — FULL WIDTH + READABLE
   ========================================================= */
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services{
  overflow:visible!important;
  padding-left:0!important;
  padding-right:0!important;
}

.tf-homepage .tf-sourcing-solutions > .shell,
.tf-homepage .tf-business-growth-services > .shell{
  overflow:visible!important;
}

.tf-homepage .tf-service-card-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  align-items:stretch!important;
}

.tf-homepage .tf-service-card{
  display:grid!important;
  grid-template-rows:auto auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  min-width:0!important;
}

.tf-homepage .tf-service-card-hero{
  height:220px!important;
  min-height:220px!important;
  max-height:none!important;
  overflow:hidden!important;
}

.tf-homepage .tf-service-card-media{
  inset:0 0 74px 0!important;
}

.tf-homepage .tf-service-card-directory-copy{
  height:66px!important;
  min-height:66px!important;
  max-height:66px!important;
  overflow:hidden!important;
}

.tf-homepage .tf-service-card-directory-copy h3{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  font-size:17px!important;
  line-height:1.08!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Product/subcategory names were being clipped by fixed card/footer height. */
.tf-homepage .tf-service-mini-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  height:auto!important;
  min-height:88px!important;
  max-height:none!important;
  overflow:visible!important;
}

.tf-homepage .tf-service-mini-grid > a{
  display:grid!important;
  grid-template-rows:46px minmax(24px,auto)!important;
  align-content:center!important;
  justify-items:center!important;
  height:auto!important;
  min-height:88px!important;
  max-height:none!important;
  padding:8px 6px!important;
  overflow:visible!important;
}

.tf-homepage .tf-service-mini-image{
  width:48px!important;
  height:42px!important;
  min-width:48px!important;
  min-height:42px!important;
}

.tf-homepage .tf-service-mini-grid strong{
  display:-webkit-box!important;
  width:100%!important;
  min-height:20px!important;
  max-height:30px!important;
  margin:2px 0 0!important;
  padding:0 3px!important;
  font-size:8px!important;
  line-height:1.15!important;
  font-weight:750!important;
  text-align:center!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
}

/* =========================================================
   ZOOM / NARROW DESKTOP RESPONSIVENESS
   Browser zoom changes effective CSS viewport width.
   These breakpoints preserve readability instead of shrinking
   the entire section into a tiny centered shell.
   ========================================================= */
@media(min-width:1180px){
  .tf-homepage .tf-service-card-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media(min-width:821px) and (max-width:1179px){
  .tf-homepage .tf-service-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .tf-homepage .tf-service-card-hero{
    height:205px!important;
    min-height:205px!important;
  }

  .tf-homepage .tf-service-card-directory-copy h3{
    font-size:16px!important;
  }

  .tf-homepage .tf-service-mini-grid strong{
    font-size:8.5px!important;
  }
}

/* Curated "Discover more ways to source" should not become four microscopic cards. */
@media(min-width:1180px){
  .tf-homepage .curated-b2b-rail{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
  }
}

@media(min-width:821px) and (max-width:1179px){
  .tf-homepage .curated-b2b-rail{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
}

/* Category modules keep their full available width at any desktop zoom. */
@media(min-width:821px){
  .tf-homepage .home-category-showcase,
  .tf-homepage .tf-category-directory-module{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:820px){
  .tf-homepage .tf-home-v3 > .tf-home-v3-hero,
  .tf-homepage .tf-home-v3 > .tf-home-v3-trust,
  .tf-homepage .tf-home-v3 > .tf-home-v3-industries{
    width:calc(100% - (var(--tf-home-gutter) * 2))!important;
  }

  .tf-homepage .tf-service-card-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .tf-homepage .tf-service-card-grid::-webkit-scrollbar{
    display:none!important;
  }

  .tf-homepage .tf-service-card{
    flex:0 0 min(82vw,360px)!important;
    width:min(82vw,360px)!important;
    min-width:min(82vw,360px)!important;
    max-width:min(82vw,360px)!important;
    scroll-snap-align:start!important;
  }

  .tf-homepage .tf-service-card-hero{
    height:176px!important;
    min-height:176px!important;
  }

  .tf-homepage .tf-service-card-media{
    inset:0 0 60px 0!important;
  }

  .tf-homepage .tf-service-card-directory-copy{
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
  }

  .tf-homepage .tf-service-card-directory-copy h3{
    font-size:14px!important;
  }

  .tf-homepage .tf-service-mini-grid{
    min-height:78px!important;
  }

  .tf-homepage .tf-service-mini-grid > a{
    grid-template-rows:36px minmax(22px,auto)!important;
    min-height:78px!important;
    padding:6px 4px!important;
  }

  .tf-homepage .tf-service-mini-image{
    width:38px!important;
    height:34px!important;
    min-width:38px!important;
    min-height:34px!important;
  }

  .tf-homepage .tf-service-mini-grid strong{
    font-size:7px!important;
    min-height:18px!important;
    max-height:28px!important;
  }

  .tf-homepage .curated-b2b-rail{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .tf-homepage .curated-b2b-card{
    flex:0 0 min(88vw,420px)!important;
    min-width:min(88vw,420px)!important;
    max-width:min(88vw,420px)!important;
    height:auto!important;
    min-height:0!important;
    scroll-snap-align:start!important;
  }
}