/* =====================================================================
   BAIC Iraq — X7 page (Phase 2 rebuild of baicglobal.com/models/30)
   Values are ported 1:1 from the original Nuxt scoped CSS (inline SSR <style> blocks + client-injected
   mobile scopes). Each original component scope [data-v-xxxxxxxx] is replaced by ONE namespace class on the
   component root, so specificity is unchanged:
     page 8ae3ef59 -> #x7 / .model-30-wrap      HighLights        dbbe0677 -> .x7-ext
     HomeImageBanner c5ed87cc + SlideCarBanner   HighLightsTwo     bb1522ff -> .x7-hl2 (.x7-int / .x7-sun)
       9801d928 -> .x7-kv                        HighLightsThree   5edd1a26 -> .x7-intel
     TestDrive ca8b794c -> .x7-td                HighLightsTwoFour d6c43070 -> .x7-pt
     VehicleVideo a7fa1f9d + page video -> .x7-vid  Specifications 5dfccb0b -> .x7-spec
     SlideCarColor a6f91ef9 -> .x7-color         CarHover bf8307a2 -> .x7-hov
     Chart 4c2fa410 -> .x7-chart                 CarMore 03f06469 -> .car_more
     SlideCar 1290ce37 + SlideCarMobile e3442d41 -> .x7-gal      BackTop 817b9d6b -> .back_top
     Parameter c9b29d16 -> .x7-param
   Breakpoints (Phase 2, production-corrected): ONE layout/asset switch at 768/769 px
     (original scoped CSS layout switch = max-width:768px; original DOM/asset switch at 1200 px is moved to 768
      so 769-1199 px gets the coherent desktop layout + desktop assets instead of the original hybrid, Q3).
     Specifications keep the original 1200 px table/accordion switch.
   Lines marked [FIX] are deliberate production corrections (see notes/X7_PHASE2_IMPLEMENTATION.md §6).
   ===================================================================== */

/* ---------- Base (Tailwind preflight + normalize + global site CSS as shipped; zero specificity) ---------- */
:where(#x7) *,:where(#x7) :after,:where(#x7) :before{border:0 solid #e5e7eb;box-sizing:border-box}
:where(#x7) h1,:where(#x7) h2,:where(#x7) h3,:where(#x7) h4,:where(#x7) h5,:where(#x7) h6{font-size:inherit;font-weight:inherit;margin:0}
:where(#x7) a{color:inherit;text-decoration:inherit}
:where(#x7) p,:where(#x7) figure{margin:0}
:where(#x7) img,:where(#x7) svg,:where(#x7) video,:where(#x7) canvas{display:block;vertical-align:middle}
:where(#x7) img,:where(#x7) video{height:auto;max-width:100%}
:where(#x7) img{border-style:none}
:where(#x7) table{border-collapse:collapse;border-color:inherit;text-indent:0}
:where(#x7) button,:where(#x7) select{font:inherit;color:inherit;margin:0}
:where(#x7) button{background-color:transparent;background-image:none;cursor:pointer;line-height:inherit;padding:0}
#x7 [hidden]{display:none!important}
#x7{color:#000;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}
#x7 picture{display:contents}                       /* <picture> is transparent to the ported selectors */
.x7-sr{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

/* ---------- Branch switch (original MediaQuery md=1200 + destroyOnHide -> one switch at 768/769) [FIX Q3] ---------- */
.x7-m{display:none!important}
@media (max-width:768px){.x7-pc{display:none!important}.x7-m{display:block!important}}

/* ---------- "wow" reveal directive (DC1s4517.js + inline style 1) ---------- */
.wow-await-animate{opacity:0;transform:translateY(150px);transition:opacity .6s ease-out,transform .6s ease-out}
.wow-animate{opacity:1;transform:translateY(0)}

/* ---------- Page (data-v-8ae3ef59) ---------- */
#x7.model-30-wrap{overflow-x:hidden;width:100%}
#x7 .heig_box{height:100vh;width:100vw}
#x7 .heig{align-items:center;background:#f0f0f0;color:#333;direction:ltr;display:flex;font-size:2rem;justify-content:center;min-height:100vh}
#x7 .video-box{line-height:0;position:relative}
#x7 .video-box img{width:100%}
#x7 .video-box .icon-wrap{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
#x7 .min_height{margin-bottom:1vw}
#x7 .swiper_kv{height:100vh;position:relative}
#x7 p{margin:0!important}
/* original ".car_highlights_max .hover_content[data-v-8ae3ef59]{width:40%}" and ".pin-spacer" never match -> not ported (S2/S3) */

/* ---------- Hero KV (HomeImageBanner c5ed87cc >=769; SlideCarBanner 9801d928 <=768) ---------- */
/* [FIX Q1] the mobile banner no longer sits inside a flex-centred ".heig": it is a normal block, so Swiper
   measures the full viewport width at init (original: 0 px until kv*_m.jpg loaded). */
.x7-kv.swiper{height:100vh;overflow:hidden;width:100%}
.x7-kv .swiper-slide>div{height:100%}
.x7-kv .swiper-slide .zoom{transform:scale(1)}
.x7-kv .swiper-slide-active .zoom,.x7-kv .swiper-slide-duplicate-active .zoom{transform:scale(1.03);transition:6s linear}
.x7-kv .image{height:100%;object-fit:cover;width:100%}
.x7-kv .swiper-pagination-bullet-custom{background-color:#fff;border-radius:0;height:2px;opacity:.3;transition:.3s;width:30px}
.x7-kv .swiper-pagination-bullet-custom.swiper-pagination-bullet-active{opacity:1;transition:.3s}
.x7-kv .swiper-button-next,.x7-kv .swiper-button-prev{display:none}
@media (max-width:768px){
  /* keep the original geometry: hero box at the header bottom, the banner 8px lower (margin not collapsed) */
  #x7 .swiper_kv{display:flow-root}
  .x7-kv.swiper{background:url(/assets/x7-global/images/meitu_bg.jpg) 0 0/100% 100% no-repeat;direction:ltr;margin:8px 0 0;--swiper-navigation-size:20px}
  .x7-kv .swiper-slide{width:100%}
  .x7-kv .swiper-slide .zoom,.x7-kv .swiper-slide-active .zoom,.x7-kv .swiper-slide-duplicate-active .zoom{transform:none;transition:none}
  .x7-kv .swiper-pagination{display:none}
  .x7-kv .swiper-button-next,.x7-kv .swiper-button-prev{background-color:transparent;background-image:none;background-size:150%;border-radius:100%;display:flex;height:30px;margin-top:-25px;top:45%;width:30px}
  .x7-kv .swiper-button-next:after,.x7-kv .swiper-button-prev:after{display:none}
  .x7-kv .swiper-button-next{right:5%}
  .x7-kv .swiper-button-prev{left:5%}
}

/* ---------- Hero overlay: title art + Test Drive / View VR (TestDrive data-v-ca8b794c) ---------- */
.x7-td .test_drive_pc{color:#fff;left:3vw;position:absolute;top:58vh;width:54vw;z-index:4}
.x7-td .layout-ar{direction:rtl}
.x7-td .test_drive_pc .my_btn_test{border-radius:2.5vw;font-size:1.1vw;height:2.5vw;line-height:2.5vw;margin-left:1vw;padding:0 2vw}
.x7-td .test_drive_pc .my_btn_test:hover{background-color:#fff3}
.x7-td .test_drive_mobile{align-items:center;color:#fff;display:flex;flex-direction:column;font-size:8vw;justify-content:center;left:0;position:absolute;top:13vh;width:100%;z-index:1}
.x7-td .test_drive_pc .car_title{font-size:5vw;font-style:italic;letter-spacing:.8vw}
.x7-td .test_drive_pc .car_title img{width:60%}
.x7-td .test_drive_mobile .car_title{display:flex;font-size:7vw;justify-content:center}
.x7-td .test_drive_mobile .car_title img{width:80%}
.x7-td .car_title{text-shadow:.5vw .5vw 8px #000}
.x7-td .my_btn_test{border:1px solid #fff;color:#fff;display:inline-block;letter-spacing:.1vw;text-align:center;transition:all .5s}
.x7-td .test_drive_mobile .my_btn_test{border-radius:8vw;font-size:3vw;height:8vw;line-height:8vw;margin-right:3vw;margin-top:5vw;padding:0 5vw}
/* [FIX Q2] the overlay no longer swallows swipes / arrow taps on the hero; only its buttons take pointer input */
.x7-td .test_drive_pc,.x7-td .test_drive_mobile{pointer-events:none}
.x7-td .my_btn_test{pointer-events:auto}

/* ---------- Film (page video-box + VehicleVideo a7fa1f9d) ---------- */
/* [FIX Q8] stable geometry: the box keeps the cover's 1920x804 ratio before and after playback; the 16:9 film
   (letterboxed to the same picture area) fills it with object-fit:cover, so nothing below moves. */
.x7-vid.video-box{aspect-ratio:1920/804;background-color:#000;overflow:hidden;width:100%}
.x7-vid .cover-image{cursor:pointer;display:block;height:100%;object-fit:cover;width:100%}
.x7-vid video{background-color:#000;display:block;height:100%;inset:0;object-fit:cover;position:absolute;width:100%}
.x7-vid .icon-wrap{cursor:pointer;z-index:2}
.x7-vid .icon-wrap img{width:auto}
@media (max-width:768px){.x7-vid .icon-wrap img{height:40px;width:40px}}

/* ---------- Colour turntable (SlideCarColor data-v-a6f91ef9) ---------- */
.x7-color.car_color_box{direction:ltr;height:56.6vw;overflow:hidden;position:relative;z-index:1}
.x7-color .turntable{left:10vw;position:absolute;top:5vw;z-index:9}
.x7-color .car{overflow:hidden;position:relative}
.x7-color .car>div img{max-width:none;width:101%}
.x7-color .car .car_swiper{bottom:4.5vw;height:33vw;left:50%;max-height:50vw;overflow:hidden!important;position:absolute;transform:translate(-48%);width:60%}
.x7-color .car .car_swiper img{max-width:none;width:100%}
.x7-color .open_icon{cursor:pointer;left:5vw;position:absolute;top:5vw;width:5vw}
.x7-color .open_icon img{width:100%}
@media (max-width:768px){
  .x7-color.car_color_box{height:auto}
  .x7-color .open_icon{width:10vw}
  .x7-color .open_icon,.x7-color .turntable{left:50%;transform:translate(-50%)}
  .x7-color .car .car_swiper{bottom:21.5vw;width:66vw}
}
/* ---------- Colour ring (Chart data-v-4c2fa410; ECharts doughnut re-drawn as SVG) ---------- */
.x7-chart .close_icon{cursor:pointer;inset:0;margin:auto;position:absolute;width:5vw}
.x7-chart .close_icon{height:5vw}                     /* <button> wrapper: square like the 70x70 close.png it holds */
.x7-chart .close_icon img{width:100%}
.x7-chart .chart{height:15vw;width:15vw}
.x7-chart .chart svg{display:block;height:100%;overflow:visible;width:100%}
.x7-chart .chart path{cursor:pointer}
.x7-chart .chart path[data-name="spacing"]{cursor:default}
@media (max-width:768px){.x7-chart .chart{height:40vw;width:40vw}}

/* ---------- Gallery (SlideCar 1290ce37 >=769 inside page .heig/.heig_box; SlideCarMobile e3442d41 <=768) ---------- */
.x7-gal.index-section{background:url(/assets/x7-global/images/meitu_bg.jpg) no-repeat 0 0;background-size:100% 100%;margin:0;position:relative;z-index:9}
.x7-gal .swiper-button-next,.x7-gal .swiper-button-prev{background-color:transparent;background-image:none;background-size:150%;border-radius:100%;height:50px;margin-top:-25px;top:45%;width:50px}
.x7-gal .swiper-button-next:after,.x7-gal .swiper-button-prev:after{display:none}
.x7-gal .swiper-button-next{right:5%}
.x7-gal .swiper-button-prev{left:5%}
.x7-gal .car-slide,.x7-gal .car-slide img{height:100vh;width:100%}
.x7-gal .car-slide img{object-fit:cover}
@media (max-width:768px){
  #x7 .x7-galwrap.heig{background:none;display:block;min-height:0}
  #x7 .x7-galwrap .heig_box{height:auto;width:auto}
  .x7-gal.index-section{direction:ltr;z-index:auto}
  .x7-gal .car-slide{height:auto;width:100%}
  .x7-gal .car-slide img{display:inline-block;height:100%;object-fit:cover;width:100%}
  .x7-gal .swiper-button-next,.x7-gal .swiper-button-prev{height:30px;width:30px}
}

/* ---------- Key stats (Parameter data-v-c9b29d16) ---------- */
.x7-param.car_parameter{position:relative;z-index:1}
.x7-param.car_parameter img{width:100%}
.x7-param .parameter_data{align-items:center;bottom:3.125vw;display:flex;height:6.56vw;justify-content:center;left:0;position:absolute;width:100%}
.x7-param .parameter_l{align-items:center;display:flex}
.x7-param .parameter_list{border-right:1px solid #c0c3c5;color:#fff;display:flex;flex-direction:column;font-size:1.56vw;height:3.95vw;justify-content:space-between;padding:0 2vw;text-align:center}
.x7-param .parameter_list .list_t,.x7-param .parameter_list .list_t span{letter-spacing:.1vw}
.x7-param .parameter_list:last-child{border-right:none}
.x7-param .list_b{color:#fff9;font-size:1vw;font-weight:100;text-transform:uppercase}
@media (max-width:768px){
  .x7-param .parameter_data{bottom:3.5vw;flex-direction:column;height:100%;justify-content:flex-end}
  .x7-param .parameter_l{flex-wrap:wrap;margin-top:10vw}
  .x7-param .parameter_list{box-sizing:border-box;height:10vw;margin-bottom:5vw;padding:0;width:33.333%}
  .x7-param .list_t{font-size:4.5vw;white-space:nowrap}
  .x7-param .parameter_list:last-child,.x7-param .parameter_list:nth-child(3n){border:none}
  .x7-param .list_b{font-size:2.5vw}
}

/* ---------- Exterior (HighLights data-v-dbbe0677) ---------- */
.x7-ext .car-item{height:100%}
.x7-ext img{max-width:none;width:101%}
.x7-ext.car_highlights{margin-top:1vw;position:relative;z-index:1}
.x7-ext .car_highlights_max{margin:1vw 0;overflow:hidden;position:relative}
.x7-ext .car_highlights_max img{width:100%}
.x7-ext .car_highlights_open{display:flex;height:53.9vw;justify-content:space-between;margin:0 auto;overflow:hidden;transition:all 1s;width:95%}
.x7-ext .highlights_left{position:relative}
.x7-ext .highlights_right{display:flex;flex:1;flex-direction:column;margin-left:1vw}
.x7-ext .highlights_t{box-sizing:border-box;display:flex;justify-content:space-between;padding-bottom:1vw}
.x7-ext .highlights_left>div{height:53.9vw;width:100%}
.x7-ext .highlights_left img{height:100%;object-fit:cover;width:101.1%}
.x7-ext .highlights_b{flex:1;position:relative}
.x7-ext .highlights_b>div{height:100%}
.x7-ext .highlights_b>div>img,.x7-ext .highlights_b>div>picture>img{height:100%;object-fit:cover}
.x7-ext .highlights_t>div{box-sizing:border-box;flex:1;position:relative}
.x7-ext .highlights_t>div:last-child{margin-left:1vw}
.x7-ext .car_highlights_item img,.x7-ext .car_highlights_max img,.x7-ext .highlights_b img,.x7-ext .highlights_left img,.x7-ext .highlights_t img{transition:all .4s}
.x7-ext .car_highlights_item:hover img,.x7-ext .car_highlights_max:hover img,.x7-ext .highlights_b:hover img,.x7-ext .highlights_left:hover img,.x7-ext .highlights_t_l:hover img,.x7-ext .highlights_t_r:hover img{transform:scale(1.1)}
.x7-ext .car_highlights_item,.x7-ext .car_highlights_max,.x7-ext .highlights_b>div,.x7-ext .highlights_left,.x7-ext .highlights_t_l,.x7-ext .highlights_t_r{overflow:hidden}
@media (max-width:768px){
  .x7-ext .car_highlights_open{flex-direction:column!important;height:auto;width:100%}
  .x7-ext .highlights_left,.x7-ext .highlights_right{margin-bottom:1vw;width:100%}
  .x7-ext .car_highlights_max{margin-bottom:1vw}
  .x7-ext .highlights_left>div{height:auto}
  .x7-ext .highlights_t{display:block}
  .x7-ext .highlights_t_l{margin-bottom:1vw}
  .x7-ext .highlights_t>div:last-child{margin-left:0}
  .x7-ext .highlights_right,.x7-ext .highlights_t>div{margin-left:0}
  .x7-ext .car_highlights_item:hover img,.x7-ext .car_highlights_max:hover img,.x7-ext .highlights_b:hover img,.x7-ext .highlights_left:hover img,.x7-ext .highlights_t_l:hover img,.x7-ext .highlights_t_r:hover img{transform:scale(1)}
}

/* ---------- Interior + Panoramic Sunroof (HighLightsTwo data-v-bb1522ff) ---------- */
.x7-hl2 img{max-width:none;width:101%}
.x7-hl2.car_highlights{position:relative;z-index:1}
.x7-hl2 .car_highlights_max{margin-bottom:1vw;overflow:hidden;position:relative}
.x7-hl2 .car_highlights_max .hover_content,.x7-hl2 .car_highlights_max .hover_title{padding-left:2.5%!important;padding-right:2.5%!important}
.x7-hl2 .car_highlights_max img,.x7-hl2 .car_highlights_max_2 img{width:100%}
.x7-hl2 .car_highlights_max_2{display:flex;overflow:hidden;position:relative}
.x7-hl2 .car_highlights_open{display:flex;flex-direction:column;justify-content:space-between;margin:0 auto;overflow:hidden;position:relative;transition:all 1s;width:95%}
.x7-hl2 .car_highlights_items{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}
.x7-hl2 .car_highlights_item{box-sizing:border-box;margin-bottom:1vw;overflow:hidden;position:relative;width:32.66667%}
.x7-hl2 .car_highlights_item>div{overflow:hidden}
.x7-hl2 .car_highlights_item img,.x7-hl2 .car_highlights_max_2 img{transition:all .4s}
.x7-hl2 .car_highlights_item:hover img,.x7-hl2 .car_highlights_max_2:hover img{transform:scale(1.1)}
.x7-hl2 .car_highlights_item:nth-child(4){margin-bottom:.2vw;width:66.3%}
.x7-hl2 .car_highlights_item:nth-child(6){bottom:-.9vw;position:absolute;right:0}
.x7-hl2 .car_highlights_item:nth-child(5){height:17.1vw}
/* Q13 (Phase 1 re-measured): the 6th tile is placed against .car_highlights_open and its own margin keeps it
   inside; what the original 54vw cap actually trimmed was ~6px (bottom 2px of tile 4 + row margins at 1920).
   With the deterministic expanded state (max-height:none) everything is shown, so no extra rule is needed. */
@media (max-width:768px){
  .x7-hl2 .car_highlights_item{height:auto;position:relative!important}
  .x7-hl2 .car_highlights_open{flex-direction:column;width:100%}
  .x7-hl2 .car_highlights_items{flex-direction:column!important}
  .x7-hl2 .car_highlights_item{margin-bottom:2px;margin-left:0!important;max-width:100%}
  .x7-hl2 .car_highlights_item:nth-child(4){margin-bottom:1vw;width:100%}
  .x7-hl2 .car_highlights_item:nth-child(5){height:auto}
  .x7-hl2 .car_highlights_item:hover img,.x7-hl2 .car_highlights_max:hover img,.x7-hl2 .car_highlights_max_2:hover img{transform:scale(1)}
  .x7-hl2 .car_highlights_item{width:100%}
}
.x7-hl2 .car_highlights_item{margin-left:0;margin-right:0}
.x7-hl2 .car_highlights_max .hover_box:before{background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.5))!important;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:all .4s;width:100%}
.x7-hl2 .car_highlights_max .hover_box:hover:before{opacity:1}
.x7-hl2 .car_highlights_max .hover_box:hover{background-color:transparent!important}
.x7-hl2 .car_highlights_max .hover_title{font-size:2vw!important}

/* ---------- Intelligence (HighLightsThree data-v-5edd1a26) ---------- */
.x7-intel img{max-width:none;width:101%}
.x7-intel.car_highlights{position:relative;z-index:1}
.x7-intel .car_highlights_max{margin-bottom:1vw;overflow:hidden;position:relative}
/* original also sets "max-height:0" here (always overridden inline by the SSR value); the open/closed state is
   now owned by the CarMore state machine in x7.js [FIX Q5] */
.x7-intel .car_highlights_open{display:flex;flex-direction:column;justify-content:space-between;margin:0 auto;overflow:hidden;transition:all 1s;width:95%}
.x7-intel .car_highlights_open>div{display:flex}
.x7-intel .car_highlights_open>div:last-child{flex-direction:column}
.x7-intel .highlights_left{margin-bottom:1vw;position:relative;width:33%}
.x7-intel .highlights_left img,.x7-intel .highlights_left>div{height:100%;width:100%}
.x7-intel .highlights_left img{object-fit:cover}
.x7-intel .highlights_right{display:flex;flex:1;flex-direction:column;margin-left:1vw}
.x7-intel .highlights_b,.x7-intel .highlights_t{box-sizing:border-box;display:flex;flex:1;justify-content:space-between;margin-bottom:1vw}
.x7-intel .highlights_b>div,.x7-intel .highlights_t>div{flex:1;position:relative}
/* original ".highlights_t>div div[data-v]" only reaches the cell's own two child divs (MediaQuery + CarHover roots) */
.x7-intel .highlights_b>div>div,.x7-intel .highlights_b>div>div img,.x7-intel .highlights_t>div>div,.x7-intel .highlights_t>div>div img{height:100%}
.x7-intel .highlights_b>div:last-child,.x7-intel .highlights_t>div:last-child{margin-left:1vw}
.x7-intel .car_highlights_items{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}
.x7-intel .car_highlights_item{position:relative;width:calc(50% - .5vw)}
.x7-intel .car_highlights_max_2{margin-top:0!important}
.x7-intel .car_highlights_item img,.x7-intel .car_highlights_max_2 img,.x7-intel .highlights_b img,.x7-intel .highlights_left img,.x7-intel .highlights_t img{transition:all .4s}
.x7-intel .car_highlights_item:hover img,.x7-intel .car_highlights_max_2:hover img,.x7-intel .highlights_b:hover img,.x7-intel .highlights_left:hover img,.x7-intel .highlights_t_l:hover img,.x7-intel .highlights_t_r:hover img{transform:scale(1.1)}
.x7-intel .car_highlights_item,.x7-intel .car_highlights_max,.x7-intel .highlights_b>div,.x7-intel .highlights_left,.x7-intel .highlights_t .highlights_t_l>div,.x7-intel .highlights_t .highlights_t_r>div,.x7-intel .highlights_t_l,.x7-intel .highlights_t_r{overflow:hidden}
@media (max-width:768px){
  .x7-intel .car_highlights_open{width:100%}
  .x7-intel .car_highlights_items,.x7-intel .car_highlights_open{flex-direction:column!important}
  .x7-intel .car_highlights_open>div,.x7-intel .highlights_b{flex-direction:column}
  .x7-intel .highlights_b>div:last-child,.x7-intel .highlights_t>div:last-child{margin-left:0}
  .x7-intel .highlights_right{margin-bottom:0!important;margin-left:0}
  .x7-intel .car_highlights_item{max-width:100%}
  .x7-intel .car_highlights_item,.x7-intel .highlights_left,.x7-intel .highlights_right{margin-bottom:2vw;width:100%}
  .x7-intel .highlights_t{display:block;margin-bottom:0}
  .x7-intel .car_highlights_max{margin-top:0}
  .x7-intel .highlights_b>div:last-child{margin-bottom:0}
  .x7-intel .highlights_t_l,.x7-intel .highlights_t_r{margin-bottom:2vw}
  .x7-intel .car_highlights_item:hover img,.x7-intel .car_highlights_max:hover img,.x7-intel .car_highlights_max_2:hover img,.x7-intel .highlights_b:hover img,.x7-intel .highlights_left:hover img,.x7-intel .highlights_t_l:hover img,.x7-intel .highlights_t_r:hover img{transform:scale(1)}
}
.x7-intel .car_highlights_max .hover_box:before{background-image:linear-gradient(to left bottom,transparent,rgba(0,0,0,.2))!important;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:all .4s;width:100%}
.x7-intel .car_highlights_max .hover_box:hover:before{opacity:1}
.x7-intel .car_highlights_max .hover_box:hover{background-color:transparent!important}
.x7-intel .car_highlights_max .hover_title{font-size:2vw!important}
.x7-intel .car_highlights_max .hover_content,.x7-intel .car_highlights_max .hover_title{padding-left:2.5%!important;padding-right:2.5%!important}

/* ---------- Powertrain (HighLightsTwoFour data-v-d6c43070) ---------- */
.x7-pt .car_highlights_max .hover_box:before{background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.5))!important;content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:all .4s;width:100%}
.x7-pt .car_highlights_max .hover_box:hover:before{opacity:1}
.x7-pt .car_highlights_max .hover_box:hover{background-color:transparent!important}
.x7-pt .car_highlights_max .hover_title{font-size:2vw!important}
.x7-pt img{max-width:none;width:101%}
.x7-pt.car_highlights{position:relative;z-index:1}
.x7-pt .car_highlights_max{margin:1vw 0;overflow:hidden;position:relative}
.x7-pt .car_highlights_max img{width:100%}
.x7-pt .car_highlights_open{display:flex;flex-direction:column;justify-content:space-between;margin:0 auto;overflow:hidden;transition:all 1s;width:95%}
.x7-pt .car_highlights_items{display:flex;justify-content:space-between;line-height:0;width:100%}
.x7-pt .car_highlights_item{box-sizing:border-box;height:100%;margin-bottom:1vw;overflow:hidden;position:relative;width:calc(50% - .5vw)}
/* [FIX] reserve the clip's 16:9 box before the (lazily loaded) video has metadata: no layout shift */
.x7-pt .car_highlights_item video{aspect-ratio:16/9;height:100%;object-fit:cover;width:100%}
.x7-pt .car_highlights_item img{transition:all .4s}
.x7-pt .car_highlights_item:hover img{transform:scale(1.1)}
@media (max-width:768px){
  .x7-pt .car_highlights_open{flex-direction:column;width:100%}
  .x7-pt .car_highlights_items{flex-direction:column!important}
  .x7-pt .car_highlights_item{display:flex;margin-left:0!important;max-width:100%;width:100%}
  .x7-pt .car_highlights_item:hover img,.x7-pt .car_highlights_max:hover img{transform:scale(1)}
  .x7-pt .car_highlights_item{margin-bottom:1.5vw;margin-left:0;margin-right:0}
}
.x7-pt .car_highlights_max .hover_content,.x7-pt .car_highlights_max .hover_title{padding-left:2.5%!important;padding-right:2.5%!important}
.x7-pt .car_highlights_open .hover_title,.x7-pt .car_highlights_open .hover_content{line-height:1.5}

/* ---------- Captions (CarHover data-v-bf8307a2): .hover_box >=769 (hover), .hover_mobile <=768 (tap) ---------- */
.x7-hov .hover_box{color:#fff;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:flex-end;left:0;position:absolute;top:0;transition:all .4s;width:100%}
.x7-hov .hover_box:hover{background-color:#00000080}
.x7-hov .hover_title{box-sizing:border-box;font-size:1.3vw;font-weight:700;padding:.5vw 1vw;text-transform:capitalize;transition:all .4s}
.x7-hov .hover_title p{margin:0!important}
.x7-hov .hover_content{box-sizing:border-box;font-size:1vw;max-height:0;opacity:.6;padding:0 1vw;transition:all .4s}
.x7-hov .hove_top:hover .hover_title{background:none;transform:translateY(-2vw)}
.x7-hov .hove_top:hover .hover_content{max-height:80%;transform:translateY(-2vw)}
.x7-hov .hover_mobile{background:linear-gradient(0deg,#000,transparent);bottom:0;box-sizing:border-box;color:#fff;cursor:pointer;height:auto;left:0;padding:2vw 3vw;position:absolute;width:100%}
.x7-hov .title{font-size:4vw;line-height:5vw}
.x7-hov .content{display:-webkit-box;font-size:3vw;-webkit-line-clamp:2;line-height:5vw;max-height:10vw;overflow:hidden;-webkit-box-orient:vertical;text-overflow:ellipsis;transition:all .4s}
.x7-hov .open_height{-webkit-line-clamp:unset}

/* ---------- CarMore expand/collapse control (data-v-03f06469) ---------- */
.car_more{bottom:0;color:#fff;cursor:pointer;flex-direction:column;left:50%;position:absolute;transform:translate(-50%);width:5vw;z-index:9}
.car_more,.car_more .more_top{align-items:center;display:flex;justify-content:center;transition:all .4s}
.car_more .more_top{background-color:#ffffffd9;border:0;cursor:pointer;height:3vw;margin-bottom:5px;padding:0;position:relative;width:3vw}
.car_more .more_top,.car_more .more_top:after{border-radius:50%;z-index:10}
.car_more .more_top:after{box-shadow:5px 5px 15px #000;content:"";height:100%;left:0;position:absolute;top:0;width:100%}
.car_more .more_top>img{animation:x7-shake-vertical-2 2s linear infinite alternate-reverse forwards;height:auto;max-width:100%;object-fit:fill;position:absolute;top:15%;transition:all .4s;width:50%}
.car_more .more_top .img_white{opacity:0}
.car_more .more_top>img:nth-child(2){top:36%}
.car_more .more_top>img:nth-child(4){top:34%}
.car_more.car_more_off{bottom:-3vw}
.car_more_off .more_top{background:#bfbfbf}
.car_more_off .more_top .img_40{opacity:0}
.car_more_off .more_top .img_white{opacity:1}
.car_more_off .more_top,.car_more_off .more_top:after{transform:rotate(180deg)}
.car_more .more_top:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:768px){
  .car_more.car_more{bottom:-6vw!important}
  .car_more .more_top{height:8vw;width:8vw}
  .car_more .more_top>img{width:50%}
}
@keyframes x7-shake-vertical-2{
  0%,to{transform:translateY(0)}
  10%,30%,50%,70%{transform:translateY(-.1vw)}
  20%,40%,60%{transform:translateY(.4vw)}
  80%{transform:translateY(.2vw)}
  90%{transform:translateY(-.2vw)}
}
/* [FIX Q4] each section paints above the one that follows it, so the CarMore circle that overhangs the next
   section is fully visible and fully clickable (original: next section covered ~57-70% of it). */
#x7 .x7-ext.car_highlights{z-index:5}
#x7 .x7-int.car_highlights{z-index:4}
#x7 .x7-intel.car_highlights{z-index:3}
#x7 .x7-pt.car_highlights{z-index:2}

/* ---------- Specifications (data-v-5dfccb0b): table >=1200, accordion <1200 (original switch kept) ---------- */
.x7-spec .spec-m{display:none}
@media (max-width:1199px){.x7-spec .spec-pc{display:none}.x7-spec .spec-m{display:block}}
.x7-spec .title{font-size:28px;font-weight:600}
.x7-spec .params-table{border-collapse:collapse;border-spacing:0;margin:0 auto 20px;width:80%}
.x7-spec .params-table td{padding:0}
.x7-spec .params-table .table_line:first-child .table_cell:first-child{max-width:25em;min-width:25em}
.x7-spec .params-table .table_cell{border:1px solid #c7c7c7;padding:6px 10px;text-align:center;width:25%}
.x7-spec .params-table .table_cell:first-child{border-left:none;border-right:1px solid #c7c7c7}
.x7-spec .params-table .table_cell:last-child{border-left:1px solid #c7c7c7;border-right:none}
.x7-spec .params-table .params-table__body .table_line.stripe-even{background-color:#e8e8ea}
.x7-spec .params-table .params-table__body .table_line_menu{background-color:#8894a3;border:none;color:#fff;cursor:pointer}
.x7-spec .params-table .params-table__body .table_line_menu .table_cell{font-weight:700;padding:5px 0;text-align:left}
.x7-spec .params-table .params-table__body .table_line_menu .table_cell .table_cell__menu{align-items:center;display:flex;flex-direction:row;min-height:24px}
.x7-spec .params-table .params-table__body .table_line_menu .table_cell .table_cell__menu .icon-plus-menu{margin:0 34px 0 20px;position:relative}
.x7-spec .params-table .params-table__body .table_line_menu .table_cell .table_cell__menu .icon-plus-menu.close:after{transform:rotate(90deg)}
.x7-spec .params-table .params-table__body .table_line_menu .table_cell .table_cell__menu .icon-plus-menu:after{background:#fff;content:"";height:1px;left:0;position:absolute;top:0;transition:transform .3s;width:14px}
.x7-spec .params-table .params-table__body .table_line_menu .table_cell .table_cell__menu .icon-plus-menu:before{background:#fff;content:"";height:1px;left:0;position:absolute;top:0;width:14px}
.x7-spec .params-table .params-table__footer,.x7-spec .params-table .params-table__header{background-color:#53586d;color:#fff}
.x7-spec .params-table .params-table__footer .table_cell,.x7-spec .params-table .params-table__header .table_cell{font-weight:700}
.x7-spec .params-table .table_line_menu:focus-visible{outline:2px solid #53586d;outline-offset:-2px}
.x7-spec .params-div{display:flex;flex-direction:column;margin-bottom:20px}
.x7-spec .params-div .params-div__select{align-items:center;background-color:#8894a3;display:flex;height:51px;padding:0 20% 0 15px}
.x7-spec .params-div .params-div__block{display:flex;flex-direction:column}
.x7-spec .params-div .params-div__block:nth-child(2) .params-div__line:nth-child(2n){background-color:transparent;border-bottom:1px solid #e8e8ea;border-top:1px solid #e8e8ea}
.x7-spec .params-div .params-div__block .params-div__menu{background-color:#8894a3;border-bottom:1px solid #fff;color:#fff;cursor:pointer}
.x7-spec .params-div .params-div__block .params-div__menu .params-div__value{position:relative;text-align:right}
.x7-spec .params-div .params-div__block .params-div__menu .params-div__value.close:after{transform:rotate(90deg)}
.x7-spec .params-div .params-div__block .params-div__menu .params-div__value:after{transition:transform .5s}
.x7-spec .params-div .params-div__block .params-div__menu .params-div__value:after,.x7-spec .params-div .params-div__block .params-div__menu .params-div__value:before{background:#fff;content:"";height:1px;left:-14px;position:absolute;right:0;top:0;width:14px;z-index:10}
.x7-spec .params-div .params-div__block .params-div__body{overflow:hidden;transition:all .4s ease-in-out}
.x7-spec .params-div .params-div__block .params-div__line{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;height:auto;min-height:51px;padding:5px 15px}
.x7-spec .params-div .params-div__block .params-div__line:nth-child(2n){background-color:#e8e8ea}
.x7-spec .params-div .params-div__block .params-div__line .params-div__name{flex:1}
.x7-spec .params-div .params-div__block .params-div__line .params-div__value{text-align:right}
.x7-spec .params-div .params-div__menu:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.x7-spec .params-table__title{font-weight:600;line-height:3.5;text-align:center}
.x7-spec .params-table__title_mobile{line-height:1.5;margin-bottom:30px}
.x7-spec .params-table__remark{margin:auto auto 10px;white-space:pre-line;width:80%}
.x7-spec .params-div__remark{margin-top:10px;padding:0 15px}   /* white-space:normal on the original (table remark: pre-line) */
/* Element Plus <el-select> (small) reproduced with a native <select> (keyboard + screen-reader support) */
.x7-spec .x7-trim{-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23a8abb2' d='M831.872 340.864 512 652.672 192.128 340.864a30.59 30.59 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.59 30.59 0 0 0-42.752 0z'/%3E%3C/svg%3E") no-repeat right 8px center/14px 14px;border-radius:4px;box-shadow:inset 0 0 0 1px #dcdfe6;color:#606266;cursor:pointer;font-size:14px;height:32px;line-height:32px;padding:0 30px 0 12px;width:100%}
.x7-spec .x7-trim:focus{box-shadow:inset 0 0 0 1px #d1291a;outline:none}
@media (max-width:1199px){
  .x7-spec .params-div .params-div__block .params-div__line{padding:5px .5em}
  .x7-spec .params-div .params-div__block .params-div__body .params-div__line:not(.params-div__menu){padding:0;position:relative}
  .x7-spec .params-div .params-div__block .params-div__body .params-div__line:not(.params-div__menu):after{background:#bfbfbf6b;content:"";height:100%;left:55%;position:absolute;top:0;transform:translate(-50%);width:1px}
  .x7-spec .params-div .params-div__block .params-div__body .params-div__line:not(.params-div__menu) .params-div__name{height:100%;padding:0 .5em;width:54%;word-break:break-all}
  .x7-spec .params-div .params-div__block .params-div__body .params-div__line:not(.params-div__menu) .params-div__value{height:100%;padding:0 .5em;width:45%}
}

/* ---------- Back to top (BackTop data-v-817b9d6b) ---------- */
.back_top{align-items:center;background-color:#fff6;border:0;border-radius:50%;bottom:80px;box-shadow:5px 5px 20px 5px #0000004d;cursor:pointer;display:flex;height:60px;justify-content:center;padding:0;position:fixed;right:20px;width:60px;z-index:99}
.back_top[hidden]{display:none}
.back_top .up_icon{animation:x7-pulsate-fwd .5s ease-in-out infinite both;width:50%}
@keyframes x7-pulsate-fwd{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}

/* ---------- 769-1199 px: the desktop design scales with the viewport (vw). [FIX Q3] Below 1200px the smallest
   vw-based labels would drop to 7-12px, so they get readable minimums in this range only (>=1200 is untouched). */
@media (min-width:769px) and (max-width:1199px){
  .x7-hov .hover_title{font-size:max(1.3vw,13px)}
  .x7-hov .hover_content{font-size:max(1vw,11px)}
  .x7-param .list_b{font-size:max(1vw,10px)}
  .x7-param .parameter_list{font-size:max(1.56vw,14px)}
  .x7-td .test_drive_pc .my_btn_test{font-size:max(1.1vw,12px);height:max(2.5vw,30px);line-height:max(2.5vw,30px)}
}

@media (prefers-reduced-motion:reduce){
  .wow-await-animate{transform:none;transition:opacity .6s ease-out}
  .x7-kv .swiper-slide-active .zoom,.x7-kv .swiper-slide-duplicate-active .zoom{transform:none;transition:none}
}