:root {
  --glass-opacity: 0.45;
  --blur-strength: 7px;
  --fade-duration: 0.22s;
  --glass-fill: rgba(255, 255, 255, var(--glass-opacity));
  --glass-stroke: rgba(255, 255, 255, 0.3);
  --anim-door: url("../assets/icons/car_door.svg");
  --anim-headlight: url("../assets/icons/car-headlight.svg");
  --anim-hood: url("../assets/icons/car-hood.svg");
  --icon-body: url("../assets/icons/bodycolor-icon.svg");
  --icon-interior: url("../assets/icons/interior-icon.svg");
  --icon-exterior: url("../assets/icons/exterior-icon.svg");
  --icon-grade: url("../assets/icons/grade-icon.svg");
  --icon-animation: url("../assets/icons/animation-icon.svg");
  --icon-day: url("../assets/icons/day-icon.svg");
  --icon-night: url("../assets/icons/night-icon.svg");
  --icon-chevron-right: url("../assets/icons/chevron-right-icon.svg");
  /* Inlined as data URIs (no extra requests during loading). Sources:
     config/assets/img/grill-cap.svg / grill-beam.svg (left half of the 1920x1080
     pajero-grill-loading.svg artboard, viewBox cropped to x 31.891-960,
     y 387.748-730.435 so both masks share the half element's box) */
  --loading-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='31.891 387.748 928.109 342.687'%3E%3Cpath fill='%23fff' d='M416.317 488.241 416.317 477.077 32.139 470.043 31.891 492.616 116.914 492.616 120.973 484.092Z'/%3E%3Cpath fill='%23fff' d='M416.318 473.933 416.318 452.112 120.782 440.146 94.828 396.924 33.365 387.748 32.024 467.076Z'/%3E%3C/svg%3E");
  --loading-beam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='31.891 387.748 928.109 342.687'%3E%3Cpath fill='%23fff' d='M436.509 452.058 436.509 474.286 894.63 474.286 903.831 452.058Z'/%3E%3Cpath fill='%23fff' d='M436.509 477.366 436.509 499.594 880.097 499.594 889.298 477.366Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

/* Scope viewer typography to the viewer root: the page chrome (car_header,
   conversion, footer) must inherit the site font stack from common.min.css */
.pajero-config {
  font-family: "MMC OFFICE", "Noto Sans JP", sans-serif;
  background: #10141b;
}

.pajero-stage {
  --menu-unit: min(
    calc(clamp(127px, 9.02vw, 184px) / 184),
    calc((100vh - 172px) / 774)
  );
  --menu-top-padding: calc(var(--menu-unit) * 58);
  position: relative;
  /* car_header (60px desktop) above; the Outlander-style conversion bar is
     fixed at the bottom (80px), so reserve its space for the viewer UI */
  min-height: calc(100vh - 60px - 80px);
  overflow: hidden;
  /* Neutral backdrop while the canvas paints (no placeholder image) */
  background: #10141b;
}

.pajero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pajero-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  /* base.min.css/browser focus ring draws a blue border on the canvas */
  border: 0;
  outline: none;
}

/* Conversion bar: ported verbatim from outlander_phev/config/css/canvas_ui.css
  — the site default renders it as a right-side icon rail; Outlander pins it
   to the bottom as an 80px red bar and gives the footer clearance. */
.l_conversion ~ .l_footer {
  margin-bottom: 80px;
}

.l_conversion {
  top: auto;
  bottom: 0;
  left: 0;
  right: auto;
  width: 100%;
  height: 80px;
  background-color: var(--color_primaryRed);
  transform: none;
}

.l_conversion__nav {
  display: flex;
  justify-content: space-around;
  padding: 8px 0 6px;
}

.l_conversion__navItem {
  width: 16.66667%;
  margin: 0 !important;
}

.l_conversion__navLink {
  display: block;
  width: auto;
  height: auto;
  background-color: transparent;
  text-align: center;
  padding: 0;
}

.l_conversion__navLinkIcon {
  height: 32px;
  margin: 0 auto 6px;
}

.l_conversion__navLinkIcon img {
  height: 100%;
}

.l_conversion__navLinkText {
  font-size: 10px;
}

.pajero-bottom-controls {
  display: contents;
}

.pajero-theme-toggle {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  /* Container is click-through so drags beside the buttons reach the canvas */
  pointer-events: none;
}

.theme-btn,
.pajero-landscape-toggle {
  width: 63px;
  height: 52px;
  border: 1px solid var(--glass-stroke);
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-strength));
  -webkit-backdrop-filter: blur(var(--blur-strength));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #121212;
}

.pajero-landscape-toggle {
  margin-left: 12px;
}

.pajero-landscape-toggle[hidden],
.pajero-display-status[hidden],
.landscape-icon__exit,
.pajero-landscape-toggle[aria-pressed="true"] .landscape-icon__enter {
  display: none;
}

.pajero-landscape-toggle[aria-pressed="true"] .landscape-icon__exit {
  display: block;
}

.pajero-landscape-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.pajero-landscape-toggle:disabled {
  cursor: wait;
}

.pajero-display-status {
  position: absolute;
  top: 80px;
  left: 16px;
  right: 16px;
  z-index: 9;
  margin: 0;
  padding: 12px;
  background: #10141b;
  color: #fff;
  font-size: 14px;
  pointer-events: none;
}

.pajero-stage:fullscreen {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
}

.pajero-orientation-warning {
  width: min(480px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 24px;
  border: 1px solid var(--glass-stroke);
  background: #10141b;
  color: #fff;
  text-align: center;
  font-family: inherit;
}

.pajero-orientation-warning::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.pajero-orientation-warning h2 {
  margin: 0 0 12px;
  font-size: 20px;
}

.pajero-orientation-warning p {
  margin: 12px 0;
  font-size: 14px;
}

.pajero-orientation-warning button {
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid #fff;
  background: #fff;
  color: #121212;
  cursor: pointer;
}

.pajero-orientation-warning button[hidden] {
  display: none;
}

.theme-btn + .theme-btn {
  border-left: 0;
}

.theme-btn.is-active {
  background: #000;
  border-color: #000;
  color: #fff;
}

.theme-btn__icon {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  background: currentColor;
  mask-image: var(--theme-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--theme-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
}

.theme-btn__icon--day {
  --theme-icon: var(--icon-day);
}

.theme-btn__icon--night {
  --theme-icon: var(--icon-night);
}

.pajero-grade-note {
  /* Clear the right-side panel as well as the rail, and the theme buttons below. */
  --note-right: calc(64px + max(271px, var(--menu-unit) * 184) + 16px);
  display: none;
  position: absolute;
  right: var(--note-right);
  bottom: 100px;
  z-index: 7;
  width: max-content;
  max-width: min(440px, calc(100% - var(--note-right) - 16px));
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--glass-stroke);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-strength));
  -webkit-backdrop-filter: blur(var(--blur-strength));
  color: #121212;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.pajero-config.is-opening-complete[data-grade="GRD_002"] .pajero-grade-note {
  display: block;
}

.viewer-tools {
  /* Width-based scale (1 = 1920px design frame, floor at 127px buttons),
     capped by a height-based scale so the column (58px padding + 4x146px
     buttons + 3x44px gaps = 774px baseline) bottom-aligns with the theme
     toggle (stage bottom - 32px; stage = 100vh - 140px desktop chrome) */
  --menu-btn-width: calc(var(--menu-unit) * 184);
  --menu-btn-height: calc(var(--menu-unit) * 146);
  --menu-btn-gap: calc(var(--menu-unit) * 44);
  /* Icon sizes are per-button in the design: 50/56/62px on a 184px button */
  --menu-icon-unit: calc(var(--menu-btn-width) / 184);
  position: absolute;
  right: 64px;
  /* Stage already starts below the in-flow car_header; the padding is the
     design's 64px gap (scaled) between header and first button */
  top: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: var(--menu-top-padding);
  gap: var(--menu-btn-gap);
  /* Container is click-through; only the buttons take input */
  pointer-events: none;
}

.tool-btn {
  width: var(--menu-btn-width);
  height: var(--menu-btn-height);
  border: 1px solid var(--glass-stroke);
  border-radius: 0;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-strength));
  -webkit-backdrop-filter: blur(var(--blur-strength));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--menu-icon-unit, 1) * 8);
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  color: #121212;
}

.tool-btn__icon {
  width: 56px;
  height: 56px;
  background: currentColor;
  mask-image: var(--tool-icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--tool-icon);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
}

/* Baseline (1920px frame): body 50px, grade 62px, interior 56px, animation 62px */
.viewer-tools .tool-btn__icon--body {
  width: calc(var(--menu-icon-unit) * 50);
  height: calc(var(--menu-icon-unit) * 50);
}

.viewer-tools .tool-btn__icon--grade {
  width: calc(var(--menu-icon-unit) * 62);
  height: calc(var(--menu-icon-unit) * 62);
}

.viewer-tools .tool-btn__icon--interior {
  width: calc(var(--menu-icon-unit) * 56);
  height: calc(var(--menu-icon-unit) * 56);
}

.viewer-tools .tool-btn__icon--animation {
  width: calc(var(--menu-icon-unit) * 62);
  height: calc(var(--menu-icon-unit) * 62);
}

.viewer-tools .tool-btn__label {
  font-size: calc(var(--menu-icon-unit) * 20);
  line-height: calc(var(--menu-icon-unit) * 24);
}

.viewer-tools .tool-btn__state {
  font-size: calc(var(--menu-icon-unit) * 15);
  line-height: calc(var(--menu-icon-unit) * 18);
}

.tool-btn__icon--body {
  --tool-icon: var(--icon-body);
}

.tool-btn__icon--grade {
  --tool-icon: var(--icon-grade);
}

.tool-btn__icon--interior {
  --tool-icon: var(--icon-interior);
}

.tool-btn__icon--animation {
  --tool-icon: var(--icon-animation);
}

.tool-btn__label {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: currentColor;
}

/* Animation button only: On/Off state line under the label */
.tool-btn__state {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: currentColor;
  opacity: 0.7;
}

/* Interior view: the interior button becomes the Exterior action;
   the other tools show the design's disabled state */
.pajero-config[data-view="interior"]
  .tool-btn[data-tool="interior"]
  .tool-btn__icon {
  --tool-icon: var(--icon-exterior);
}

.tool-btn:disabled {
  background: rgba(248, 248, 248, 0.13);
  border-color: rgba(134, 134, 134, 0.3);
  color: #959595;
  cursor: default;
}

/* Animation plays the shot sequence: lit while playing (theme-btn pattern) */
.tool-btn[data-tool="animation"] {
  transition:
    background-color var(--fade-duration) ease,
    border-color var(--fade-duration) ease,
    color var(--fade-duration) ease;
}

.tool-btn[data-tool="animation"].is-active:not(:disabled) {
  background: #000;
  border-color: #000;
  color: #fff;
}

.viewer-panel-toggle {
  /* Design: 70x70 square, 28px icon, 1px gap, 15/22 label */
  --toggle-size: clamp(52px, 3.65vw, 70px);
  position: absolute;
  /* Sits flush left of the panel: right offset = panel right + panel width */
  /* Design: close button sits 32px left of the panel, 70x70, top-aligned */
  right: calc(64px + min(271px, calc(100vw - 160px)) + 32px);
  top: var(--menu-top-padding);
  width: var(--toggle-size);
  height: var(--toggle-size);
  padding: 0;
  gap: calc(var(--toggle-size) / 70);
  border: 1px solid var(--glass-stroke);
  border-radius: 0;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-strength));
  -webkit-backdrop-filter: blur(var(--blur-strength));
  color: #000;
  font-size: calc(var(--toggle-size) * 15 / 70);
  font-weight: 500;
  line-height: calc(var(--toggle-size) * 22 / 70);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 8;
  cursor: pointer;
  /* 0.001 (not 0) keeps the backdrop-filter layer alive to avoid re-blur flash */
  opacity: 0.001;
  pointer-events: none;
  will-change: opacity;
  /* Fade out immediately when closing; fade in is delayed via .is-menu-open */
  transition: opacity var(--fade-duration) ease 0s;
}

.viewer-panel-toggle::before {
  content: "";
  flex: none;
  width: calc(var(--toggle-size) * 28 / 70);
  height: calc(var(--toggle-size) * 28 / 70);
  background: currentColor;
  mask: var(--icon-chevron-right) no-repeat center / contain;
  -webkit-mask: var(--icon-chevron-right) no-repeat center / contain;
  pointer-events: none;
}

.viewer-panel {
  /* Design size: 271px wide, up to 774px tall (271x774 at 1920x1080) */
  --panel-width: min(271px, calc(100vw - 160px));
  /* Scale unit: 1px at the 271px design baseline */
  --panel-unit: calc(var(--panel-width) / 271);
  --panel-bottom-gap: clamp(42px, 2.98vw, 58px);
  position: absolute;
  right: 64px;
  top: var(--menu-top-padding);
  width: var(--panel-width);
  height: auto;
  /* Bound to the stage (100%), not the viewport, with room below for the footer */
  max-height: min(774px, calc(100% - var(--panel-bottom-gap)));
  border-radius: 0;
  border: 1px solid #d6d6d6;
  background: rgba(245, 241, 234, var(--glass-opacity));
  backdrop-filter: blur(var(--blur-strength));
  -webkit-backdrop-filter: blur(var(--blur-strength));
  /* Design: 48px header/side insets */
  padding: calc(var(--panel-unit) * 48) calc(var(--panel-unit) * 48)
    calc(var(--panel-unit) * 24);
  z-index: 9;
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide scrollbar tracks; panel remains scrollable via wheel/touch */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 0.001 (not 0) + no visibility toggle keeps the blur layer alive: no flash */
  opacity: 0.001;
  pointer-events: none;
  will-change: opacity;
  /* Closing: fade out first (no delay) */
  transition: opacity var(--fade-duration) ease 0s;
}

.viewer-panel::-webkit-scrollbar {
  display: none;
}

.viewer-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  /* Opening: wait for the menu stack to finish fading out, then fade in */
  transition: opacity var(--fade-duration) ease var(--fade-duration);
}

.viewer-tools .tool-btn {
  /* Fade the buttons themselves: opacity/will-change on the parent container
     would create a backdrop root and disable the buttons' backdrop-filter */
  will-change: opacity;
  /* Returning: wait for the panel to finish fading out, then fade in */
  transition: opacity var(--fade-duration) ease var(--fade-duration);
}

.pajero-config.is-menu-open .viewer-tools .tool-btn {
  /* 0.001 keeps the buttons' blur layers warm while hidden */
  opacity: 0.001;
  pointer-events: none;
  /* Leaving: fade out immediately */
  transition: opacity var(--fade-duration) ease 0s;
}

.pajero-config.is-menu-open .viewer-panel-toggle {
  opacity: 1;
  pointer-events: auto;
  /* Arriving: fade in after the menu stack has faded out */
  transition: opacity var(--fade-duration) ease var(--fade-duration);
}

.viewer-panel__close {
  position: absolute;
  /* Aligns with the panel-head row (mock: X sits inline with the title) */
  right: 20px;
  top: 24px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

/* Desktop A-2/A-3 uses arrow toggle; close button is for mobile menu card. */
@media screen and (min-width: 768px) {
  .viewer-panel__close {
    display: none;
  }
}

.viewer-panel__close::before,
.viewer-panel__close::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 13px;
  width: 22px;
  height: 2px;
  background: #121212;
}

.viewer-panel__close::before {
  transform: rotate(45deg);
}

.viewer-panel__close::after {
  transform: rotate(-45deg);
}

.panel-content {
  display: none;
}

.panel-content.is-active {
  display: block;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Design: 48px between header and contents */
  margin-bottom: calc(var(--panel-unit, 1) * 48);
}

.panel-head__icon {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.panel-head__icon--body {
  background-image: var(--icon-body);
}

.panel-head__icon--grade {
  background-image: var(--icon-grade);
}

.panel-head__icon--interior {
  background-image: var(--icon-interior);
}

.panel-head__icon--animation {
  background-image: var(--icon-animation);
}

.panel-head__title {
  margin: 0;
  font-size: 17px;
  line-height: 28px;
  font-weight: 700;
  white-space: nowrap;
}

.swatch-group h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 28px;
  font-weight: 700;
}

/* GSR (GRD_001) is monotone-only; two-tone colors exist on SE alone */
.pajero-config[data-grade="GRD_001"] .swatch-group--two-tone {
  display: none;
}

.swatch-group + .swatch-group {
  margin-top: 16px;
}

.swatch-group {
  padding: 0;
}

/* Desktop: the slider wrapper is layout-transparent */
.swatch-slider {
  display: contents;
}

/* Chips stay fixed at 64px; space-between pins the columns to both content
   edges so side padding is always symmetric at any panel width */
.swatch-grid {
  display: grid;
  justify-content: space-between;
  gap: 16px 8px;
}

.swatch-grid--two {
  grid-template-columns: repeat(2, 64px);
}

.swatch-grid--mono {
  grid-template-columns: repeat(2, 64px);
}

.swatch {
  width: 64px;
  height: 64px;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #fff;
  background: var(--swatch);
  cursor: pointer;
}

.swatch--duo {
  position: relative;
  overflow: hidden;
  /* Real border (not inset shadow): the overlays are confined to the
     padding box, so the ring can't be covered at fractional sizes */
  border: 1px solid #fff;
  box-shadow: none;
}

/* Hover-capable only: touch would leave :hover stuck after a tap */
@media (hover: hover) {
  .swatch:hover {
    box-shadow: inset 0 0 0 2px #fff;
  }

  .swatch--duo:hover {
    border-width: 2px;
    box-shadow: none;
  }
}

.swatch--duo::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 53%;
  background: #171316;
}

.swatch--duo-copper::after,
.swatch--duo-blue::after,
.swatch--duo-gray::after,
.swatch--duo-white::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 47%;
}

.swatch--duo-copper::after {
  background: #b69175;
}

.swatch--duo-blue::after {
  background: #8192b0;
}

.swatch--duo-gray::after {
  background: #535963;
}

.swatch--duo-white::after {
  background: #e9ecef;
}

.swatch.is-selected {
  outline: 2px solid #ef514f;
  outline-offset: 2px;
}

/* Positioned by JS: left/top = swatch top-center within .pajero-stage */
.swatch-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: calc(var(--panel-unit, 1px) * 224);
  padding: calc(var(--panel-unit, 1px) * 16);
  border: 1px solid #bfc2c4;
  background: #fff;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(var(--panel-unit, 1px) * 15);
  text-align: center;
  line-height: 1.5;
  filter: drop-shadow(0 2px 4px rgba(127, 127, 127, 0.15));
  /* Design: 19px from box bottom to swatch top (15px arrow + 4px gap) */
  transform: translate(-50%, calc(-100% - var(--panel-unit, 1px) * 19));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.swatch-tooltip.is-fading {
  opacity: 0;
}

/* 29x15 arrow: a rotated square whose top half hides the box's bottom border */
.swatch-tooltip::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--arrow-x, 0px));
  top: 100%;
  width: calc(var(--panel-unit, 1px) * 20.5);
  height: calc(var(--panel-unit, 1px) * 20.5);
  border-right: 1px solid #bfc2c4;
  border-bottom: 1px solid #bfc2c4;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.interior-group {
  display: grid;
  gap: 10px;
}

.interior-grade {
  min-height: 52px;
  border-radius: 0;
  border: 1px solid #a9a7a5;
  background: rgba(255, 255, 255, var(--glass-opacity));
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.interior-grade.is-selected {
  border-color: #121212;
}

.animation-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Same footprint as the body color contents area (564px at the 271px
     baseline); space-around distributes the three buttons within it */
  height: calc(var(--panel-unit, 1) * 532);
  justify-content: space-evenly;
  gap: 0;
  margin-top: 0;
}

.animation-action {
  /* Design: 120x120 square action buttons */
  width: calc(var(--panel-unit, 1) * 120);
  height: calc(var(--panel-unit, 1) * 120);
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}

.animation-action__border,
.animation-border {
  color: #121212;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.animation-action.is-selected {
  border: 2px solid #ff0a00;
  /* background: rgba(255, 255, 255, var(--glass-opacity)); */
}

.animation-action.is-selected .animation-action__text {
  font-weight: 700;
}

.animation-action__icon {
  /* Design: 40px-tall icon zone, width varies per icon */
  height: calc(var(--panel-unit, 1) * 40);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.animation-action__icon--door {
  width: calc(var(--panel-unit, 1) * 60);
  background-image: var(--anim-door);
}

.animation-action__icon--headlight {
  width: calc(var(--panel-unit, 1) * 55);
  background-image: var(--anim-headlight);
}

.animation-action__icon--hood {
  width: calc(var(--panel-unit, 1) * 55);
  background-image: var(--anim-hood);
}

.animation-action__text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

/* Grade panel mirrors the animation panel layout (0827 design) */
.grade-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(var(--panel-unit, 1) * 532);
  justify-content: space-evenly;
  gap: 0;
  margin-top: 0;
}

.grade-action {
  width: calc(var(--panel-unit, 1) * 120);
  height: calc(var(--panel-unit, 1) * 120);
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  /* gap: 4px; */
  position: relative;
}

.grade-action.is-selected {
  border: 2px solid #ff0a00;
}

/* .grade-action.is-selected .grade-action__text {
  font-weight: 700;
} */

.grade-action__border {
  color: #121212;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.grade-action__icon {
  height: calc(var(--panel-unit, 1) * 50);
  width: calc(var(--panel-unit, 1) * 50);
  background-image: var(--icon-grade);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.grade-action__text {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.viewer-tools-sp {
  display: none;
}

/* ============================================================
  Desktop submenus (excludes portrait <=767px and short-landscape
  blocks below): the 271x774 design card scales as one unit so the
  full layout always fits the stage — no scrolling, no clipping.
  ============================================================ */
@media screen and (min-width: 768px) and (min-height: 501px) {
  .pajero-bottom-controls .pajero-grade-note {
    right: 64px;
    bottom: 32px;
    max-width: none;
    height: 52px;
    align-content: center;
    padding: 0 12px;
    font-size: clamp(10px, 0.75vw, 12px);
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .viewer-panel,
  .viewer-panel-toggle,
  .swatch-tooltip {
    /* 1px per design px at 1920x1080; shrinks with window width or
       stage height (100vh - 162px chrome - 2x64px design gaps) */
    --panel-unit: min(
      calc(min(271px, 100vw - 160px) / 271),
      calc(min(774px, 100vh - 290px) / 774)
    );
    --panel-width: calc(var(--panel-unit) * 271);
    --panel-height: calc(var(--panel-unit) * 774);
  }

  .viewer-panel {
    right: 64px;
    top: var(--menu-top-padding);
    width: var(--panel-width);
    height: var(--panel-height);
    max-height: none;
    overflow: hidden;
  }

  .viewer-panel-toggle {
    /* 32px left of the card, top-aligned with it */
    right: calc(64px + var(--panel-width) + 32px);
    top: var(--menu-top-padding);
    --toggle-size: calc(var(--panel-unit) * 70);
  }

  .panel-head {
    gap: calc(var(--panel-unit) * 12);
  }

  .panel-head__icon {
    width: calc(var(--panel-unit) * 50);
    height: calc(var(--panel-unit) * 50);
  }

  .panel-head__title {
    font-size: calc(var(--panel-unit) * 20);
    line-height: calc(var(--panel-unit) * 28);
  }

  .swatch-group h3 {
    /* Design: 16px label-to-grid gap (grid at y44, 28px label) */
    margin: 0 0 calc(var(--panel-unit) * 16);
    font-size: calc(var(--panel-unit) * 16);
    line-height: calc(var(--panel-unit) * 28);
  }

  .swatch-group + .swatch-group {
    /* Design: 32px between Two Tone and Mono Tone groups */
    margin-top: calc(var(--panel-unit) * 32);
  }

  .swatch-grid {
    gap: calc(var(--panel-unit) * 16) calc(var(--panel-unit) * 8);
  }

  .swatch-grid--two,
  .swatch-grid--mono {
    grid-template-columns: repeat(2, calc(var(--panel-unit) * 64));
  }

  .swatch {
    width: calc(var(--panel-unit) * 64);
    height: calc(var(--panel-unit) * 64);
  }

  .interior-group {
    gap: calc(var(--panel-unit) * 10);
  }

  .interior-grade {
    min-height: calc(var(--panel-unit) * 52);
    font-size: calc(var(--panel-unit) * 16);
  }

  .animation-action__text,
  .grade-action__text {
    font-size: calc(var(--panel-unit) * 18);
    line-height: calc(var(--panel-unit) * 24);
  }

  .animation-action__border,
  .animation-border,
  .grade-action__border {
    font-size: calc(var(--panel-unit) * 16);
  }
}

@media screen and (pointer: coarse) and (orientation: landscape) and (min-width: 768px) and (max-width: 1199px) and (min-height: 501px) {
  .pajero-bottom-controls .pajero-grade-note {
    top: 24px;
    left: 16px;
    right: auto;
    bottom: auto;
    max-width: calc(100% - 400px);
    height: auto;
    padding: 12px 16px;
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 767px) {
  .pajero-grade-note {
    --note-right: 16px;
    bottom: 112px;
    padding: 8px 12px;
  }

  .pajero-stage {
    /* Fallback only: sizeStage() sets the real height from measured chrome
       (innerHeight - l_header - car_header - l_conversion) */
    min-height: calc(100vh - 40px);
  }

  .viewer-panel-toggle {
    display: none;
  }

  .viewer-tools {
    display: none;
  }

  .viewer-tools-sp {
    display: block;
  }

  .pajero-theme-toggle {
    left: 16px;
    top: 24px;
    bottom: auto;
    transform: none;
  }

  .theme-btn,
  .pajero-landscape-toggle {
    width: 58px;
    height: 46px;
  }

  .theme-btn__icon {
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
  }

  .viewer-tools-sp {
    position: absolute;
    left: 16px;
    right: 16px;
    /* Stage now ends at the conversion bar, so no need to clear its 80px */
    bottom: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    z-index: 8;
    /* Container is click-through; only the buttons take input */
    pointer-events: none;
  }

  .viewer-tools-sp .tool-btn {
    width: auto;
    height: 80px;
    min-height: 80px;
    border-radius: 0;
    background-color: var(--glass-fill);
    gap: 4px;
    will-change: opacity;
    /* Returning: wait for the panel to finish fading out, then fade in */
    transition: opacity var(--fade-duration) ease var(--fade-duration);
  }

  /* A-5_SP: the bottom tool grid does not render while a submenu is open */
  .pajero-config.is-menu-open .viewer-tools-sp .tool-btn {
    opacity: 0.001;
    pointer-events: none;
    transition: opacity var(--fade-duration) ease 0s;
  }

  .viewer-tools-sp .tool-btn:disabled {
    background-color: rgba(248, 248, 248, 0.13);
    border-color: rgba(134, 134, 134, 0.3);
  }

  .viewer-tools-sp .tool-btn__icon {
    width: 34px;
    height: 34px;
  }

  .viewer-tools-sp .tool-btn__label {
    /* Slope keeps "Body Color" (widest label, ~6em) one line at any width:
       12px at 375, 9.8px at 320, design 13px from 400px up */
    font-size: clamp(9px, 4vw - 3px, 13px);
    line-height: 1.23;
    white-space: nowrap;
  }

  .viewer-tools-sp .tool-btn__state {
    font-size: clamp(8px, 3vw - 1px, 10px);
  }

  .viewer-panel {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 220px);
    border-radius: 0;
    padding: 12px 20px 16px;
    opacity: 0.001;
    pointer-events: none;
  }

  .viewer-panel__close {
    right: 16px;
    top: 10px;
  }

  .viewer-panel.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .panel-head {
    /* Mock: title row with inline close X, divider underneath */
    padding-right: 40px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.25);
    margin-bottom: 12px;
    justify-content: flex-start;
  }

  .panel-head__icon {
    width: 24px;
    height: 24px;
  }

  .panel-head__title {
    font-size: 13px;
    line-height: 18px;
  }

  .panel-content.is-active {
    border: 0;
    background: transparent;
    padding: 0;
  }

  /* Body color picker slides horizontally: Two Tone -> Mono Tone.
     The scroller is the slider wrapper, so the panel head stays above. */
  .swatch-slider {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Breathing room so the selection outline (2px + 2px offset) isn't
       clipped by the scroll container; negative margin keeps alignment */
    padding: 6px;
    margin: -6px;
    scroll-padding: 6px;
    /* scroll-snap-type: x proximity; */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .swatch-slider::-webkit-scrollbar {
    display: none;
  }

  .swatch-slider .swatch-group {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .swatch-slider .swatch-group + .swatch-group {
    margin-top: 0;
  }

  /* All chips flow in one continuous row inside the slider */
  .swatch-slider .swatch-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 40px;
    grid-template-rows: 40px;
    gap: 12px;
  }

  .swatch-slider .swatch {
    width: 40px;
    height: 40px;
  }

  .swatch-group {
    padding: 0;
  }

  .swatch-group h3 {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 4px;
  }

  .swatch-grid {
    gap: 12px 16px;
  }

  .swatch-grid--two,
  .swatch-grid--mono {
    grid-template-columns: repeat(4, 44px);
  }

  .swatch {
    width: 44px;
    height: 44px;
    border-radius: 0;
  }

  .swatch-tooltip {
    padding: calc(var(--panel-unit, 1px) * 13);
    font-size: calc(var(--panel-unit, 1px) * 13);
  }

  .interior-grade {
    min-height: 36px;
    font-size: 13px;
  }

  .animation-action {
    min-height: 0;
    width: 60px;
    height: 60px;
    gap: 2px;
  }

  /* Row layout mirroring the body color slider: three squares across */
  .animation-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
    gap: 0;
    margin-top: 0;
  }

  .animation-action__icon {
    height: 22px;
  }

  .animation-action__icon--door {
    width: 40px;
  }

  .animation-action__icon--headlight {
    width: 40px;
  }

  .animation-action__icon--hood {
    width: 40px;
  }

  .animation-action__text {
    font-size: 12px;
    line-height: 16px;
  }

  /* SP grade menu: two buttons side by side (A-5_SP) */
  .grade-group {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    height: auto;
    gap: 0;
    margin-top: 0;
  }

  .grade-action {
    min-height: 0;
    width: 68px;
    height: 68px;
    gap: 2px;
  }

  .grade-action__icon {
    height: 22px;
    width: 32px;
  }

  .grade-action__text {
    font-size: 12px;
    line-height: 16px;
  }

  /* pc-only elements (e.g. animation divider spans) are hidden on mobile */
  .pc-only {
    display: none !important;
  }
}

/* ============================================================
   Loading state (Figma: Loading dark frame, used for both themes)
   ============================================================ */

.pajero-config {
  --loading-bg: #000;
  --loading-art: #686d71; /* anthracite grey */
  --loading-band: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    #fff 35%,
    #fff 65%,
    rgba(255, 255, 255, 0) 100%
  );
  /* Fill layer: soft leading edge, solid white tail; sweeps inner->outer
     behind the returning pulse so the strip stays lit ("light turns on") */
  --loading-fill: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 30%,
    #fff 36.7%,
    #fff 100%
  );
  /* Stops from the Figma cap vector on blink frames 1/3 */
  --loading-yellow: linear-gradient(
    90deg,
    #f2e404 0%,
    #f2e404 71.8%,
    #f1b706 92.7%,
    #eca508 96.9%,
    #e68d0a 100%
  );
}

.pajero-loading {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: var(--loading-bg);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0s;
}

.pajero-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
  pointer-events: none;
}

/* Grill artwork: content bbox of pajero-grill-loading.svg (1856.218x342.687
   art units) rendered 1102px wide. The old 1600x520 box had internal padding;
   this box is content-cropped, so offsets keep the old art's visual bottom
   edge (and the gap to the logo) per breakpoint. */
.pajero-loading__art {
  position: absolute;
  left: 50%;
  top: calc(50% - 139px);
  transform: translate(-50%, -50%);
  width: min(645px, 53.8vw);
  aspect-ratio: 1856.218 / 342.687;
}

.pajero-loading__half {
  position: absolute;
  inset: 0;
}

.pajero-loading__half--right {
  transform: scaleX(-1);
}

/* Cap (headlight bracket + arm) and beam (two center light bars) are both
   full-half elements masked to their own art, so one background animation
   sweeps the pulse continuously outer->center across both pieces.
   Gradient x axis = half width: cap art spans 0-41.42%, beam 43.59-93.94%. */
.pajero-loading__cap,
.pajero-loading__beam {
  position: absolute;
  inset: 0 50% 0 0;
  background-color: var(--loading-art);
  background-image: var(--loading-band), var(--loading-fill);
  background-repeat: no-repeat;
  background-size:
    30% 100%,
    300% 100%;
  background-position:
    -42.857% 0,
    -5% 0;
  animation: pajero-loading-grill 5.2s linear infinite;
}

.pajero-loading__cap {
  -webkit-mask: var(--loading-cap) no-repeat center / 100% 100%;
  mask: var(--loading-cap) no-repeat center / 100% 100%;
}

.pajero-loading__beam {
  -webkit-mask: var(--loading-beam) no-repeat center / 100% 100%;
  mask: var(--loading-beam) no-repeat center / 100% 100%;
}

/* Grill slats: plain divs (crisper than masks), rows from the
   grill-slat-*.svg exports mapped onto the full art box */
.pajero-loading__dash {
  position: absolute;
  background-color: var(--loading-art);
  animation: 5.2s linear infinite;
}

.pajero-loading__dash--1 {
  inset: 35.971% 95.559% 60.213% 0;
  animation-name: pajero-loading-dash-1;
}
.pajero-loading__dash--2 {
  inset: 45.184% 95.671% 51% 0;
  animation-name: pajero-loading-dash-2;
}
.pajero-loading__dash--3 {
  inset: 55.384% 95.803% 40.8% 0;
  animation-name: pajero-loading-dash-3;
}
.pajero-loading__dash--4 {
  inset: 65.584% 95.938% 30.6% 0;
  animation-name: pajero-loading-dash-4;
}
.pajero-loading__dash--5 {
  inset: 75.784% 96.07% 20.4% 0;
  animation-name: pajero-loading-dash-5;
}
.pajero-loading__dash--6 {
  inset: 85.984% 96.201% 10.2% 0;
  animation-name: pajero-loading-dash-6;
}
.pajero-loading__dash--7 {
  inset: 96.184% 96.332% 0 0;
  animation-name: pajero-loading-dash-7;
}

/* 19 frames, ~274ms each (5.2s loop), per the Figma step sheet:
   frames 1-4 blink the cap (yellow gradient, sized to the cap's 41.42%
   zone so the beam stays grey) and slats twice; frames 5-8 sweep the
   white pulse outer->center across cap and beam in one pass (both are
   full-half elements sharing the same x axis, each masked to its art);
   frames 9-11 the pulse travels back out while the white fill trails its
   rear edge (the light "turns on", inner->outer); frames 12-18 tick the
   slats white top-to-bottom, then the loop restarts from grey.
   background-image must be re-declared in every keyframe: gradient
   swaps interpolate discretely at segment midpoints otherwise. */
@keyframes pajero-loading-grill {
  0%,
  5.25% {
    background-color: var(--loading-art);
    background-image: var(--loading-band), var(--loading-fill);
    background-size:
      30% 100%,
      300% 100%;
    background-position:
      -42.857% 0,
      -5% 0;
  }
  5.26%,
  10.52% {
    background-color: var(--loading-art);
    background-image: var(--loading-yellow), var(--loading-fill);
    background-size:
      41.42% 100%,
      300% 100%;
    background-position:
      0 0,
      -5% 0;
  }
  10.53%,
  15.78% {
    background-color: var(--loading-art);
    background-image: var(--loading-band), var(--loading-fill);
    background-size:
      30% 100%,
      300% 100%;
    background-position:
      -42.857% 0,
      -5% 0;
  }
  15.79%,
  21.04% {
    background-color: var(--loading-art);
    background-image: var(--loading-yellow), var(--loading-fill);
    background-size:
      41.42% 100%,
      300% 100%;
    background-position:
      0 0,
      -5% 0;
  }
  /* idle frame after the blink, then the pulse's leading edge runs
     outer corner -> center gap */
  21.05%,
  26.31% {
    background-color: var(--loading-art);
    background-image: var(--loading-band), var(--loading-fill);
    background-size:
      30% 100%,
      300% 100%;
    background-position:
      -42.857% 0,
      -5% 0;
  }
  45% {
    background-color: var(--loading-art);
    background-image: var(--loading-band), var(--loading-fill);
    background-size:
      30% 100%,
      300% 100%;
    background-position:
      100% 0,
      -5% 0;
  }
  /* fill emerges under the pulse's white zone; its solid edge tracks the
     pulse's trailing white edge, so no grey shows behind the front */
  45.01% {
    background-color: var(--loading-art);
    background-image: var(--loading-band), var(--loading-fill);
    background-size:
      30% 100%,
      300% 100%;
    background-position:
      100% 0,
      10.3% 0;
  }
  /* pulse exits the outer corner just as the fill completes: strip stays lit */
  63.15%,
  100% {
    background-color: var(--loading-art);
    background-image: var(--loading-band), var(--loading-fill);
    background-size:
      30% 100%,
      300% 100%;
    background-position:
      -42.857% 0,
      60% 0;
  }
}

@keyframes pajero-loading-dash-1 {
  0%,
  5.25% {
    background-color: var(--loading-art);
  }
  5.26%,
  10.52% {
    background-color: #f2e404;
  }
  10.53%,
  15.78% {
    background-color: var(--loading-art);
  }
  15.79%,
  21.04% {
    background-color: #f2e404;
  }
  21.05%,
  63.15% {
    background-color: var(--loading-art);
  }
  63.16%,
  100% {
    background-color: #fff;
  }
}

@keyframes pajero-loading-dash-2 {
  0%,
  5.25% {
    background-color: var(--loading-art);
  }
  5.26%,
  10.52% {
    background-color: #f2e404;
  }
  10.53%,
  15.78% {
    background-color: var(--loading-art);
  }
  15.79%,
  21.04% {
    background-color: #f2e404;
  }
  21.05%,
  68.41% {
    background-color: var(--loading-art);
  }
  68.42%,
  100% {
    background-color: #fff;
  }
}

@keyframes pajero-loading-dash-3 {
  0%,
  5.25% {
    background-color: var(--loading-art);
  }
  5.26%,
  10.52% {
    background-color: #f2e404;
  }
  10.53%,
  15.78% {
    background-color: var(--loading-art);
  }
  15.79%,
  21.04% {
    background-color: #f2e404;
  }
  21.05%,
  73.67% {
    background-color: var(--loading-art);
  }
  73.68%,
  100% {
    background-color: #fff;
  }
}

@keyframes pajero-loading-dash-4 {
  0%,
  5.25% {
    background-color: var(--loading-art);
  }
  5.26%,
  10.52% {
    background-color: #f2e404;
  }
  10.53%,
  15.78% {
    background-color: var(--loading-art);
  }
  15.79%,
  21.04% {
    background-color: #f2e404;
  }
  21.05%,
  78.94% {
    background-color: var(--loading-art);
  }
  78.95%,
  100% {
    background-color: #fff;
  }
}

@keyframes pajero-loading-dash-5 {
  0%,
  5.25% {
    background-color: var(--loading-art);
  }
  5.26%,
  10.52% {
    background-color: #f2e404;
  }
  10.53%,
  15.78% {
    background-color: var(--loading-art);
  }
  15.79%,
  21.04% {
    background-color: #f2e404;
  }
  21.05%,
  84.2% {
    background-color: var(--loading-art);
  }
  84.21%,
  100% {
    background-color: #fff;
  }
}

@keyframes pajero-loading-dash-6 {
  0%,
  5.25% {
    background-color: var(--loading-art);
  }
  5.26%,
  10.52% {
    background-color: #f2e404;
  }
  10.53%,
  15.78% {
    background-color: var(--loading-art);
  }
  15.79%,
  21.04% {
    background-color: #f2e404;
  }
  21.05%,
  89.46% {
    background-color: var(--loading-art);
  }
  89.47%,
  100% {
    background-color: #fff;
  }
}

@keyframes pajero-loading-dash-7 {
  0%,
  5.25% {
    background-color: var(--loading-art);
  }
  5.26%,
  10.52% {
    background-color: #f2e404;
  }
  10.53%,
  15.78% {
    background-color: var(--loading-art);
  }
  15.79%,
  21.04% {
    background-color: #f2e404;
  }
  21.05%,
  94.73% {
    background-color: var(--loading-art);
  }
  94.74%,
  100% {
    background-color: #fff;
  }
}

/* Figma Loading (1920): 1064x67 white wordmark, 100px gap, 584x6 bar,
   centered as a group. #pajeroLoading in the selectors outranks the
   #pajeroLoading rules the runtime injects into <head>. */
.pajero-config #pajeroLoading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(45px, 2.34vw);
}

.pajero-config #pajeroLoading .pajero-loading__logo {
  position: static;
  transform: none;
  width: min(726px, 37.81vw);
  height: auto;
  filter: none;
}

/* Red fill grows with progress inside the cold-grey track */
.pajero-config #pajeroLoading .pajero-loading__bar {
  position: static;
  transform: none;
  flex-shrink: 0;
  width: min(726px, 37.81vw);
  height: 10px;
  border-radius: 50px;
  background: #bfc2c4;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.pajero-loading__bar-fill {
  display: block;
  width: 2px;
  min-width: 2px;
  height: 2px;
  border-radius: 50px;
  background: var(--color_primaryRed, #ed0000);
  transition: width 0.3s ease-out;
}

/* Desktop: the footer no longer overlays the stage; the base offsets place
   the art/logo/bar group's midpoint 110px above center (tuned for the old
   overlaid footer), so shift each offset +110px to true-center the group.
   Sizes and internal spacing are unchanged. */
@media screen and (min-width: 768px) and (min-height: 501px) {
  .pajero-loading__art {
    top: calc(47.5% - 29px);
  }
}

@media screen and (max-width: 767px) {
  .pajero-loading__art {
    top: calc(50% - 78px);
    width: min(250px, 66.7vw);
  }

  /* Same proportions as desktop, scaled up to stay legible on phones */
  .pajero-config #pajeroLoading {
    gap: 4.96vw;
  }

  .pajero-config #pajeroLoading .pajero-loading__logo {
    width: 80vw;
  }

  .pajero-config #pajeroLoading .pajero-loading__bar {
    width: 80vw;
  }
}

/* ============================================================
   Mobile landscape (phones, height <= 500px): desktop-style
   right rail + right-side panel, theme toggle top-left like
   portrait mobile. Must stay last in the file to win the
   cascade over both the portrait block and desktop rules.
   ============================================================ */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .pajero-grade-note {
    /* Clear the 120px panel, its 44px close button and their gaps. */
    --note-right: 204px;
    bottom: 16px;
    padding: 8px 12px;
  }

  /* Theme toggle: top-left, portrait-mobile sizing */
  .pajero-theme-toggle {
    left: 16px;
    top: 16px;
    bottom: auto;
    transform: none;
  }

  .theme-btn,
  .pajero-landscape-toggle {
    width: 58px;
    height: 46px;
  }

  .theme-btn__icon {
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
  }

  /* Right rail: desktop stack, scaled to short viewports */
  .viewer-tools-sp {
    display: none;
  }

  .viewer-tools {
    --menu-btn-width: 76px;
    /* Stage is 100vh - car_header(40) - conversion(80); fit 4 buttons plus
       12px top pad, 3 gaps and 12px bottom clearance inside it */
    --menu-btn-height: clamp(38px, calc((100vh - 168px) / 4), 62px);
    --menu-btn-gap: 8px;
    /* Must be a length: base rules compute icon px sizes as unit * N */
    --menu-icon-unit: 0.55px;
    display: flex;
    right: 16px;
  }

  .pajero-stage {
    --menu-top-padding: 12px;
  }

  /* Uniform icon boxes so the labels align across the rail; the masks
     keep their own proportions via mask-size: contain. Scaled off the
     button height (30px at the 62px design height) for short viewports */
  .viewer-tools .tool-btn__icon--body,
  .viewer-tools .tool-btn__icon--grade,
  .viewer-tools .tool-btn__icon--interior,
  .viewer-tools .tool-btn__icon--animation {
    width: calc(var(--menu-btn-height) * 0.48);
    height: calc(var(--menu-btn-height) * 0.48);
  }

  /* No vertical room in the height-scaled rail buttons; the lit
     is-active style carries the on/off state here */
  .viewer-tools .tool-btn__state {
    display: none;
  }

  /* Panel: right-side card (desktop pattern), arrow toggle */
  .viewer-panel-toggle {
    display: flex;
    right: calc(16px + 120px + 12px);
    top: var(--menu-top-padding);
    --toggle-size: 44px;
  }

  .viewer-panel {
    --panel-width: 120px;
    left: auto;
    right: 16px;
    top: var(--menu-top-padding);
    bottom: auto;
    width: 120px;
    /* Keep the card inside the stage (100vh - 120px chrome - 2x16px) */
    max-height: calc(100vh - 152px);
    padding: 12px 12px 16px;
  }

  .viewer-panel__close {
    display: none;
  }

  .panel-head {
    padding-right: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(18, 18, 18, 0.25);
    margin-bottom: 14px;
  }

  .panel-head__icon {
    width: 22px;
    height: 22px;
  }

  .panel-head__title {
    font-size: 13px;
    line-height: 18px;
  }

  /* Swatches: vertical desktop layout, panel scrolls */
  .swatch-slider {
    display: contents;
  }

  .swatch-slider .swatch-group + .swatch-group {
    margin-top: 16px;
  }

  .swatch-slider .swatch-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-rows: none;
    /* Re-declare at (0,2,0): the portrait carousel sets
       grid-template-columns: none at the same specificity */
    grid-template-columns: repeat(2, 40px);
    justify-content: space-between;
    gap: 10px 12px;
  }

  .swatch-grid--two,
  .swatch-grid--mono {
    grid-template-columns: repeat(2, 40px);
  }

  .swatch-slider .swatch {
    width: 40px;
    height: 40px;
  }

  .swatch-group h3 {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 6px;
  }

  /* Grade / animation: compact vertical stacks */
  .grade-group,
  .animation-group {
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 0;
  }

  .grade-action,
  .animation-action {
    min-height: 0;
    width: 80px;
    height: 80px;
    gap: 4px;
  }

  .grade-action__icon {
    width: 36px;
    height: 36px;
  }

  .animation-action__icon {
    height: 26px;
  }

  .animation-action__icon--door,
  .animation-action__icon--headlight,
  .animation-action__icon--hood {
    width: 48px;
  }

  .grade-action__text,
  .animation-action__text {
    font-size: 13px;
    line-height: 18px;
  }

  .interior-grade {
    min-height: 40px;
    font-size: 13px;
  }

  .pc-only {
    display: none !important;
  }

  /* Loading screen: compact vertical rhythm for short viewports */
  .pajero-loading__art {
    top: calc(50% - 58px);
    width: min(219px, 23.4vw);
  }

  /* Short landscape phones: back to the desktop vw proportions */
  .pajero-config #pajeroLoading {
    gap: 2.34vw;
  }

  .pajero-config #pajeroLoading .pajero-loading__logo {
    width: 37.81vw;
  }

  .pajero-config #pajeroLoading .pajero-loading__bar {
    width: 37.81vw;
  }
}

/* Very short landscape (< 315px): the 4-button rail no longer fits the
   stage, so wrap it into a 2 x 2 grid. Must follow the landscape block. */
@media screen and (orientation: landscape) and (max-height: 314px) {
  .viewer-tools {
    /* Stage is 100vh - 120px chrome; fit 2 rows plus 12px top pad,
       one gap and 12px bottom clearance */
    --menu-btn-height: clamp(30px, calc((100vh - 152px) / 2), 62px);
    display: grid;
    grid-template-columns: repeat(2, var(--menu-btn-width));
    grid-auto-rows: var(--menu-btn-height);
    align-content: start;
  }
}
.car_topNoteArea {
  background: var(--color_primaryWhite);
}

@media print,
screen and (max-width: 767px) {
  .car_topNoteArea {
    color: #111;
  }
}