/* Home hero "Popular:" chips (Oct 24, 2026, Jared: "looks unprofessional on the desktop view").
   Desktop (1024px+): all six chips on one row. Same colors, borders and pill shape; tighter padding/gap, slightly smaller text.
   Phones: a tidy 3 + 3 grid, never a lone chip. Home only: linked from index.html only, so v6.css and the trade pages stay the same. */

/* phones (<600px): 3 + 3 grid under the centered "Popular:" label */
@media (max-width:599px){
  .chips{display:grid;grid-template-columns:repeat(3,max-content);justify-content:center;gap:8px}
  .chips-l{grid-column:1/-1;margin-right:0}
  .chips .chip{white-space:nowrap}
}
@media (max-width:419px){
  .chips{gap:7px}
  .chips .chip{font-size:16px;padding:0 12px}
}
@media (max-width:359px){
  .chips{gap:6px}
  .chips .chip{font-size:15px;padding:0 10px}
}
/* small tablets (600-900px, one-column hero): label on its own line, six chips on one row */
@media (min-width:600px) and (max-width:900px){
  .chips{flex-wrap:wrap;row-gap:8px;gap:5px}
  .chips-l{width:100%}
}
/* 901-1023px (two narrow columns): 3 + 3 under the label */
@media (min-width:901px) and (max-width:1023px){
  .chips{display:grid;grid-template-columns:repeat(3,max-content);gap:8px}
  .chips-l{grid-column:1/-1}
}
@media (min-width:600px) and (max-width:900px),(min-width:1024px){
  .chips-l{flex:none;font-size:14px;margin-right:3px}
  .chips .chip{flex:none;white-space:nowrap;font-size:14px;padding:0 9px;min-height:40px}
}
@media (min-width:1024px){.chips{flex-wrap:nowrap;gap:5px}}
/* 1024-1279px: slightly wider text column (1.08fr -> 1.26fr, same 56px gap); label on its own line up to 1199px */
@media (min-width:1024px) and (max-width:1279px){
  .hero-in{grid-template-columns:minmax(0,1.26fr) minmax(0,1fr)}
}
@media (min-width:1024px) and (max-width:1199px){
  .chips{display:grid;grid-template-columns:repeat(6,max-content);gap:8px 5px}
  .chips-l{grid-column:1/-1}
  .chips .chip{font-size:13.5px;padding:0 8px}
}