/* NOVIA 4.2.008 — swatch centering for the four non-Corolla-Cross/RAV4 viewers.
   This overrides the native button gap and flex item sizing that offset the
   inner paint disc. All rules are scoped to .novia-swatches-v008, only present
   on corolla-elite, wildlander, frontlander, and coaster. */
section#overview.novia-swatches-v008 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color){
  order:3!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:center!important;
  align-content:center!important;
  align-self:center!important;
  box-sizing:border-box!important;
  gap:16px!important;
  width:max-content!important;
  max-width:100%!important;
  margin:8px auto 6px!important;
  padding:8px!important;
  direction:rtl!important;
  grid-template-columns:none!important;
}
section#overview.novia-swatches-v008 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color)>button{
  --novia008-size:35px;
  position:relative!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 var(--novia008-size)!important;
  width:var(--novia008-size)!important;
  height:var(--novia008-size)!important;
  min-width:var(--novia008-size)!important;
  max-width:var(--novia008-size)!important;
  min-height:var(--novia008-size)!important;
  max-height:var(--novia008-size)!important;
  margin:0!important;
  padding:0!important;
  gap:0!important; /* Corrects the displaced paint disc. */
  border:1px solid #aaa!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:none!important;
  outline-offset:4px!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  letter-spacing:0!important;
  text-indent:0!important;
  overflow:visible!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
section#overview.novia-swatches-v008 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color)>button>span{
  box-sizing:border-box!important;
  position:absolute!important;
  inset:1px!important;
  display:block!important;
  flex:none!important;
  width:calc(100% - 2px)!important;
  height:calc(100% - 2px)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--paint,var(--color,#f5f5f0))!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
/* Real two-tone paint options retain their meaning without displacing discs. */
section#overview.novia-swatches-v008 .retained-viewer .colors>button[data-name*="سقف مشکی"]>span{
  background:linear-gradient(135deg,#202020 0 45%,var(--paint,#f5f5f0) 45% 100%)!important;
}
section#overview.novia-swatches-v008 .retained-viewer .coaster-colors>button[data-code="2jp"]>span,
section#overview.novia-swatches-v008 .retained-viewer .coaster-colors>button[data-code="2hl"]>span,
section#overview.novia-swatches-v008 .retained-viewer .coaster-colors>button[data-code="2dt"]>span{
  background:linear-gradient(145deg,#f7f7f0 0 50%,var(--color,#f5f5f0) 51% 100%)!important;
}
section#overview.novia-swatches-v008 .retained-viewer .coaster-colors>button[data-code="2ka"]>span{
  background:linear-gradient(145deg,#f7f7f0 0 33%,#a79bb7 34% 66%,#7588aa 67% 100%)!important;
}
section#overview.novia-swatches-v008 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color)>button[aria-pressed="true"]::after{
  content:""!important;
  display:block!important;
  box-sizing:border-box!important;
  position:absolute!important;
  inset:-5px!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  border:1.5px solid #111!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  pointer-events:none!important;
}
section#overview.novia-swatches-v008 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color)>button:not([aria-pressed="true"])::after{
  content:none!important;
}
section#overview.novia-swatches-v008 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color)>button:focus-visible{
  outline:2px solid #eb0a1e!important;
  outline-offset:6px!important;
}
section#overview.novia-swatches-v008 .retained-viewer :is(#color-name,.selection,.novia-one-name){
  order:4!important;
  margin:9px auto 5px!important;
  text-align:center!important;
}
@media(max-width:700px){
  section#overview.novia-swatches-v008 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color){
    gap:13px!important;
    margin:6px auto!important;
  }
  section#overview.novia-swatches-v008 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color)>button{
    --novia008-size:32px;
  }
}