/* Seven colours stay in one row, including on a 320px phone. */
.lg-fieldbar .fbp-swatches{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  width:100%;
  max-width:308px;
  gap:0;
  overflow:visible;
  padding:0;
}
.lg-fieldbar .fbp-swatches .swatch{
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  height:44px;
  padding:0;
  border:0;
  border-radius:4px;
  background:transparent;
  transform:none;
}
.lg-fieldbar .fbp-swatches .swatch::before{
  content:"";
  box-sizing:border-box;
  width:min(32px,calc(100% - 4px));
  aspect-ratio:1/1;
  border:2px solid #d7d3cc;
  border-radius:50%;
  background:var(--sw);
}
.lg-fieldbar .fbp-swatches .swatch.active::before{border-color:#0e3a4d}
.lg-fieldbar .fbp-swatches .swatch:focus-visible{outline:2px solid #C8102E;outline-offset:0}
@media(max-width:980px){
  .lg-fieldbar .fbp-mobile-controls{padding:16px 8px}
  .lg-fieldbar .mobile-swatches{margin-inline:auto;margin-bottom:0}
}