/* TradesFolks 18.4.21 — Homepage category showcase completion
   Fixes the large empty right-side area and turns the section into a complete,
   balanced marketplace category showcase across desktop/tablet/mobile. */

.tf-homepage .home-category-showcases{
  padding:28px 0 34px!important;
  background:#f6f8fb!important;
}
.tf-homepage .home-category-showcases>.shell{
  width:calc(100% - 48px)!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding:0!important;
}
.tf-homepage .home-category-showcase-list{
  display:grid!important;
  gap:30px!important;
}
.tf-homepage .home-category-showcase{
  width:100%!important;
  min-width:0!important;
  padding:20px!important;
  border:1px solid #dce4ee!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(12,35,68,.045)!important;
  overflow:hidden!important;
}
.tf-homepage .home-category-showcase-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin:0 0 16px!important;
}
.tf-homepage .home-category-showcase-head>div{
  min-width:0!important;
}
.tf-homepage .home-category-browse-pill{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#fff6dc!important;
  color:#835f07!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.tf-homepage .home-category-browse-pill i{
  display:block!important;
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:#f5b82e!important;
}
.tf-homepage .home-category-showcase-head h3{
  margin:7px 0 4px!important;
  color:#112742!important;
  font-size:27px!important;
  font-weight:850!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
}
.tf-homepage .home-category-showcase-head p{
  max-width:720px!important;
  margin:0!important;
  color:#6b798e!important;
  font-size:11px!important;
  line-height:1.45!important;
}
.tf-homepage .home-category-showcase-head>a{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:38px!important;
  padding:0 13px!important;
  border:1px solid #d9e2ed!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#075bc5!important;
  font-size:10px!important;
  font-weight:850!important;
  text-decoration:none!important;
}

/* Desktop ownership:
   29% strong visual + 71% six-card matrix. No dead whitespace. */
@media (min-width:1200px){
  .tf-homepage .home-category-showcase-grid{
    display:grid!important;
    grid-template-columns:minmax(320px,29%) minmax(0,71%)!important;
    gap:16px!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
  }

  .tf-homepage .home-category-source-card{
    min-width:0!important;
    min-height:500px!important;
    height:100%!important;
    padding:18px!important;
    border-radius:17px!important;
    background-size:cover!important;
    background-position:center center!important;
    overflow:hidden!important;
  }
  .tf-homepage .home-category-source-emblem{
    width:74px!important;
    height:74px!important;
    margin:18px auto 12px!important;
    font-size:22px!important;
  }
  .tf-homepage .home-category-source-card strong{
    margin-top:auto!important;
    font-size:24px!important;
    line-height:1.08!important;
  }
  .tf-homepage .home-category-source-card strong b{font-size:20px!important}
  .tf-homepage .home-category-source-card p{
    max-width:310px!important;
    font-size:10px!important;
    line-height:1.45!important;
  }
  .tf-homepage .home-category-source-card ul{
    gap:6px!important;
    margin-top:12px!important;
  }
  .tf-homepage .home-category-source-card li{
    font-size:9px!important;
  }

  .tf-homepage .home-category-subgrid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
  }

  .tf-homepage .home-category-subcard{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:150px minmax(0,1fr) 38px!important;
    width:100%!important;
    min-width:0!important;
    min-height:244px!important;
    border:1px solid #dde5ef!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(13,42,82,.035)!important;
    overflow:hidden!important;
  }
  .tf-homepage .home-category-subcard-image{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    height:150px!important;
    background:#f4f6f9!important;
  }
  .tf-homepage .home-category-subcard-image img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    padding:6px!important;
  }
  .tf-homepage .home-category-subcard-body{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
    padding:10px 11px 8px!important;
  }
  .tf-homepage .home-category-subcard-body h4{
    margin:0 0 6px!important;
    font-size:12px!important;
    line-height:1.25!important;
  }
  .tf-homepage .home-category-subcard-body ul{
    gap:3px!important;
  }
  .tf-homepage .home-category-subcard-body li{
    font-size:8.5px!important;
    line-height:1.35!important;
  }
  .tf-homepage .home-category-subcard-action{
    grid-column:1!important;
    grid-row:3!important;
    min-height:38px!important;
    padding:0 11px!important;
    font-size:9px!important;
  }
  .tf-homepage .home-hot-popular{
    top:10px!important;
    padding:5px 9px!important;
    font-size:7px!important;
  }
}

/* Standard laptop: keep complete two-part layout but reduce visual width. */
@media (min-width:900px) and (max-width:1199px){
  .tf-homepage .home-category-showcases>.shell{
    width:calc(100% - 32px)!important;
  }
  .tf-homepage .home-category-showcase{
    padding:16px!important;
  }
  .tf-homepage .home-category-showcase-grid{
    display:grid!important;
    grid-template-columns:260px minmax(0,1fr)!important;
    gap:12px!important;
  }
  .tf-homepage .home-category-source-card{
    min-height:470px!important;
  }
  .tf-homepage .home-category-subgrid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,1fr)!important;
    gap:10px!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
  }
  .tf-homepage .home-category-subcard{
    grid-template-columns:1fr!important;
    grid-template-rows:120px minmax(0,1fr) 34px!important;
    min-height:225px!important;
  }
  .tf-homepage .home-category-subcard-image{
    grid-row:1!important;
    height:120px!important;
  }
  .tf-homepage .home-category-subcard-image img{
    object-fit:contain!important;
    padding:5px!important;
  }
  .tf-homepage .home-category-subcard-body{
    grid-column:1!important;grid-row:2!important;padding:9px!important;
  }
  .tf-homepage .home-category-subcard-action{
    grid-column:1!important;grid-row:3!important;
  }
}

/* Tablet: hero on top, six cards below in 3 columns. */
@media (min-width:700px) and (max-width:899px){
  .tf-homepage .home-category-showcases>.shell{
    width:calc(100% - 28px)!important;
  }
  .tf-homepage .home-category-showcase{
    padding:15px!important;
  }
  .tf-homepage .home-category-showcase-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .tf-homepage .home-category-source-card{
    min-height:270px!important;
  }
  .tf-homepage .home-category-source-emblem{
    display:none!important;
  }
  .tf-homepage .home-category-subgrid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-flow:row!important;
    gap:10px!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
  }
  .tf-homepage .home-category-subcard{
    grid-template-columns:1fr!important;
    grid-template-rows:112px minmax(0,1fr) 34px!important;
    min-height:220px!important;
  }
  .tf-homepage .home-category-subcard-image{
    grid-row:1!important;
    height:112px!important;
  }
  .tf-homepage .home-category-subcard-body{
    grid-column:1!important;grid-row:2!important;
  }
  .tf-homepage .home-category-subcard-action{
    grid-column:1!important;grid-row:3!important;
  }
}

/* Mobile: compact visual + true 2-column product grid.
   No horizontal carousel: the section looks complete immediately. */
@media (max-width:699px){
  .tf-homepage .home-category-showcases{
    padding:18px 0 24px!important;
  }
  .tf-homepage .home-category-showcases>.shell{
    width:calc(100% - 24px)!important;
  }
  .tf-homepage .home-category-showcase-list{
    gap:18px!important;
  }
  .tf-homepage .home-category-showcase{
    padding:13px!important;
    border-radius:16px!important;
  }
  .tf-homepage .home-category-showcase-head{
    align-items:flex-end!important;
    margin-bottom:10px!important;
  }
  .tf-homepage .home-category-showcase-head h3{
    font-size:22px!important;
  }
  .tf-homepage .home-category-showcase-head p{
    max-width:250px!important;
    font-size:9px!important;
  }
  .tf-homepage .home-category-showcase-head>a{
    min-height:32px!important;
    padding:0 9px!important;
    font-size:8px!important;
  }
  .tf-homepage .home-category-showcase-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .tf-homepage .home-category-source-card{
    min-height:215px!important;
    margin:0!important;
    padding:14px!important;
    border-radius:13px!important;
  }
  .tf-homepage .home-category-source-emblem{
    display:none!important;
  }
  .tf-homepage .home-category-source-card strong{
    margin:58px 0 5px!important;
    font-size:19px!important;
  }
  .tf-homepage .home-category-source-card p{
    max-width:280px!important;
    font-size:8px!important;
  }
  .tf-homepage .home-category-source-card ul{
    margin-top:8px!important;
    gap:4px!important;
  }
  .tf-homepage .home-category-source-card li{
    font-size:7.5px!important;
  }

  .tf-homepage .home-category-subgrid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    gap:9px!important;
    width:100%!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  .tf-homepage .home-category-subcard{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:96px minmax(0,1fr) 32px!important;
    min-height:205px!important;
    border-radius:11px!important;
    scroll-snap-align:none!important;
  }
  .tf-homepage .home-category-subcard-image{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:96px!important;
  }
  .tf-homepage .home-category-subcard-image img{
    object-fit:contain!important;
    padding:4px!important;
  }
  .tf-homepage .home-category-subcard-body{
    grid-column:1!important;
    grid-row:2!important;
    padding:8px 8px 5px!important;
  }
  .tf-homepage .home-category-subcard-body h4{
    margin-bottom:4px!important;
    font-size:10px!important;
  }
  .tf-homepage .home-category-subcard-body li{
    font-size:7px!important;
  }
  .tf-homepage .home-category-subcard-action{
    grid-column:1!important;
    grid-row:3!important;
    min-height:32px!important;
    padding:0 8px!important;
    font-size:7.5px!important;
  }
}

@media (max-width:390px){
  .tf-homepage .home-category-showcase{
    padding:10px!important;
  }
  .tf-homepage .home-category-subgrid{
    gap:7px!important;
  }
  .tf-homepage .home-category-subcard{
    grid-template-rows:86px minmax(0,1fr) 30px!important;
    min-height:190px!important;
  }
  .tf-homepage .home-category-subcard-image{
    height:86px!important;
  }
}