/* Vehicle appearance preview follows the App's color and wrap picker. */
.wrap-section{padding:78px 24px 90px}
.wrap-section .section-heading>p{color:#d0dce6;margin-top:14px;font-size:14px}
.wrap-workspace{max-width:1560px;margin:38px auto 0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(390px,1fr);gap:22px;align-items:stretch}
.wrap-showcase{max-width:1128px;margin:38px auto 0;min-height:460px;border:0.5px solid #b8dbf14d;border-radius:34px;background:linear-gradient(155deg,#203c53,#486f88 58%,#19415b);box-shadow:0 30px 70px #102d4133}
.wrap-label{top:34px;left:40px}
.wrap-label>span{font-size:11px;letter-spacing:2.3px;color:#d0dce6}
.wrap-label h3{font-size:32px;color:#fff;margin:13px 0 9px}
.wrap-label p{font-size:14px;color:#d0dce6}
.wrap-label p strong{color:#fff;font-weight:700}
.wrap-stage{height:460px;padding-top:0}
.wrap-stage .canvas-host{top:0;bottom:0}
.wrap-stage .car-shadow{bottom:76px;opacity:.12}
.wrap-status-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap-studio-panel{max-width:1128px;margin:20px auto 0;padding:23px 26px 26px;border:0.5px solid #b8dbf180;border-radius:30px;background:linear-gradient(145deg,#5d819aa8,#14536fbf);box-shadow:inset 0 1px #ffffff29,0 18px 36px #14334a23;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);container-type:inline-size}
.wrap-tabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px}
.wrap-tabs::-webkit-scrollbar{display:none}
.wrap-tab{flex:0 0 auto;border:0.5px solid #c6e4f141;border-radius:999px;padding:10px 23px;background:#ffffff1c;color:#dceaf3;font-size:14px;font-weight:600;white-space:nowrap;transition:background .18s,color .18s,transform .18s}
.wrap-tab:hover{background:#ffffff35;transform:translateY(-1px)}
.wrap-tab.active{background:#fff;border-color:#fff;color:#142332}
.wrap-panel-content{min-height:340px;padding:20px 8px 0}
.wrap-panel-content[hidden]{display:none}
#wrap-panel-color{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(36px,6cqi,48px)}
#wrap-panel-color[hidden]{display:none}
.wrap-presets{display:flex;justify-content:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap}
.wrap-preset{position:relative;width:48px;height:48px;padding:0;border-radius:50%;border:0.5px solid #ffffff3d;background:var(--paint);box-shadow:inset 0 2px 5px #0002;transition:transform .18s}
.wrap-preset:hover{transform:scale(1.09)}
.wrap-preset.selected:after{content:"";position:absolute;inset:-7px;border:0.5px solid #e6f5ff;border-radius:50%}
.wrap-color-wheel-wrap{position:relative;width:min(66cqi,360px,38dvh);aspect-ratio:1;margin:0 auto}
.wrap-color-wheel{display:block;width:100%;height:100%;border-radius:50%;cursor:crosshair;touch-action:none}
.wrap-wheel-indicator{position:absolute;left:50%;top:50%;width:17px;height:17px;border:0.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #213a5e99,0 1px 6px #102b3e88;transform:translate(-50%,-50%);pointer-events:none}
.wrap-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:none;max-height:min(60vh,600px);overflow-y:auto;overscroll-behavior:contain;margin:0;padding:3px 8px 8px 3px;scrollbar-width:none}
.wrap-options::-webkit-scrollbar{display:none}
.wrap-option{position:relative;overflow:hidden;aspect-ratio:1;min-height:0;padding:0;border:0.5px solid #b8dbf180;border-radius:19px;background:#244e6a78;display:block}
.wrap-option:hover{background:#49718caa}
.wrap-option.active{background:#668ca8b0;border-color:#e3f5ff;box-shadow:0 0 0 1px #e3f5ff}
.wrap-option.is-loading::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#fff0 0%,#ffffff1a 24%,#ffffff6b 50%,#ffffff1a 76%,#fff0 100%);transform:translateY(-100%);animation:wrap-loading-sweep .9s linear infinite}
@keyframes wrap-loading-sweep{to{transform:translateY(100%)}}
.wrap-thumb{position:absolute;inset:9%;width:auto;height:auto;border-radius:13px;background:transparent;display:grid;place-items:center}
.wrap-thumb img{width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.wrap-option.is-loading::after{animation:none;transform:none;opacity:.16}}
.wrap-catalog-error{padding:18px;color:#d1e2ec;text-align:center;font-size:13px}
.wrap-catalog-error[hidden]{display:none}
.wrap-empty{min-height:280px;display:grid;place-items:center;text-align:center;color:#d1e2ec;font-size:14px;padding:30px}
@media(min-width:1101px){
  .wrap-workspace .wrap-showcase{width:100%;max-width:none;min-height:560px;margin:0}
  .wrap-workspace .wrap-label{top:25px}
  .wrap-workspace .wrap-label h3{margin-top:0}
  .wrap-workspace .wrap-stage{position:absolute;inset:0;width:100%;height:100%;min-height:0}
  .wrap-workspace .wrap-studio-panel{width:100%;max-width:none;margin:0;display:flex;flex-direction:column;min-width:0}
  .wrap-workspace .wrap-panel-content{min-height:0}
  .wrap-workspace #wrap-panel-color{flex:1}
  .wrap-workspace .wrap-presets{gap:clamp(10px,2.5cqi,18px)}
  .wrap-workspace .wrap-preset{width:clamp(40px,9cqi,58px);height:clamp(40px,9cqi,58px)}
  .wrap-workspace .wrap-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
  .wrap-workspace{display:block;max-width:1128px;margin-top:38px}
  .wrap-workspace .wrap-showcase{margin-top:0}
}
@media(max-width:700px){
  .wrap-section{padding:60px 16px 68px}
  .wrap-section .section-heading>p{font-size:12px}
  .wrap-showcase{min-height:350px;margin-top:27px;border-radius:25px}
  .wrap-workspace{margin-top:27px}
  .wrap-label{top:25px;left:22px}
  .wrap-label>span{font-size:8px;letter-spacing:1.7px}
  .wrap-label h3{font-size:24px;margin:9px 0 6px}
  .wrap-label p{font-size:11px}
  .wrap-stage{height:350px}
  .wrap-stage .canvas-host{top:0;bottom:0}
  .wrap-stage .car-shadow{bottom:64px}
  .wrap-studio-panel{margin-top:14px;padding:17px 15px 20px;border-radius:24px}
  .wrap-tabs{gap:7px}
  .wrap-tab{padding:9px 16px;font-size:12px}
  .wrap-panel-content{min-height:300px;padding:20px 0 0;overflow:hidden}
  #wrap-panel-color{gap:36px;padding:22px 0 8px}
  .wrap-presets{gap:15px}
  .wrap-preset{width:35px;height:35px}
  .wrap-preset.selected:after{inset:-5px}
  .wrap-color-wheel-wrap{width:min(68cqi,300px,38dvh)}
  .wrap-options{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:calc((100cqi - 23px)/3);gap:8px;max-height:min(50vh,420px);padding:2px 5px 6px 2px}
  .wrap-option{height:100%;aspect-ratio:auto;padding:0}
  .wrap-empty{min-height:260px}
}