/* =====================================================================
   V3 shared: AI image placeholders and the "Choose your finish" configurator
   (home + product pages; not loaded by the compare page)
   ===================================================================== */

/* ---------- AI image placeholder compositions ---------- */
.ai { position: relative; overflow: hidden; background: #0A0A0B; }
.ai__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ai-tag { position: absolute; right: 12px; top: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed rgba(224,178,58,.7); border-radius: 999px; background: rgba(0,0,0,.65); font: 600 10px/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #E0B23A; pointer-events: none; }
.ai-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #E0A100; }
/* stage: a lit showroom plinth drawn in CSS, with the real brochure motorcycle on it */
.ai--stage { background: radial-gradient(ellipse 60% 55% at 50% 38%, #2B2A2C 0%, #141416 55%, #070708 100%); }
.ai__room { position: absolute; inset: 0; }
.ai__room span { position: absolute; top: 0; width: 2px; height: 46%; background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0)); box-shadow: 0 0 22px 4px rgba(255,255,255,.08); }
.ai__room span:nth-child(1) { left: 14%; } .ai__room span:nth-child(2) { left: 38%; } .ai__room span:nth-child(3) { left: 62%; } .ai__room span:nth-child(4) { left: 86%; }
.ai__room::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, rgba(204,0,0,0), rgba(204,0,0,.7) 50%, rgba(204,0,0,0)); }
.ai__room::after { content: ""; position: absolute; left: 50%; top: -10%; width: 70%; height: 90%; transform: translateX(-50%); background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 70%); }
.ai__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.03)), linear-gradient(to bottom, #0E0E10, #050506); border-top: 1px solid rgba(255,255,255,.06); }
.ai__bike { position: absolute; z-index: 2; left: 50%; bottom: 14%; width: 76%; transform: translateX(-50%); }
.ai__bikeimg { width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 52%, #000 62%, transparent 100%); }
.ai__bike::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2%; height: 10%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.7), rgba(0,0,0,0) 70%); z-index: -1; }
.ai--lineup .ai__bike { width: 46%; }
.ai--lineup .ai__bike--1 { left: 24%; bottom: 20%; transform: translateX(-50%) scale(.82); opacity: .9; }
.ai--lineup .ai__bike--2 { left: 50%; bottom: 13%; z-index: 3; }
.ai--lineup .ai__bike--3 { left: 76%; bottom: 20%; transform: translateX(-50%) scale(.82); opacity: .9; }

/* ---------- Choose your finish: configurator ---------- */
.cfg { --tint: #141516; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 0; background: var(--black); color: #fff; border: 1px solid var(--steel); }
.cfg__stage { position: relative; min-height: clamp(360px, 62vh, 640px); overflow: hidden; background: #0C0C0D; }
.cfg__light { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 46%, color-mix(in srgb, var(--tint) 55%, #2A2A2C) 0%, #0C0C0D 72%); opacity: .9; transition: background 1s var(--ease-out); }
.cfg__shot { position: absolute; inset: 0; display: grid; place-items: center; padding: 6% 6% 14%; opacity: 0; transform: scale(1.03); transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out); }
.cfg__shot.is-on { opacity: 1; transform: none; }
.cfg__img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(ellipse 55% 52% at 50% 50%, #000 66%, transparent 100%); mask-image: radial-gradient(ellipse 55% 52% at 50% 50%, #000 66%, transparent 100%); }
.cfg__shot--photo { padding: 0; }
.cfg__shot--photo .cfg__img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
.cfg__caption { position: absolute; left: clamp(18px, 2.4vw, 36px); bottom: clamp(16px, 2.4vh, 28px); z-index: 2; display: grid; gap: 4px; }
.cfg__caption span:first-child { font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.cfg__caption span:last-child { font: 500 clamp(26px, 1.8vw + 10px, 40px)/1 var(--f-display); font-stretch: 110%; text-transform: uppercase; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.cfg__panel { display: grid; align-content: start; gap: clamp(16px, 2.6vh, 24px); padding: clamp(22px, 3vh, 36px) clamp(20px, 2.2vw, 36px); border-left: 1px solid var(--steel); }
.cfg__label { font: 600 11px var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--metal); margin-bottom: 10px; }
.cfg__vtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cfg__vtab { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; min-height: 56px; border: 1px solid var(--steel); border-radius: var(--r); background: none; color: #fff; text-align: left; transition: border-color .3s, background-color .3s; }
.cfg__vtab span { font: 500 15px/1.1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.cfg__vtab small { font-size: 11px; color: var(--metal); }
.cfg__vtab:hover { border-color: #fff; }
.cfg__vtab[aria-selected="true"] { border-color: var(--red); background: rgba(204,0,0,.12); }
.cfg__minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cfg__mini { position: relative; display: grid; gap: 6px; padding: 6px 6px 10px; border: 1px solid var(--steel); border-radius: var(--r); background: var(--carbon); color: #fff; text-align: left; transition: border-color .3s, transform .4s var(--ease-out); }
.cfg__mini:hover { border-color: #8B9197; }
.cfg__mini[aria-checked="true"] { border-color: #fff; }
.cfg__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #1F1C1D; border-radius: 1px; }
.cfg__thumbimg { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease-out); }
.cfg__thumb--photo .cfg__thumbimg { object-fit: cover; }
.cfg__mini:hover .cfg__thumbimg { transform: scale(1.06); }
.cfg__chip { position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 3px rgba(255,255,255,.35); transition: transform .4s var(--ease-out), box-shadow .4s; }
.cfg__mini[aria-checked="true"] .cfg__chip { transform: scale(1.25); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 0 4px #fff; }
.cfg__mininame { font-size: 12px; line-height: 1.25; color: var(--mist); }
.cfg__mini[aria-checked="true"] .cfg__mininame { color: #fff; }
.cfg__sel { display: grid; gap: 8px; padding-top: clamp(14px, 2vh, 20px); border-top: 1px solid var(--steel); }
.cfg__sel .cfg__label { margin: 0; }
.cfg__selname { font: 500 clamp(22px, 1.2vw + 10px, 30px)/1.05 var(--f-display); font-stretch: 108%; text-transform: uppercase; }
.cfg__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cfg__meta dt { font: 600 10px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--metal); }
.cfg__meta dd { font-size: 14px; }
.cfg__line { font-size: 14px; color: var(--mist); }
.cfg__cta { gap: 10px 22px; }
.cfg__details { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); padding: clamp(24px, 3.4vh, 40px) clamp(18px, 2.4vw, 36px); border-top: 1px solid var(--steel); }
.cfg__facts { display: grid; gap: 0; border-top: 1px solid var(--steel); }
.cfg__facts li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--steel); font-size: 14px; }
.cfg__facts svg { width: 16px; height: 16px; color: #FF5A5A; flex: none; }
.cfg__dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cfg__dgrid li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.cfg__dgrid.is-swapping li { opacity: 0; transform: translateY(10px); }
.cfg__dgrid figure { display: grid; gap: 10px; }
.cfg__dgrid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: #1F1C1D; }
.cfg__dgrid figcaption { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--mist); }
.cfg__dgrid strong { font: 600 11px var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.cfg__fine { grid-column: 1 / -1; padding: 12px clamp(18px, 2.4vw, 36px); border-top: 1px solid var(--steel); font-size: 12px; color: var(--metal); }
@media (max-width: 1023px) {
  .cfg { grid-template-columns: minmax(0, 1fr); }
  .cfg__panel { border-left: 0; border-top: 1px solid var(--steel); }
  .cfg__stage { min-height: 0; aspect-ratio: 16 / 10; }
  .cfg__details { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .cfg__vtabs { grid-template-columns: minmax(0, 1fr); }
  .cfg__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg__dgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .cfg__shot, .cfg__dgrid li, .cfg__light { transition: none; } }