/* TradesFolks 18.3.70 — balanced full-width public marketplace gutters
   Desktop keeps the premium full-width presentation without content touching
   the viewport edges. Admin/Seller/Employee workspaces remain untouched. */
:root{
  --tf-public-edge-gutter:24px;
}

/* Canonical public layout shell. Loaded last so historical max-width rules
   cannot pull the marketplace back into a narrow centered container. */
body .shell{
  width:calc(100% - (var(--tf-public-edge-gutter) * 2))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Homepage V3 wrappers which are not standard `.shell` containers. */
body:has(.tf-home-v3) .tf-home-v3-hero,
body:has(.tf-home-v3) .tf-home-v3-trust{
  width:calc(100% - (var(--tf-public-edge-gutter) * 2))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Feature sections that historically carry their own high-specificity widths. */
body:has(.tf-home-v3) :where(
  .country-network-premium,
  .curated-b2b-market,
  .easy-sourcing-section,
  .home-category-showcases,
  .festival-marketplace,
  .marketplace-products,
  .section-soft,
  .new-arrivals,
  .rfq-market-board,
  .trade-services,
  .industry-collections,
  .marketplace-insights,
  .home-reels,
  .home-content-hub
) > .shell{
  width:calc(100% - (var(--tf-public-edge-gutter) * 2))!important;
  max-width:none!important;
}

/* Responsive horizontal rhythm:
   large desktop 28px | desktop 24px | tablet 16px | mobile 12px */
@media (min-width:1600px){
  :root{--tf-public-edge-gutter:28px}
}
@media (min-width:768px) and (max-width:1100px){
  :root{--tf-public-edge-gutter:16px}
}
@media (max-width:767px){
  :root{--tf-public-edge-gutter:12px}
}

/* ==========================================================
   TradesFolks 18.3.71 — Homepage Source-by-Country responsive repair
   Keeps the country artwork at its native ~2:1 presentation and prevents
   the full-width layout from turning the market rail into oversized or
   overflowing cards. Scoped only to the homepage country section.
   ========================================================== */
body.tf-homepage:has(.tf-home-v3) .country-network-premium{
  overflow:hidden;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium > .shell{
  min-width:0;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-network-head{
  min-width:0;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-network-head > div{
  min-width:0;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-network-head > a{
  max-width:100%;
  white-space:nowrap;
}

/* Desktop/tablet: true responsive grid, never an overflowing horizontal rail. */
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-rail{
  display:grid!important;
  grid-auto-flow:row!important;
  grid-auto-columns:auto!important;
  grid-template-rows:none!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  padding:2px 0 0!important;
  margin:0!important;
  scroll-snap-type:none!important;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-card{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  border-radius:14px!important;
}

/* Market images were generated around 2:1. Preserve that ratio instead of
   stretching them into shallow banners when the page becomes full width. */
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-visual,
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-visual.has-market-image{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2 / 1!important;
  padding:0!important;
  overflow:hidden!important;
  background:#eef2f7!important;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-artwork{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  background:#eef2f7!important;
  z-index:1!important;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-visual.has-market-image::before,
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-visual.has-market-image::after{
  display:none!important;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-flag.country-flag-image{
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  width:46px!important;
  height:30px!important;
  min-width:46px!important;
  min-height:30px!important;
  padding:0!important;
  border-radius:5px!important;
  overflow:hidden!important;
  z-index:4!important;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-flag.country-flag-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-mark{
  top:12px!important;
  right:12px!important;
  z-index:4!important;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-body{
  min-width:0;
  padding:11px 12px 12px!important;
}
body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-body > strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Compact laptops / smaller desktops. */
@media (max-width:1449px) and (min-width:1100px){
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-rail{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

/* Tablets and narrow laptops. */
@media (max-width:1099px) and (min-width:768px){
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-rail{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }
}

/* Mobile: app-like horizontal discovery rail, sized from the actual viewport. */
@media (max-width:767px){
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-network-head{
    align-items:flex-end!important;
    gap:10px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-network-head > a{
    min-height:34px!important;
    padding:0 9px!important;
    font-size:8px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-rail{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(78vw,290px)!important;
    grid-template-columns:none!important;
    grid-template-rows:1fr!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none;
    padding:2px 0 8px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-rail::-webkit-scrollbar{
    display:none;
  }
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-card{
    scroll-snap-align:start!important;
  }
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-flag.country-flag-image{
    top:9px!important;
    left:9px!important;
    width:40px!important;
    height:26px!important;
    min-width:40px!important;
    min-height:26px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-mark{
    top:9px!important;
    right:9px!important;
  }
}

@media (max-width:420px){
  body.tf-homepage:has(.tf-home-v3) .country-network-premium .country-market-rail{
    grid-auto-columns:82vw!important;
  }
}

/* ==========================================================
   Sprint 18.3.72 — Curated for Business / Amazon-style 4-card row
   Desktop: exactly four primary cards in one row.
   Internal products: 2 x 2 visual tiles, image-first hierarchy.
   ========================================================== */
body.tf-homepage:has(.tf-home-v3) .curated-b2b-market{
  overflow:hidden!important;
  background:#f3f6f9!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-market>.shell{
  width:var(--tf-page-width,calc(100% - 48px))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-heading{
  margin:0 0 16px!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-rail{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  gap:16px!important;
  width:100%!important;
  overflow:visible!important;
  align-items:stretch!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-card{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:100%!important;
  padding:18px!important;
  border:1px solid #e0e6ed!important;
  border-radius:4px!important;
  background:#fff!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-card>h3{
  min-height:48px!important;
  margin:0 0 14px!important;
  color:#0f1f36!important;
  font-size:clamp(18px,1.15vw,24px)!important;
  font-weight:800!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,auto)!important;
  gap:16px 14px!important;
  width:100%!important;
  min-width:0!important;
  flex:1 1 auto!important;
  overflow:visible!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-item{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#101828!important;
  text-decoration:none!important;
  overflow:visible!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-item:hover{
  border:0!important;
  background:transparent!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-image{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1.42 / 1!important;
  margin:0 0 7px!important;
  overflow:hidden!important;
  border-radius:2px!important;
  background:#f3f5f7!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-image img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  transition:transform .22s ease!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-item:hover .curated-b2b-image img{
  transform:scale(1.025)!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-image.is-missing,
body.tf-homepage:has(.tf-home-v3) .curated-b2b-image:has(.curated-b2b-placeholder){
  background:#f0f3f7!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-item>strong{
  display:-webkit-box!important;
  min-height:34px!important;
  margin:0!important;
  overflow:hidden!important;
  color:#17233a!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.3!important;
  text-overflow:ellipsis!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-item>small{
  display:none!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-cta{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  align-self:flex-start!important;
  margin:20px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#0b63ce!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.2!important;
  text-decoration:none!important;
}
body.tf-homepage:has(.tf-home-v3) .curated-b2b-cta:hover{
  text-decoration:underline!important;
}

/* Narrow desktop: preserve four cards, reduce typography and spacing. */
@media (max-width:1399px) and (min-width:1100px){
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-rail{
    gap:12px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-card{
    padding:14px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-card>h3{
    min-height:42px!important;
    font-size:17px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-grid{
    gap:13px 10px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-item>strong{
    font-size:12px!important;
  }
}

/* Tablet: two cards per row, each card still keeps its internal 2x2 layout. */
@media (max-width:1099px) and (min-width:700px){
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-rail{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-card>h3{
    min-height:auto!important;
  }
}

/* Mobile: one-card-at-a-time app-like rail. */
@media (max-width:699px){
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-market>.shell{
    width:calc(100% - 24px)!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-heading{
    margin-bottom:12px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-rail{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(88vw,360px)!important;
    grid-template-columns:none!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:1px 0 8px!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-rail::-webkit-scrollbar{
    display:none!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-card{
    scroll-snap-align:start!important;
    padding:14px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-card>h3{
    min-height:auto!important;
    margin-bottom:12px!important;
    font-size:18px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-grid{
    gap:13px 10px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-item>strong{
    min-height:32px!important;
    font-size:12px!important;
  }
  body.tf-homepage:has(.tf-home-v3) .curated-b2b-cta{
    margin-top:16px!important;
  }
}