/* TradesFolks 18.4.88 — Category Directory Unique Parent Palettes
   Reference-inspired parent category + 4x2 subcategory matrix.
   Parent: light branded panel + Source Now + single category image.
   Child: name on top + single image. No lists, no footer CTA, no heavy card chrome. */

.tf-homepage .tf-category-directory{
  padding:12px 0 16px!important;
  background:#f6f8fb!important;
}
.tf-homepage .tf-category-directory>.shell{
  width:calc(100% - 24px)!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding:0!important;
}
.tf-homepage .tf-category-directory-list{
  display:grid!important;
  gap:12px!important;
}
.tf-homepage .tf-category-directory-module{
  padding:11px!important;
  overflow:hidden!important;
  border:1px solid #e1e7ef!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(9,35,69,.035)!important;
}
.tf-homepage .tf-category-directory-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 8px!important;
}
.tf-homepage .tf-category-directory-head>div{
  min-width:0!important;
}
.tf-homepage .tf-category-directory-head .home-category-browse-pill{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  min-height:23px!important;
  padding:0 8px!important;
  border:1px solid rgba(223,165,16,.13)!important;
  border-radius:999px!important;
  background:#fff8dd!important;
  color:#8a5b00!important;
  font-size:6.8px!important;
  font-weight:850!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.tf-homepage .tf-category-directory-head .home-category-browse-pill i{
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:#f8b91f!important;
}
.tf-homepage .tf-category-directory-head h3{
  margin:5px 0 0!important;
  color:#0b2343!important;
  font-size:21px!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
}
.tf-homepage .tf-category-directory-head>a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-height:29px!important;
  padding:0 10px!important;
  border:1px solid #d8e4f1!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#075bc7!important;
  font-size:7px!important;
  font-weight:850!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

/* Reference: one parent hero + 4x2 subcategory tiles */
.tf-homepage .tf-category-directory-grid{
  display:grid!important;
  grid-template-columns:minmax(220px,21%) minmax(0,79%)!important;
  gap:0!important;
  min-height:318px!important;
  overflow:hidden!important;
  border:1px solid #e1e7ef!important;
  border-radius:15px!important;
  background:#fff!important;
}

/* Parent panel */
.tf-homepage .tf-category-parent-panel{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:318px!important;
  height:318px!important;
  padding:22px 20px 12px!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid #e1e7ef!important;
  border-radius:0!important;
  background:linear-gradient(145deg,#fff8d9 0%,#f3f0c9 100%)!important;
  box-shadow:none!important;
  color:#17233a!important;
  text-decoration:none!important;
  isolation:isolate!important;
}
.tf-homepage .tf-category-parent-panel:before{
  display:none!important;
  content:none!important;
}
.tf-homepage .tf-category-parent-copy{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  align-items:flex-start!important;
  flex-direction:column!important;
  gap:14px!important;
}
.tf-homepage .tf-category-parent-copy>strong{
  margin:0!important;
  color:#20242c!important;
  font-size:19px!important;
  font-weight:900!important;
  line-height:1.1!important;
  text-shadow:none!important;
}
.tf-homepage .tf-category-source-now{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:32px!important;
  padding:0 15px!important;
  border:1.5px solid #26303f!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#20242c!important;
  font-size:9px!important;
  font-weight:750!important;
}
.tf-homepage .tf-category-parent-image{
  position:absolute!important;
  inset:74px 10px 8px 10px!important;
  z-index:1!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.tf-homepage .tf-category-parent-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  padding:2px!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:none!important;
  transform:none!important;
}
.tf-homepage .tf-category-parent-image i{
  display:grid!important;
  place-items:center!important;
  width:92px!important;
  height:92px!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.7)!important;
  color:#0b5cc7!important;
  font-style:normal!important;
  font-weight:900!important;
}

/* 4 columns x 2 rows */
.tf-homepage .tf-category-subcategory-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  width:100%!important;
  min-width:0!important;
  min-height:318px!important;
  background:#fff!important;
}
.tf-homepage .tf-category-subcategory-tile{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:159px!important;
  height:159px!important;
  margin:0!important;
  padding:15px 14px 7px!important;
  overflow:hidden!important;
  border:0!important;
  border-right:1px solid #e1e7ef!important;
  border-bottom:1px solid #e1e7ef!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#343a44!important;
  text-decoration:none!important;
  transition:background .16s ease!important;
}
.tf-homepage .tf-category-subcategory-tile:nth-child(4n){
  border-right:0!important;
}
.tf-homepage .tf-category-subcategory-tile:nth-child(n+5){
  border-bottom:0!important;
}
.tf-homepage .tf-category-subcategory-tile:hover{
  transform:none!important;
  background:#fbfcfe!important;
  box-shadow:none!important;
}
.tf-homepage .tf-category-subcategory-tile>strong{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  flex:0 0 auto!important;
  max-width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  color:#50545b!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
.tf-homepage .tf-category-subcategory-image{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:1 1 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:5px 0 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  background:#fff!important;
}
.tf-homepage .tf-category-subcategory-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  padding:3px!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.tf-homepage .tf-category-subcategory-image i{
  display:grid!important;
  place-items:center!important;
  width:58px!important;
  height:58px!important;
  border-radius:16px!important;
  background:#f5f7fa!important;
  color:#0b5cc7!important;
  font-style:normal!important;
  font-weight:900!important;
}
.tf-homepage .tf-category-subcategory-empty{
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  text-align:center!important;
}

/* Large desktop: slightly larger but still compact */
@media(min-width:1536px){
  .tf-homepage .tf-category-directory-grid,
  .tf-homepage .tf-category-parent-panel,
  .tf-homepage .tf-category-subcategory-grid{
    min-height:330px!important;
  }
  .tf-homepage .tf-category-parent-panel{
    height:330px!important;
  }
  .tf-homepage .tf-category-subcategory-tile{
    min-height:165px!important;
    height:165px!important;
  }
}

/* Laptop */
@media(min-width:1024px) and (max-width:1279px){
  .tf-homepage .tf-category-directory-grid{
    grid-template-columns:minmax(205px,24%) minmax(0,76%)!important;
    min-height:300px!important;
  }
  .tf-homepage .tf-category-parent-panel{
    min-height:300px!important;
    height:300px!important;
    padding:18px 16px 10px!important;
  }
  .tf-homepage .tf-category-parent-copy>strong{
    font-size:17px!important;
  }
  .tf-homepage .tf-category-source-now{
    min-height:29px!important;
    padding-inline:12px!important;
    font-size:8px!important;
  }
  .tf-homepage .tf-category-subcategory-grid{
    min-height:300px!important;
  }
  .tf-homepage .tf-category-subcategory-tile{
    min-height:150px!important;
    height:150px!important;
    padding:13px 11px 6px!important;
  }
  .tf-homepage .tf-category-subcategory-tile>strong{
    font-size:10.5px!important;
  }
}

/* Tablet: parent left, children 3 columns; overflow remains contained. */
@media(min-width:700px) and (max-width:1023px){
  .tf-homepage .tf-category-directory-module{
    padding:9px!important;
  }
  .tf-homepage .tf-category-directory-grid{
    grid-template-columns:210px minmax(0,1fr)!important;
    min-height:336px!important;
  }
  .tf-homepage .tf-category-parent-panel{
    min-height:336px!important;
    height:336px!important;
    padding:18px 14px 10px!important;
  }
  .tf-homepage .tf-category-subcategory-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    min-height:336px!important;
  }
  .tf-homepage .tf-category-subcategory-tile{
    min-height:112px!important;
    height:112px!important;
    padding:9px 8px 4px!important;
  }
  .tf-homepage .tf-category-subcategory-tile:nth-child(n){
    border-right:1px solid #e1e7ef!important;
    border-bottom:1px solid #e1e7ef!important;
  }
  .tf-homepage .tf-category-subcategory-tile:nth-child(3n){
    border-right:0!important;
  }
  .tf-homepage .tf-category-subcategory-tile>strong{
    font-size:8.8px!important;
  }
}

/* Mobile: parent hero first, then left-to-right swipe tiles. */
@media(max-width:699px){
  .tf-homepage .tf-category-directory{
    padding:10px 0 14px!important;
  }
  .tf-homepage .tf-category-directory>.shell{
    width:100%!important;
    padding:0 7px!important;
    box-sizing:border-box!important;
  }
  .tf-homepage .tf-category-directory-list{
    gap:10px!important;
  }
  .tf-homepage .tf-category-directory-module{
    padding:8px!important;
    border-radius:14px!important;
  }
  .tf-homepage .tf-category-directory-head{
    align-items:center!important;
    margin-bottom:7px!important;
  }
  .tf-homepage .tf-category-directory-head .home-category-browse-pill{
    min-height:20px!important;
    padding-inline:7px!important;
    font-size:5.8px!important;
  }
  .tf-homepage .tf-category-directory-head h3{
    margin-top:4px!important;
    font-size:17px!important;
  }
  .tf-homepage .tf-category-directory-head>a{
    min-height:27px!important;
    padding-inline:8px!important;
    font-size:6.2px!important;
  }
  .tf-homepage .tf-category-directory-grid{
    display:block!important;
    min-height:0!important;
    overflow:visible!important;
    border-radius:13px!important;
  }
  .tf-homepage .tf-category-parent-panel{
    min-height:210px!important;
    height:210px!important;
    padding:16px 14px 9px!important;
    border-right:0!important;
    border-bottom:1px solid #e1e7ef!important;
  }
  .tf-homepage .tf-category-parent-copy{
    gap:10px!important;
  }
  .tf-homepage .tf-category-parent-copy>strong{
    font-size:16px!important;
  }
  .tf-homepage .tf-category-source-now{
    min-height:28px!important;
    padding-inline:12px!important;
    font-size:7.5px!important;
  }
  .tf-homepage .tf-category-parent-image{
    inset:58px 8px 5px!important;
  }
  .tf-homepage .tf-category-subcategory-grid{
    display:flex!important;
    gap:7px!important;
    min-height:0!important;
    padding:7px!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-category-subcategory-grid::-webkit-scrollbar{
    display:none!important;
  }
  .tf-homepage .tf-category-subcategory-tile{
    flex:0 0 142px!important;
    width:142px!important;
    min-width:142px!important;
    min-height:126px!important;
    height:126px!important;
    padding:10px 9px 5px!important;
    border:1px solid #e1e7ef!important;
    border-radius:10px!important;
    scroll-snap-align:start!important;
  }
  .tf-homepage .tf-category-subcategory-tile>strong{
    font-size:8.5px!important;
  }
}
@media(max-width:360px){
  .tf-homepage .tf-category-subcategory-tile{
    flex-basis:132px!important;
    width:132px!important;
    min-width:132px!important;
  }
}


/* Sprint 462 — unique soft enterprise palette per parent category.
   Palette cycles safely for category 7+ without hard-coding category names. */
.tf-homepage .tf-category-directory-module:nth-child(8n+1) .tf-category-parent-panel{
  background:linear-gradient(145deg,#fff7cf 0%,#f6efc8 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+2) .tf-category-parent-panel{
  background:linear-gradient(145deg,#eaf5ff 0%,#dcecff 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+3) .tf-category-parent-panel{
  background:linear-gradient(145deg,#eef9ed 0%,#def1df 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+4) .tf-category-parent-panel{
  background:linear-gradient(145deg,#fff0e7 0%,#fbe1d2 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+5) .tf-category-parent-panel{
  background:linear-gradient(145deg,#f4efff 0%,#e8defb 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+6) .tf-category-parent-panel{
  background:linear-gradient(145deg,#eaf9f6 0%,#d9f0ea 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+7) .tf-category-parent-panel{
  background:linear-gradient(145deg,#fff1f3 0%,#f9dfe4 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n) .tf-category-parent-panel{
  background:linear-gradient(145deg,#f1f3f8 0%,#e3e8f1 100%)!important;
}
/* With the duplicate heading removed, keep the utility row deliberately compact. */
.tf-homepage .tf-category-directory-head{
  align-items:center!important;
  min-height:27px!important;
}