/* --- Grid + Tabs --- */
.vendor-grid, .retailer-grid{
  --_cols: var(--cols,6);
  --_gap:  var(--gap,16px);
  display:grid;
  gap:var(--_gap);
  grid-template-columns:repeat(var(--_cols),minmax(0,1fr));
  align-items:center
}
.vendor-grid__item, .retailer-grid__item{
  display:flex;justify-content:center;align-items:center;
  aspect-ratio: var(--ratio, 3 / 1);
  background:transparent;border:0;
  border-radius:12px;padding:10px
}
.vendor-grid.vendor-grid--square .vendor-grid__item,
.retailer-grid.retailer-grid--square .retailer-grid__item{ aspect-ratio: 1 / 1; }
.vendor-grid__item img, .retailer-grid__item img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height: var(--img_h, 100%);
  object-fit:contain;
  transition: transform .2s
}
.vendor-grid__item:hover img, .retailer-grid__item:hover img{transform:scale(1.02)}
@media (max-width:1024px){
  /* Default to 4 columns on tablets if not overridden */
  .vendor-grid, .retailer-grid{ --_cols: var(--cols_md,4); --_gap: var(--gap_md,var(--_gap)); }
}
@media (max-width:768px){
  /* Keep 4 columns on smaller tablets by default */
  .vendor-grid, .retailer-grid{ --_cols: var(--cols_sm,4); --_gap: var(--gap_sm,var(--_gap)); }
}
@media (max-width:480px){
  /* Default to 2 columns on small screens if not overridden */
  .vendor-grid, .retailer-grid{ --_cols: var(--cols_xs,2); --_gap: var(--gap_xs,var(--_gap)); }
}

.vendor-tabs{display:flex;gap:8px;margin:0 0 16px}
.vendor-tab{padding:8px 12px;border:1px solid rgba(0,0,0,.1);border-radius:999px;background:#fff;cursor:pointer}
.vendor-tab[aria-selected="true"]{font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.vendor-tab:focus{outline:none}
.vendor-tab:focus-visible{outline:none}
/* Remove default focus outline on cards while keeping hover effect */
.vendor-grid__item:focus, .retailer-grid__item:focus{outline:none}
.vendor-grid__item:focus-visible, .retailer-grid__item:focus-visible{outline:none}