/* Model details share the dealership's teal and neutral machinery palette. */
#view-detail {
  width: min(91%, 1510px);
  padding-top: clamp(16px, 2vw, 32px);
}
#view-detail .sects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid #cddbd6;
}
#view-detail .sect {
  justify-content: center;
  min-height: 46px;
  height: auto;
  padding: 10px 5px;
  transform: none;
  background: transparent;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  color: #3b5450;
  box-shadow: none;
  text-align: center;
  font-size: clamp(.76rem, 1.45vw, 1.1rem);
  line-height: 1.2;
}
#view-detail .sect > span {
  display: block;
  transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
#view-detail .sect.on {
  color: #096c66;
  background: #eaf3f0;
  border-bottom-color: #087b73;
}
#view-detail .dbody { margin: clamp(14px, 2vw, 30px) 0; }
#view-detail .dbody:has(.model-overview) { min-height: 0; }
#view-detail .detail-nav button {
  min-height: 48px;
  padding: 8px;
  border: 1px solid #d0ddd8;
  border-radius: 4px;
  box-shadow: none;
  font-size: clamp(.76rem, 1.3vw, 1rem);
  line-height: 1.2;
}
#view-detail .detail-nav button.primary { border-color: #087b7e; }
.model-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  background: #0c3733;
}
.model-visual {
  display: grid;
  place-items: center;
  margin: 0;
  min-width: 0;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  background: #e5eeea;
}
.model-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.model-intro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 52px);
  color: #fff;
}
.model-context {
  color: #bbddd1;
  font-size: clamp(.85rem, 1.25vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
}
.model-intro h1 {
  margin: .12em 0 .15em;
  color: #fff;
  font-size: clamp(2.3rem, 5.8vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.model-product-name {
  font-size: clamp(1rem, 1.65vw, 1.4rem);
  line-height: 1.25;
  font-weight: 650;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.model-summary {
  max-width: 58ch;
  color: #dceee8;
  font-size: clamp(.88rem, 1.35vw, 1.15rem);
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.model-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.4rem), 1fr));
  gap: 12px 16px;
  border-top: 1px solid #427065;
  margin: clamp(18px, 2.4vw, 36px) 0 0;
  padding: clamp(14px, 1.65vw, 22px) 0 0;
}
.model-metric { min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 5px; }
.model-metric dt { color: #c2ded6; font-size: .77rem; line-height: 1.25; overflow-wrap: anywhere; }
.model-metric dd {
  color: #fff;
  font-weight: 750;
  font-size: clamp(1.06rem, 2vw, 1.8rem);
  line-height: 1.13;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.model-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.model-action {
  min-height: 44px;
  border: 1px solid #6e998b;
  border-radius: 4px;
  padding: 8px 14px;
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}
.model-action.primary { color: #0c3733; background: #d8eee4; border-color: #d8eee4; }
.model-action:hover { border-color: #fff; }
.model-action:focus-visible, #view-detail .sect:focus-visible { outline: 2px solid #30a69d; outline-offset: 3px; }
.model-action .play-mark { display: inline-block; margin-right: 6px; }
.model-empty { min-height: 0; padding: clamp(22px, 4vw, 52px); background: #fff; color: #38534e; }
.model-empty .model-action { margin-top: 14px; color: #0c3733; }
@media (max-width: 760px) {
  #view-detail { width: 94%; }
  .model-overview { grid-template-columns: minmax(0, 1fr); }
  .model-visual { min-height: 0; aspect-ratio: 16 / 9; }
  .model-intro { padding: 20px; }
  .model-intro h1 { font-size: clamp(2.15rem, 9vw, 4rem); }
  .model-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.25rem), 1fr)); }
}

/* Bright exhibition hall: grounded machinery, no pedestal. */
.model-visual { isolation:isolate; background:linear-gradient(105deg,#dfe8e5 0%,#f9fcfb 58%,#d5e0dd 100%); }
.model-visual::before { content:"";position:absolute;z-index:0;inset:0 0 28%;background:linear-gradient(105deg,transparent 0 23%,rgba(255,255,255,.55) 23.2% 77%,transparent 77.2%);pointer-events:none; }
.model-visual::after { content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:28%;border-top:1px solid #b9ccc6;background:linear-gradient(158deg,transparent 47.8%,rgba(115,146,138,.12) 48%,transparent 48.3%),linear-gradient(22deg,transparent 58%,rgba(115,146,138,.1) 58.2%,transparent 58.5%),linear-gradient(#f5f9f7,#dce8e5);pointer-events:none; }
.model-visual img { z-index:2; }
.model-overview.is-plain .model-visual { background:#e5eeea; }
.model-overview.is-plain .model-visual::before,.model-overview.is-plain .model-visual::after { display:none; }

/* Full-width showroom image above the approved dark information panel. */
.model-overview { display:block; }
.model-visual { min-height:0;aspect-ratio:16 / 9; }
.model-intro { min-height:330px;padding:clamp(25px,3vw,42px); }
.model-intro h1 { font-size:clamp(2.7rem,7vw,5.5rem); }
@media (max-width:760px) { .model-visual { aspect-ratio:4 / 3; } .model-intro { min-height:0; } }

/* Opaque field photos sit in a consistent framed bay inside the showroom. */
.model-overview.is-photo .model-visual img { position:relative;inset:auto;width:auto;height:auto;max-width:88%;max-height:82%;object-fit:contain;border:6px solid #fff;box-shadow:0 22px 42px rgba(20,54,49,.18); }