/* NOVIA 4.2.007: Actual visible vehicle geometry, not transparent image canvas. */
section.novia-color-layout-v007{--novia007-stage: min(1150px,100%);--novia007-circle:35px;}
section.novia-color-layout-v007 .retained-viewer{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:1150px;margin-inline:auto;}
section.novia-color-layout-v007 .retained-viewer :is(#stage,.spin-stage,.stage),
section.novia-color-layout-v007 > .viewer{
  position:relative!important;box-sizing:border-box;width:100%!important;max-width:1150px!important;
  height:clamp(280px,39vw,460px)!important;min-height:0!important;max-height:none!important;
  aspect-ratio:auto!important;margin:10px auto 0!important;padding:0!important;
  background:#fff!important;border:0!important;border-radius:0!important;
  overflow:hidden!important;isolation:isolate;
}
section.novia-color-layout-v007 .retained-viewer :is(#stage,.spin-stage,.stage){order:1;}
section.novia-color-layout-v007 :is(.retained-viewer :is(#stage,.spin-stage,.stage),.viewer) > img.novia007-car{
  position:absolute!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;
  width:auto;height:auto;object-fit:fill!important;transform:none!important;margin:0!important;
  padding:0!important;border:0!important;user-select:none;
}
section.novia-color-layout-v007 .retained-viewer :is(.controls,.spin-controls){order:2!important;display:flex!important;justify-content:center;align-items:center;flex-wrap:wrap;
  margin:4px auto 10px!important;padding:0!important;gap:10px!important;max-width:100%;}
section.novia-color-layout-v007 .retained-viewer > .actions.center{order:2!important;margin:4px auto 12px!important;}
section.novia-color-layout-v007 > .rotate{margin:4px auto 12px!important;}
section.novia-color-layout-v007 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color){
  order:3!important;display:flex!important;align-items:center;justify-content:center!important;
  flex-wrap:wrap;gap:15px!important;max-width:100%;width:max-content;
  padding:7px!important;margin:0 auto!important;}
section.novia-color-layout-v007 > .swatches{margin:4px auto 12px!important;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:15px;}
section.novia-color-layout-v007 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color) > button{
  position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;width:var(--novia007-circle)!important;height:var(--novia007-circle)!important;
  min-width:var(--novia007-circle)!important;min-height:var(--novia007-circle)!important;
  flex:0 0 var(--novia007-circle)!important;margin:0!important;padding:0!important;
  font-size:0!important;line-height:0!important;color:transparent!important;
  border-radius:50%!important;border:1px solid #9997!important;background:transparent!important;overflow:visible!important;
}
section.novia-color-layout-v007 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color) > button > span{
  display:block!important;box-sizing:border-box;width:100%!important;height:100%!important;
  min-width:0!important;min-height:0!important;margin:0!important;border-radius:50%!important;
  background:var(--paint,var(--color,#f5f5f0));}
section.novia-color-layout-v007 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color) > button[aria-pressed="true"]::after{
  content:"";position:absolute;inset:-5px;border:1.5px solid #111;border-radius:50%;pointer-events:none;}
section.novia-color-layout-v007 .retained-viewer :is(#color-name,.selection,.novia-one-name){
  order:4!important;display:flex;justify-content:center;align-items:center;gap:8px;margin:10px auto 5px!important;
  padding:0!important;font-size:15px;line-height:1.6;text-align:center;}
section.novia-color-layout-v007 .retained-viewer :is(.note,p:not(.novia-one-name)){order:5!important;margin:0 auto 12px!important;}
section.novia-color-layout-v007 > .colorname{margin:10px auto 5px!important;}
section.novia-color-layout-v007 > .fine{margin:5px auto 12px!important;}
section.novia-color-layout-v007 > .actions.center{margin:18px auto 0!important;}
/* Fullscreen keeps native controls but refits the visible vehicle on resize. */
section.novia-color-layout-v007 .retained-viewer :is(#stage,.spin-stage,.stage):fullscreen,
section.novia-color-layout-v007 > .viewer:fullscreen{
  width:100vw!important;max-width:none!important;height:100dvh!important;
  margin:0!important;aspect-ratio:auto!important;background:#fff!important;}
@media(max-width:700px){
  section.novia-color-layout-v007{--novia007-circle:32px;}
  section.novia-color-layout-v007 .retained-viewer :is(#stage,.spin-stage,.stage):not(:fullscreen),
  section.novia-color-layout-v007 > .viewer:not(:fullscreen){height:clamp(235px,60vw,330px)!important;margin-top:3px!important;}
  section.novia-color-layout-v007 .retained-viewer :is(.colors,.coaster-colors,.novia-one-color),
  section.novia-color-layout-v007 > .swatches{gap:12px!important;}
  section.novia-color-layout-v007 .retained-viewer :is(.controls,.spin-controls){gap:7px!important;margin:1px auto 8px!important;}
}