/* best-heated-vests.html only. Builds on site.css + article.css (its TIDY KIT: .qpicks, .tiles,
   .pickcard, .proscons, .fold, .factors, .steps, .choose ...). Here: the heat-zone map, the one
   comparison table, the women / men split and a few small extras. */

/* ---------- heat-zone map: one <symbol id="vestmap">, each zone painted by a custom property ---------- */
.zmap{display:block;width:100%;height:auto;--zoff:#dbe5ef;--zon:#ea6a33;--zline:#9fb2c6}
.zmap.z-collar{--z-collar:var(--zon)}
.zmap.z-shoulders{--z-shoulders:var(--zon)}
.zmap.z-chest{--z-chest:var(--zon)}
.zmap.z-pockets{--z-pockets:var(--zon)}
.zmap.z-back{--z-back:var(--zon)}
/* one chest zone (Milwaukee): hide the split chest panels, paint one band */
.zmap.z-chest1{--z-chest:transparent;--z-chest1:var(--zon)}
.zmapbox{display:block;min-width:0}
.zmapbox--mini{flex:none;width:5.25rem}
.zlegend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;padding:.65rem 1.15rem;border-top:1px solid var(--line);font-size:.8rem;font-weight:650;line-height:1.4;color:var(--muted)}
.zlegend span{display:inline-flex;align-items:center;gap:.4rem}
.zlegend i{width:.85rem;height:.85rem;border-radius:4px;background:#ea6a33}
.zlegend i.off{background:#dbe5ef;border:1px solid #9fb2c6}

/* ---------- the one comparison table ---------- */
.ctable--compare{min-width:44rem}
.ctable td small{display:block;margin-top:.15rem;font-size:.76rem;font-weight:600;color:var(--muted)}
.ctable .hrs{white-space:nowrap;font-weight:750;color:var(--ink)}
.ctable__prod a{color:var(--ink);text-decoration:none}
.ctable__prod a:hover{text-decoration:underline}
.zcell{display:flex;align-items:center;gap:.6rem}
.zcell b{display:block;font:800 1.05rem/1 var(--display);color:var(--ink)}
.ctable .yes,.ctable .no{white-space:nowrap}
.ctable .nw{white-space:nowrap}
.zcell>span:last-child{min-width:6.5rem}
.ctable .mid{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;color:var(--muted)}
/* the table scrolls below about 1160 px, so its hint shows there (article.css hides it from 64rem) */
.tablebox--wide .tablebox__hint{display:flex}

/* ---------- hero: the category pill is a link ---------- */
.ahero__tags a.pill{text-decoration:none}
.ahero__tags a.pill:hover{background:var(--frost-2)}
.ahero__tags .pill .ic{color:var(--ember-600)}

/* ---------- picks ---------- */
.pickcard__media>img{object-position:center 40%}
#pick-3 .pickcard__media>img{object-position:center 62%}
.pick__note{display:flex;gap:.5rem;align-items:flex-start;padding:.65rem .8rem;border-radius:var(--r-s);background:var(--frost);color:#24477a;font-size:.84rem;line-height:1.45;font-weight:600}
.pick__note .ic{width:1rem;height:1rem;margin-top:.12rem;flex:none}

/* ---------- women's, men's and tall sizes: photo beside two cards ---------- */
.fitsplit{display:grid;gap:.75rem}
.fitsplit__img{position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:var(--frost);box-shadow:var(--sh-1)}
.fitsplit__img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}

@media (max-width:47.99rem){
  .teambox__links .btn,.ctable .btn--sm{min-height:44px}
  /* phone table: a slim frozen name column so more data shows */
  .ctable tbody th,.ctable thead th:first-child{min-width:7rem}
  .ctable th,.ctable td{padding:.65rem .7rem}
  .ctable__prod img,.ctable__prod small{display:none}
  .zmapbox--mini{width:4.5rem}
}
@media (min-width:48rem){
  .fitsplit{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .fitsplit__img{aspect-ratio:auto;min-height:15rem}
  .fitsplit .choose{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:72.5rem){
  .tablebox--wide .tablebox__hint{display:none}
  .ctable--compare th,.ctable--compare td{padding-inline:.6rem}
  .ctable--compare tbody th{min-width:9.5rem}
  .ctable--compare thead th{white-space:normal}
  .ctable--compare .ctable__prod{gap:.5rem}
  .ctable--compare .ctable__prod img{width:2.2rem;height:2.2rem}
}