/* TradesFolks 18.4.45 — Compact Responsive Supplier Markets
   Smaller desktop country cards + app-like mobile horizontal swipe.
   Country artwork keeps natural proportions and is never stretched. */

.country-network-premium{
  overflow:hidden!important;
}
.country-network-premium>.shell{
  min-width:0!important;
}
.country-network-premium .country-network-head{
  min-width:0!important;
}
.country-network-premium .country-market-card{
  min-width:0!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #dfe6ef!important;
  box-shadow:none!important;
  transform:none!important;
}
.country-network-premium .country-market-card:hover{
  border-color:#e4b644!important;
  box-shadow:0 4px 14px rgba(15,35,70,.06)!important;
  transform:translateY(-1px)!important;
}
.country-network-premium .country-market-visual,
.country-network-premium .country-market-visual.has-market-image{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#eef2f7!important;
  aspect-ratio:2/1!important;
}
.country-network-premium .country-market-artwork{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}
.country-network-premium .country-market-body{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
}
.country-network-premium .country-market-body>span,
.country-network-premium .country-market-body>strong,
.country-network-premium .country-market-body>small{
  min-width:0!important;
}
.country-network-premium .country-market-body>strong{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.country-network-premium .country-market-body>small{
  margin-top:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
}

/* ---------- DESKTOP ---------- */
@media(min-width:1280px){
  .country-network-premium{
    padding-top:18px!important;
    padding-bottom:20px!important;
  }
  .country-network-premium>.shell{
    width:min(calc(100% - 28px),1780px)!important;
    max-width:1780px!important;
    margin-inline:auto!important;
  }
  .country-network-premium .country-network-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
    gap:12px!important;
    margin-bottom:10px!important;
  }
  .country-network-premium .country-network-head .eyebrow{
    font-size:7px!important;
    letter-spacing:.13em!important;
  }
  .country-network-premium .country-network-head h2{
    margin:3px 0 0!important;
    font-size:25px!important;
    line-height:1.03!important;
    letter-spacing:-.025em!important;
  }
  .country-network-premium .country-network-head p{
    margin:4px 0 0!important;
    font-size:10px!important;
    line-height:1.35!important;
  }
  .country-network-premium .country-network-head>a{
    min-height:30px!important;
    padding:0 9px!important;
    border-radius:8px!important;
    font-size:8.5px!important;
  }

  .country-network-premium .country-market-rail{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
  }
  .country-network-premium .country-market-card{
    width:100%!important;
    max-width:none!important;
    border-radius:10px!important;
  }
  .country-network-premium .country-market-visual,
  .country-network-premium .country-market-visual.has-market-image{
    height:auto!important;
    aspect-ratio:2/1!important;
  }
  .country-network-premium .country-market-body{
    min-height:68px!important;
    height:68px!important;
    padding:7px 9px 8px!important;
  }
  .country-network-premium .country-market-body>span{
    font-size:7px!important;
    line-height:1.15!important;
  }
  .country-network-premium .country-market-body>strong{
    margin-top:2px!important;
    font-size:10px!important;
    line-height:1.15!important;
  }
  .country-network-premium .country-market-body>small{
    font-size:7.5px!important;
    line-height:1!important;
  }

  .country-network-premium .country-market-visual .country-flag{
    top:9px!important;
    left:9px!important;
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    height:22px!important;
    min-height:22px!important;
    max-height:22px!important;
    border-radius:4px!important;
  }
  .country-network-premium .country-market-visual .country-market-mark{
    top:9px!important;
    right:9px!important;
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    border-radius:9px!important;
    font-size:8px!important;
  }
}

/* Laptop / tablet landscape */
@media(min-width:768px) and (max-width:1279px){
  .country-network-premium{
    padding:16px 0 18px!important;
  }
  .country-network-premium>.shell{
    width:calc(100% - 24px)!important;
  }
  .country-network-premium .country-network-head{
    margin-bottom:9px!important;
  }
  .country-network-premium .country-network-head h2{
    font-size:23px!important;
  }
  .country-network-premium .country-network-head p{
    font-size:9.5px!important;
  }
  .country-network-premium .country-market-rail{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
  }
  .country-network-premium .country-market-card{
    border-radius:10px!important;
  }
  .country-network-premium .country-market-body{
    min-height:66px!important;
    height:66px!important;
    padding:7px 8px!important;
  }
  .country-network-premium .country-market-body>span{font-size:7px!important}
  .country-network-premium .country-market-body>strong{font-size:9.5px!important}
  .country-network-premium .country-market-body>small{font-size:7px!important}
}

/* ---------- MOBILE: LEFT-TO-RIGHT SWIPE ---------- */
@media(max-width:767px){
  .country-network-premium{
    padding:15px 0 18px!important;
    overflow:hidden!important;
  }
  .country-network-premium>.shell{
    width:100%!important;
    max-width:none!important;
    padding-inline:10px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  .country-network-premium .country-network-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }
  .country-network-premium .country-network-head .eyebrow{
    font-size:7.5px!important;
    letter-spacing:.12em!important;
  }
  .country-network-premium .country-network-head h2{
    margin:3px 0 0!important;
    font-size:20px!important;
    line-height:1.04!important;
    letter-spacing:-.025em!important;
  }
  .country-network-premium .country-network-head p{
    margin:4px 0 0!important;
    font-size:9.5px!important;
    line-height:1.35!important;
  }
  .country-network-premium .country-network-head>a{
    width:100%!important;
    min-height:32px!important;
    padding:0 9px!important;
    border-radius:9px!important;
    font-size:9px!important;
    justify-self:stretch!important;
  }

  .country-network-premium .country-market-rail{
    display:flex!important;
    flex-wrap:nowrap!important;
    grid-template-columns:none!important;
    grid-auto-flow:initial!important;
    gap:8px!important;
    width:auto!important;
    max-width:none!important;
    margin:0 -10px!important;
    padding:0 10px 4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-left:10px!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
  }
  .country-network-premium .country-market-rail::-webkit-scrollbar{
    display:none!important;
  }
  .country-network-premium .country-market-card{
    flex:0 0 214px!important;
    width:214px!important;
    min-width:214px!important;
    max-width:214px!important;
    scroll-snap-align:start!important;
    border-radius:11px!important;
  }
  .country-network-premium .country-market-visual,
  .country-network-premium .country-market-visual.has-market-image{
    width:100%!important;
    height:108px!important;
    min-height:108px!important;
    max-height:108px!important;
    aspect-ratio:auto!important;
  }
  .country-network-premium .country-market-body{
    height:72px!important;
    min-height:72px!important;
    padding:7px 9px 8px!important;
  }
  .country-network-premium .country-market-body>span{
    font-size:7px!important;
  }
  .country-network-premium .country-market-body>strong{
    margin-top:2px!important;
    font-size:10.5px!important;
  }
  .country-network-premium .country-market-body>small{
    font-size:7.5px!important;
  }

  .country-network-premium .country-market-visual .country-flag{
    top:8px!important;
    left:8px!important;
    width:30px!important;
    min-width:30px!important;
    max-width:30px!important;
    height:20px!important;
    min-height:20px!important;
    max-height:20px!important;
  }
  .country-network-premium .country-market-visual .country-market-mark{
    top:8px!important;
    right:8px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    border-radius:8px!important;
    font-size:8px!important;
  }
}

/* Small phones: show ~1.7 cards to communicate swipe. */
@media(max-width:390px){
  .country-network-premium>.shell{
    padding-inline:8px!important;
  }
  .country-network-premium .country-market-rail{
    margin-inline:-8px!important;
    padding-inline:8px!important;
    scroll-padding-left:8px!important;
  }
  .country-network-premium .country-market-card{
    flex-basis:196px!important;
    width:196px!important;
    min-width:196px!important;
    max-width:196px!important;
  }
  .country-network-premium .country-market-visual,
  .country-network-premium .country-market-visual.has-market-image{
    height:100px!important;
    min-height:100px!important;
    max-height:100px!important;
  }
  .country-network-premium .country-market-body{
    height:68px!important;
    min-height:68px!important;
  }
  .country-network-premium .country-network-head h2{
    font-size:19px!important;
  }
}