/* TradesFolks 18.4.138
   COMPLETE HOMEPAGE — Unified Hero Gutter + Responsive System

   Canonical gutters:
   Desktop >= 1280px : 28px each side
   Small desktop     : 22px each side
   Tablet            : 16px each side
   Mobile            : 8px each side
*/

/* ==========================================================
   1. GLOBAL HOMEPAGE SAFETY
   ========================================================== */
.tf-homepage{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
}

.tf-homepage *,
.tf-homepage *::before,
.tf-homepage *::after{
  box-sizing:border-box!important;
}

.tf-homepage img,
.tf-homepage video,
.tf-homepage svg{
  max-width:100%;
}

/* ==========================================================
   2. DESKTOP — EXACT HERO GUTTER
   Hero uses 28px each side => width calc(100% - 56px)
   Apply same outer width to every principal homepage section.
   ========================================================== */
@media(min-width:1280px){

  .tf-homepage .hero-shell,
  .tf-homepage .tf-hero-shell,
  .tf-homepage .home-hero-shell,
  .tf-homepage .home-hero,
  .tf-homepage .hero-slider-wrap,

  .tf-homepage .home-category-showcases,
  .tf-homepage .tf-category-showcase,
  .tf-homepage .tf-home-category-showcase,
  .tf-homepage .tf-category-section,

  .tf-homepage .featured-marketplace-section,
  .tf-homepage .tf-featured-marketplace,
  .tf-homepage .home-featured-marketplace,

  .tf-homepage .trending-products-section,
  .tf-homepage .tf-trending-products,
  .tf-homepage .home-trending-products,

  .tf-homepage .tf-service-directory-section,
  .tf-homepage .tf-service-section,
  .tf-homepage .home-service-section,

  .tf-homepage .country-markets-section,
  .tf-homepage .tf-country-markets,
  .tf-homepage .home-country-markets,

  .tf-homepage .tf-serious-sourcing,
  .tf-homepage .home-serious-sourcing,
  .tf-homepage .serious-sourcing-section,

  .tf-homepage .curated-b2b,
  .tf-homepage .curated-b2b-section,
  .tf-homepage .tf-curated-b2b,
  .tf-homepage .tf-sourcing-solutions,

  .tf-homepage .homepage-section,
  .tf-homepage section[data-home-section]{
    width:calc(100% - 56px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Inner shells must not add a second gutter */
  .tf-homepage .home-category-showcases > .shell,
  .tf-homepage .tf-service-directory-section > .shell,
  .tf-homepage .tf-service-section > .shell,
  .tf-homepage .home-service-section > .shell,
  .tf-homepage .country-markets-section > .shell,
  .tf-homepage .tf-country-markets > .shell,
  .tf-homepage .home-country-markets > .shell,
  .tf-homepage .featured-marketplace-section > .shell,
  .tf-homepage .trending-products-section > .shell,
  .tf-homepage .curated-b2b > .shell,
  .tf-homepage .curated-b2b-section > .shell{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* ==========================================================
   3. SMALL DESKTOP
   ========================================================== */
@media(min-width:1024px) and (max-width:1279px){
  .tf-homepage .hero-shell,
  .tf-homepage .tf-hero-shell,
  .tf-homepage .home-hero-shell,
  .tf-homepage .home-hero,
  .tf-homepage .hero-slider-wrap,
  .tf-homepage .home-category-showcases,
  .tf-homepage .tf-category-showcase,
  .tf-homepage .tf-home-category-showcase,
  .tf-homepage .tf-category-section,
  .tf-homepage .featured-marketplace-section,
  .tf-homepage .tf-featured-marketplace,
  .tf-homepage .home-featured-marketplace,
  .tf-homepage .trending-products-section,
  .tf-homepage .tf-trending-products,
  .tf-homepage .home-trending-products,
  .tf-homepage .tf-service-directory-section,
  .tf-homepage .tf-service-section,
  .tf-homepage .home-service-section,
  .tf-homepage .country-markets-section,
  .tf-homepage .tf-country-markets,
  .tf-homepage .home-country-markets,
  .tf-homepage .tf-serious-sourcing,
  .tf-homepage .home-serious-sourcing,
  .tf-homepage .serious-sourcing-section,
  .tf-homepage .curated-b2b,
  .tf-homepage .curated-b2b-section,
  .tf-homepage .tf-curated-b2b,
  .tf-homepage .tf-sourcing-solutions,
  .tf-homepage .homepage-section,
  .tf-homepage section[data-home-section]{
    width:calc(100% - 44px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* ==========================================================
   4. TABLET
   ========================================================== */
@media(min-width:821px) and (max-width:1023px){
  .tf-homepage .hero-shell,
  .tf-homepage .tf-hero-shell,
  .tf-homepage .home-hero-shell,
  .tf-homepage .home-hero,
  .tf-homepage .hero-slider-wrap,
  .tf-homepage .home-category-showcases,
  .tf-homepage .tf-category-showcase,
  .tf-homepage .tf-home-category-showcase,
  .tf-homepage .tf-category-section,
  .tf-homepage .featured-marketplace-section,
  .tf-homepage .tf-featured-marketplace,
  .tf-homepage .home-featured-marketplace,
  .tf-homepage .trending-products-section,
  .tf-homepage .tf-trending-products,
  .tf-homepage .home-trending-products,
  .tf-homepage .tf-service-directory-section,
  .tf-homepage .tf-service-section,
  .tf-homepage .home-service-section,
  .tf-homepage .country-markets-section,
  .tf-homepage .tf-country-markets,
  .tf-homepage .home-country-markets,
  .tf-homepage .tf-serious-sourcing,
  .tf-homepage .home-serious-sourcing,
  .tf-homepage .serious-sourcing-section,
  .tf-homepage .curated-b2b,
  .tf-homepage .curated-b2b-section,
  .tf-homepage .tf-curated-b2b,
  .tf-homepage .tf-sourcing-solutions,
  .tf-homepage .homepage-section,
  .tf-homepage section[data-home-section]{
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* ==========================================================
   5. MOBILE — CONSISTENT COMPACT GUTTER
   ========================================================== */
@media(max-width:820px){
  .tf-homepage .hero-shell,
  .tf-homepage .tf-hero-shell,
  .tf-homepage .home-hero-shell,
  .tf-homepage .home-hero,
  .tf-homepage .hero-slider-wrap,
  .tf-homepage .home-category-showcases,
  .tf-homepage .tf-category-showcase,
  .tf-homepage .tf-home-category-showcase,
  .tf-homepage .tf-category-section,
  .tf-homepage .featured-marketplace-section,
  .tf-homepage .tf-featured-marketplace,
  .tf-homepage .home-featured-marketplace,
  .tf-homepage .trending-products-section,
  .tf-homepage .tf-trending-products,
  .tf-homepage .home-trending-products,
  .tf-homepage .tf-service-directory-section,
  .tf-homepage .tf-service-section,
  .tf-homepage .home-service-section,
  .tf-homepage .country-markets-section,
  .tf-homepage .tf-country-markets,
  .tf-homepage .home-country-markets,
  .tf-homepage .tf-serious-sourcing,
  .tf-homepage .home-serious-sourcing,
  .tf-homepage .serious-sourcing-section,
  .tf-homepage .curated-b2b,
  .tf-homepage .curated-b2b-section,
  .tf-homepage .tf-curated-b2b,
  .tf-homepage .tf-sourcing-solutions,
  .tf-homepage .homepage-section,
  .tf-homepage section[data-home-section]{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .tf-homepage .shell{
    max-width:100%!important;
  }
}

/* ==========================================================
   6. HEADINGS / SECTION SPACING
   ========================================================== */
@media(min-width:821px){
  .tf-homepage section{
    scroll-margin-top:110px;
  }

  .tf-homepage .section-head,
  .tf-homepage .home-section-head,
  .tf-homepage .tf-section-head{
    min-width:0!important;
  }

  .tf-homepage .section-head h2,
  .tf-homepage .home-section-head h2,
  .tf-homepage .tf-section-head h2{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
}

@media(max-width:820px){
  .tf-homepage .section-head,
  .tf-homepage .home-section-head,
  .tf-homepage .tf-section-head{
    gap:8px!important;
  }

  .tf-homepage .section-head h2,
  .tf-homepage .home-section-head h2,
  .tf-homepage .tf-section-head h2{
    max-width:100%!important;
    font-size:clamp(20px,6vw,27px)!important;
    line-height:1.07!important;
    overflow-wrap:anywhere!important;
  }

  .tf-homepage .section-head p,
  .tf-homepage .home-section-head p,
  .tf-homepage .tf-section-head p{
    max-width:100%!important;
    font-size:11px!important;
    line-height:1.35!important;
  }
}

/* ==========================================================
   7. FEATURED + TRENDING PRODUCT GRIDS
   ========================================================== */
@media(min-width:1280px){
  .tf-homepage .featured-marketplace-grid,
  .tf-homepage .tf-featured-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .tf-homepage .trending-products-grid,
  .tf-homepage .tf-trending-grid{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:10px!important;
  }
}

@media(min-width:1024px) and (max-width:1279px){
  .tf-homepage .featured-marketplace-grid,
  .tf-homepage .tf-featured-grid,
  .tf-homepage .trending-products-grid,
  .tf-homepage .tf-trending-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
  }
}

@media(min-width:821px) and (max-width:1023px){
  .tf-homepage .featured-marketplace-grid,
  .tf-homepage .tf-featured-grid,
  .tf-homepage .trending-products-grid,
  .tf-homepage .tf-trending-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
}

@media(max-width:820px){
  .tf-homepage .featured-marketplace-grid,
  .tf-homepage .tf-featured-grid,
  .tf-homepage .trending-products-grid,
  .tf-homepage .tf-trending-grid{
    min-width:0!important;
  }
}

/* ==========================================================
   8. CATEGORY DIRECTORY
   ========================================================== */
@media(min-width:1280px){
  .tf-homepage .home-category-showcase-grid{
    grid-template-columns:minmax(290px,1.12fr) minmax(0,3fr)!important;
  }
}

@media(min-width:821px) and (max-width:1279px){
  .tf-homepage .home-category-showcase-grid{
    grid-template-columns:minmax(230px,.95fr) minmax(0,3.05fr)!important;
  }
}

@media(max-width:820px){
  .tf-homepage .home-category-subgrid{
    padding-bottom:2px!important;
  }

  .tf-homepage .home-category-subcard{
    flex-basis:min(44vw,190px)!important;
    width:min(44vw,190px)!important;
    min-width:min(44vw,190px)!important;
    max-width:min(44vw,190px)!important;
  }
}

/* ==========================================================
   9. SERVICE SECTIONS
   ========================================================== */
@media(min-width:1280px){
  .tf-homepage .tf-service-directory-grid,
  .tf-homepage .tf-service-grid,
  .tf-homepage .home-service-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

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

/* ==========================================================
   10. COUNTRY / SUPPLIER MARKETS
   ========================================================== */
@media(min-width:1280px){
  .tf-homepage .country-markets-grid,
  .tf-homepage .tf-country-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:10px!important;
  }
}

@media(min-width:1024px) and (max-width:1279px){
  .tf-homepage .country-markets-grid,
  .tf-homepage .tf-country-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(min-width:821px) and (max-width:1023px){
  .tf-homepage .country-markets-grid,
  .tf-homepage .tf-country-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* ==========================================================
   11. HORIZONTAL RAILS — NEVER BREAK PAGE WIDTH
   ========================================================== */
.tf-homepage [class*="rail"],
.tf-homepage [class*="track"]{
  max-width:100%!important;
}

@media(max-width:820px){
  .tf-homepage [class*="rail"],
  .tf-homepage [class*="track"]{
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* ==========================================================
   12. CARDS — CONTENT SAFETY
   ========================================================== */
.tf-homepage [class*="card"]{
  min-width:0!important;
}

.tf-homepage [class*="card"] img{
  object-position:center;
}

.tf-homepage [class*="card"] h2,
.tf-homepage [class*="card"] h3,
.tf-homepage [class*="card"] strong{
  max-width:100%;
}

/* ==========================================================
   13. MOBILE CTA / BUTTON SAFETY
   ========================================================== */
@media(max-width:820px){
  .tf-homepage a,
  .tf-homepage button{
    max-width:100%;
  }

  .tf-homepage .section-head > a,
  .tf-homepage .home-section-head > a,
  .tf-homepage .tf-section-head > a{
    flex:0 0 auto!important;
  }
}

/* ==========================================================
   14. VERY SMALL PHONES
   ========================================================== */
@media(max-width:430px){
  .tf-homepage .hero-shell,
  .tf-homepage .tf-hero-shell,
  .tf-homepage .home-hero-shell,
  .tf-homepage .home-hero,
  .tf-homepage .hero-slider-wrap,
  .tf-homepage .home-category-showcases,
  .tf-homepage .featured-marketplace-section,
  .tf-homepage .trending-products-section,
  .tf-homepage .tf-service-directory-section,
  .tf-homepage .tf-service-section,
  .tf-homepage .country-markets-section,
  .tf-homepage .tf-country-markets,
  .tf-homepage .tf-serious-sourcing,
  .tf-homepage .curated-b2b,
  .tf-homepage .homepage-section,
  .tf-homepage section[data-home-section]{
    width:calc(100% - 12px)!important;
  }

  .tf-homepage .home-category-subcard{
    flex-basis:46vw!important;
    width:46vw!important;
    min-width:46vw!important;
    max-width:46vw!important;
  }
}