/* =====================================================================
   BAIC Iraq — BJ30 V2 page (Phase 2 rebuild of baicglobal.com/models/43, the dedicated B30 Nuxt page component)
   Values are ported 1:1 from the original scoped CSS captured in Phase 1 (SSR inline <style> blocks):
     page 5de8c80b -> #bj30           Color 8ebae5f1 / Chart a06415e7 -> .car_color_box     Swiper 76b0ba28 -> .exquisite-picture
     Type 6b8ff49c / Params 8e544b0c -> .vehicle-type, .vehicle-params-container
     SellPointImage 36ba9bd9 / SellPointText 27b811b6 / SellPointSlide 3d8d50c9 / Gear bff1785a -> .sell-point-wrap
     CarSide 4e150481 / CarSidePoint 3b18a80b -> .car-side-wrap     Configuration 636c198c -> .bj30-config
     CommonTestDrive 4afee959 -> .bj30-testdrive     Specifications 5dfccb0b (+ my_dialog) -> .bj30-spec / dialog.my_dialog
   BREAKPOINTS [FIX G1-G4, G10] — Global swaps desktop/portrait art at 1200 and mixes 1200 (inclusive) / 768 / 1400 / 980 rules.
     BJ30 V2:  >=1200  desktop  = Global's desktop rules exactly;
               769-1199 tablet  = Global's DESKTOP (landscape) art and composition + Global's own <=1200 small-screen typography
                                   where the desktop text would not fit (tabs, figures, selling-point text, slider arrows);
               <=768    phone   = Global's portrait art and its <=1200 / <=768 phone rules (layout bugs corrected).
     Global's "max-width:1200px" rules are applied at <=1199 so that 1200 is a clean desktop width (G3).
   Lines marked [FIX] are deliberate production corrections (notes/BJ30_V2_PHASE2_IMPLEMENTATION.md §12).
   Dead original rules are not ported (Phase 1 G14): gear video/buttons, light-runner keyframes, .describe-wrap, .main-title.
   ===================================================================== */

/* ---------- Base (Tailwind preflight + Global site CSS as shipped; zero specificity) ---------- */
:where(#bj30) *,:where(#bj30) :after,:where(#bj30) :before{border:0 solid #e5e7eb;box-sizing:border-box}
:where(#bj30) h1,:where(#bj30) h2,:where(#bj30) h3,:where(#bj30) p,:where(#bj30) dl,:where(#bj30) dd{font-size:inherit;font-weight:inherit;margin:0}
:where(#bj30) ul{list-style:none;margin:0;padding:0}
:where(#bj30) a{color:inherit;text-decoration:none}
:where(#bj30) img,:where(#bj30) svg,:where(#bj30) video{display:block;vertical-align:middle}
:where(#bj30) img{height:auto;max-width:100%;border-style:none}
:where(#bj30) table{border-collapse:collapse;border-color:inherit;text-indent:0}
:where(#bj30) button,:where(#bj30) select{font:inherit;color:inherit;margin:0;letter-spacing:inherit}
:where(#bj30) button{background-color:transparent;background-image:none;cursor:pointer;line-height:inherit;padding:0;text-transform:none}
#bj30 [hidden]{display:none!important}
#bj30,.bj30-spec{color:#000;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}
#bj30 .sr-only,.my_dialog .sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
#bj30 a:focus-visible,#bj30 button:focus-visible,#bj30 [role=radio]:focus-visible,.my_dialog button:focus-visible{outline:2px solid #d1291a;outline-offset:3px}

/* Global utility .btn / .secondary--btn-dark */
#bj30 .btn{background-color:#d1291a;border:1px solid #d1291a;border-radius:50px;color:#fff;cursor:pointer;display:inline-block;font-size:16px;line-height:normal;padding:10px 50px}
#bj30 .secondary--btn-dark{background-color:transparent;border:1px solid #000;color:#000}
#bj30 .secondary--btn-dark:hover{background-color:#d1291a;border:1px solid #d1291a;color:#fff}

/* ---------- Page (data-v-5de8c80b) ---------- */
#bj30.model-container{overflow-x:hidden;width:100%}
#bj30 img{width:100%}
#bj30 .section-top{margin-top:12px}
#bj30 .relative{position:relative}

/* 01 Hero */
#bj30 .kv-wrap{position:relative}
#bj30 .kv-wrap .btn-container{left:70%;position:absolute;top:52%;white-space:nowrap}   /* [FIX] nowrap: at 1200 px the two buttons would otherwise wrap onto two lines */
#bj30 .kv-wrap .btn{border-color:#fff;color:#fff;margin-right:15px}
#bj30 .kv-wrap .btn:hover{background:none}

/* 02 Video [FIX] the poster and the film share one fixed 1920:1072 box (Global: poster box 1072, then the 16:9 film resizes it) */
#bj30 .video-box{background:#000;line-height:0}
#bj30 .video-poster{aspect-ratio:1920/1072;display:block;width:100%}
#bj30 .video-box video{aspect-ratio:1920/1072;background:#000;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}

/* 03 Colours (data-v-8ebae5f1 + Chart a06415e7) — desktop geometry, used from 769 px up [FIX G4] */
#bj30 .car_color_box{direction:ltr;height:56.6vw;overflow:hidden;position:relative;z-index:0}
#bj30 .turntable{left:10vw;position:absolute;top:5vw;z-index:9}
#bj30 .car{overflow:hidden;position:relative}
#bj30 .car-bg img{max-width:none;width:101%}
#bj30 .car .car_swiper{bottom:4.5vw;height:33vw;left:50%;max-height:50vw;overflow:hidden;position:absolute;transform:translate(-48%);width:60%;z-index:1}
#bj30 .car .car_swiper .car-slide{inset:0;opacity:0;position:absolute;transition:opacity .3s}   /* Swiper fade crossFade, 300 ms */
#bj30 .car .car_swiper .car-slide.is-active{opacity:1}
#bj30 .car .car_swiper img{max-width:none;width:100%}
#bj30 .open_icon{cursor:pointer;left:5vw;position:absolute;top:5vw;width:5vw}
#bj30 .open_icon img{width:100%}
#bj30 .chart{height:15vw;overflow:visible;width:15vw}
#bj30 .chart [role=radio]{cursor:pointer;outline:none}
#bj30 .chart [role=radio]:focus-visible .seg{stroke:#d1291a;stroke-width:3}
#bj30 .close_icon{cursor:pointer;height:5vw;inset:0;margin:auto;position:absolute;width:5vw}

/* 04 Gallery (data-v-76b0ba28) */
#bj30 .exquisite-picture{margin:60px 0}
#bj30 .exquisite-picture .swiper-wrapper{padding-bottom:50px}
#bj30 .exquisite-picture .swiper-slide{opacity:.5;transition-timing-function:linear;width:1200px}
#bj30 .exquisite-picture .swiper-slide img{max-height:90vh;-o-object-fit:cover;object-fit:cover;width:100%}
#bj30 .exquisite-picture .swiper-slide.swiper-slide-active{opacity:1}
#bj30 .exquisite-picture .swiper-pagination-bullet-custom{background-color:#dcc5c5;border-radius:10px;height:5px;opacity:1;transition:.3s;width:20px}
#bj30 .exquisite-picture .swiper-pagination-bullet-custom.swiper-pagination-bullet-active{background:#8c1e1e;transition:.3s;width:50px}
#bj30 .exquisite-picture .swiper-pagination-bullet-custom:focus-visible{outline:2px solid #d1291a;outline-offset:3px}

/* 05 ICE / HEV (data-v-6b8ff49c) */
#bj30 .vehicle-details-container{position:relative}
#bj30 .vehicle-type .image-container img{max-height:100vh;-o-object-fit:cover;object-fit:cover;width:100%}
#bj30 .tabs-container{background-color:#0000004d;border-radius:30px;left:50%;position:absolute;top:5%;transform:translate(-50%);white-space:nowrap}
#bj30 .tabs-container .btn{background:none;border:none;border-radius:30px;color:#9c9a9a;font-size:22px;font-weight:600;padding:8px 50px;text-transform:uppercase}
#bj30 .tabs-container .active{background-color:#fff;color:#303030}
#bj30 .vehicle-type .params{bottom:5%;left:50%;position:absolute;transform:translate(-50%);white-space:nowrap;width:100%}

/* Figures (Params data-v-8e544b0c) */
#bj30 .vehicle-params-container{display:flex;justify-content:center;width:100%}
#bj30 .vehicle-params-list{display:flex;justify-content:space-around;width:64.8%}
#bj30 .params-item{color:#fff;display:flex;flex-direction:column;font-size:24px;line-height:1.5;text-align:center}
#bj30 .params-item .title{color:#fff;font-size:13px;text-transform:uppercase}
#bj30 .cross-country-params{bottom:5%;left:50%;position:absolute;transform:translate(-50%)}
#bj30 .cross-country-params .params-item{flex-direction:column-reverse}

/* 06-13 Selling points (36ba9bd9 / 27b811b6 / 3d8d50c9 / bff1785a) */
#bj30 .sell-point-wrap{margin:60px 0 12px}
#bj30 .sell-point{margin:12px auto 0;width:90%}
#bj30 .selling-point-slide img{width:100%}
#bj30 .selling-point-slide .image-container,#bj30 .selling-point-slide .swiper-slide{position:relative}
#bj30 .text-wrap{color:#636363;font-size:18px;margin:0 auto;width:78%}
#bj30 .text-wrap .title-list{display:flex;justify-content:center}
#bj30 .text-wrap .text-item{border-bottom:1px solid #ccc}
#bj30 .text-wrap .text-item>*{display:block;padding:18px 30px 10px;width:100%}   /* the original li padding, moved onto its heading/button */
#bj30 .text-wrap .text-item:last-child{margin-right:0}
#bj30 .text-wrap .text-cursor{cursor:pointer}
#bj30 .text-wrap .active{border-color:#000;color:#000;font-weight:500}
#bj30 .text-wrap .describe{padding:18px 0;text-align:center}
#bj30 .gear-lever-container .image-container{aspect-ratio:1920/1132;line-height:0;overflow:hidden;position:relative}
#bj30 .gear-lever-container .image-container img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}
/* sliders: arrows only below 1200 (Global: mobile-only container); Swiper nav look replaced by Global's arrow images */
#bj30 .selling-point-slide .slide{position:relative}
#bj30 .selling-point-slide .swiper-button{display:none}
/* safety body frame (GSAP .to(opacity:1), 0.5 s) [FIX G8] driven by bj30.js at Global's own threshold ("top 10%") */
#bj30 .frame-img{left:0;opacity:0;position:absolute;top:0;transition:opacity .5s ease-out;width:100%}
#bj30 .frame-img.is-on{opacity:1}

/* 14 Side view hotspots (4e150481 + 3b18a80b). Desktop set geometry is written as multiples of --k:
   --k = 1px at >=1200 (Global, unscaled) and 100vw/1200 at 769-1199 [FIX G2: landscape art + the desktop set, scaled]. */
#bj30 .car-side-wrap{--k:1px;position:relative}
#bj30 .car-side-wrap>img,#bj30 .car-side-wrap>picture img{width:100%}
#bj30 .car-side-wrap .m-set{display:none}
#bj30 .point{height:calc(10 * var(--k));left:0;position:absolute;top:0;width:calc(10 * var(--k))}
#bj30 .point .box{border:1px solid transparent;height:100px;position:absolute;width:100px}
#bj30 .point .circle-dots{height:calc(20 * var(--k));left:calc(-4 * var(--k));opacity:0;position:absolute;top:calc(-4 * var(--k));width:calc(20 * var(--k))}
#bj30 .point .circle-dots img{width:100%}
#bj30 .point .border{position:absolute}
#bj30 .point .bottom,#bj30 .point .top,#bj30 .point .top-reverse{background-image:url(/assets/bj30-global/images/line-h.png);background-repeat:repeat-x;background-size:6px 100%;border:none;height:1px;width:0}
#bj30 .point .left,#bj30 .point .left-reverse,#bj30 .point .right,#bj30 .point .right-reverse{background-image:url(/assets/bj30-global/images/line-v.png);background-repeat:repeat-y;background-size:100% 6px;border:none;height:0;width:1px}
#bj30 .point .top{left:-1px;top:-1px}
#bj30 .point .top-reverse{right:-1px;top:-1px}
#bj30 .point .left{left:-1px;top:0}
#bj30 .point .left-reverse{bottom:0;left:-1px}
#bj30 .point .right{right:-1px;top:0}
#bj30 .point .right-reverse{bottom:0;right:-1px}
#bj30 .point .bottom{bottom:-1px;right:1px}
#bj30 .point .circle{background-color:#fff;border-radius:50%;height:6px;left:-2px;opacity:0;position:absolute;top:-4px;width:6px}
#bj30 .point .circle-right{left:auto;right:-4px}
#bj30 .point .circle-right-bottom{top:97%}
#bj30 .point .text{color:#fff;font-size:calc(22 * var(--k));line-height:1.5;opacity:0;position:absolute;right:calc(13 * var(--k));text-align:right;top:calc(-33 * var(--k));width:calc(263 * var(--k))}
#bj30 .point .text-top{right:calc(-153 * var(--k));top:calc(-35 * var(--k))}
#bj30 .point .text-right{left:calc(18 * var(--k))}
#bj30 .point .angle-wrap{height:calc(10 * var(--k));width:calc(10 * var(--k))}
#bj30 .point .angle-wrap .angle{bottom:calc(-29 * var(--k));left:0;opacity:0;position:absolute;width:calc(230 * var(--k))}
#bj30 .point .angle-wrap .angle img{width:100%}
#bj30 .point .angle-wrap .angle .text{left:calc(-67 * var(--k));opacity:0;position:absolute;text-align:left;top:calc(133 * var(--k))}
#bj30 .car-side-wrap .point-container .angle-left .angle{left:calc(-216 * var(--k))}
#bj30 .car-side-wrap .point-container .angle-right .angle{left:calc(-31 * var(--k))}
#bj30 .car-side-wrap .point-container .mark .text{text-align:left}
#bj30 .car-side-wrap .point-container .scratch1 .circle-dots{left:calc(8 * var(--k))}
#bj30 .car-side-wrap .point-container .scratch2 .circle-dots{left:calc(-72 * var(--k));top:calc(-54 * var(--k));width:calc(18 * var(--k))}
/* reveal (Global CarSide r(): per point, 300 ms apart: lines grow to 100 %, dot/circle/label/angle fade in, 0.3 s) */
#bj30 .point .border,#bj30 .point .circle-dots,#bj30 .point .circle,#bj30 .point .text,#bj30 .point .angle{transition:all .3s ease-in-out}
#bj30 .point.is-on .circle-dots,#bj30 .point.is-on .circle,#bj30 .point.is-on .text,#bj30 .point.is-on .angle{opacity:1}
#bj30 .point.is-on .angle-wrap .angle .text{opacity:1}
#bj30 .point.is-on .bottom,#bj30 .point.is-on .top,#bj30 .point.is-on .top-reverse{width:100%}
#bj30 .point.is-on .left,#bj30 .point.is-on .left-reverse,#bj30 .point.is-on .right,#bj30 .point.is-on .right-reverse{height:100%}

/* 15 Configuration (data-v-636c198c). [FIX G11] vw sizes get readable minimums (Global: 7-10 px text at 769-1000 px). */
#bj30 .bj30-config .configuration_title{font-size:max(18px,1.5vw);font-weight:900;margin:3vw 0;text-align:center;text-transform:uppercase}
#bj30 .configuration_box{display:flex;margin:0 auto;width:90%}
#bj30 .configuration_l{flex:1 1 auto;min-width:0}
#bj30 .configuration_l img{max-width:100%;width:auto}
#bj30 .configuration_r{display:flex;flex:none;flex-direction:column;justify-content:space-between;padding-left:5%;width:30%}
#bj30 .configuration_r .min_title{color:#05aad2;font-size:max(12px,.9vw)}
#bj30 .configuration_r .title{color:#626262;font-size:max(18px,1.5vw);margin-top:1vw;position:relative}
#bj30 .configuration_r .title:after{background-color:#d5d6d6;bottom:-1vw;content:"";height:1px;left:0;position:absolute;width:100%}
#bj30 .configuration_r .item_box{display:flex;flex:1;flex-direction:column;justify-content:space-between;padding:3vw 0}
#bj30 .configuration_r .item_t{color:#b0b0b0;font-size:max(12px,1vw);margin-bottom:1vw}
#bj30 .configuration_r .item_b{color:#626262;font-size:max(14px,1.2vw)}
#bj30 .configuration_r .config_btn{align-items:center;background-color:#3d3d3d;color:#fff;cursor:pointer;display:flex;font-size:max(13px,1vw);height:max(40px,3.54vw);justify-content:center;text-transform:uppercase;width:100%}

/* 16 Test drive (CommonTestDrive data-v-4afee959: title kept, form replaced by the BAIC Iraq test-drive link) */
#bj30 .bj30-testdrive{text-align:center}
#bj30 .drive_title{align-items:center;display:flex;justify-content:space-between;margin:5vw 0}
#bj30 .drive_title .title_content{font-size:max(18px,1.5vw);font-weight:900;margin:0 2vw;text-transform:uppercase}
#bj30 .drive_title .xian{background-color:#b1b1b1;flex:1;height:1px}
#bj30 .from_btn{background-color:#3d3d3d;color:#fff;cursor:pointer;display:inline-block;margin:0 0 3vw;padding:max(10px,1vw) max(40px,5vw)}
#bj30 .from_btn:hover{background-color:#d1291a}

/* =====================================================================
   <=1199: Global's own small-screen rules (its max-width:1200px block, minus 1200 itself [FIX G3])
   ===================================================================== */
@media (max-width:1199px){
  #bj30 .sell-point-wrap{margin:30px 0 12px}
  #bj30 .section-top,#bj30 .sell-point{margin-top:5px}
  #bj30 .exquisite-picture{margin:30px 0}
  #bj30 .vehicle-type .params-item:nth-last-child(-n+2){flex:1}
  #bj30 .ambient-light .text-wrap,#bj30 .off-road .text-wrap{width:90%}
  #bj30 .cross-country-params{bottom:2%}
  #bj30 .cross-country-params .vehicle-params-list{align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;width:100%}
  #bj30 .cross-country-params .params-item{margin-bottom:0;padding:0;width:30%}
  #bj30 .cross-country-params .params-item .title{font-size:10px}
  #bj30 .cross-country-params .params-item .value{font-size:14px}
  #bj30 .cross-country-params .params-item:nth-child(2){flex:1}
  /* tabs + figures */
  #bj30 .tabs-container{border-radius:15px;display:flex;width:85%}
  #bj30 .tabs-container .btn{border-radius:15px;font-size:14px;padding:5px 10px;text-align:center}
  #bj30 .tabs-container .btn:first-child{flex:1}
  #bj30 .tabs-container .btn:last-child{width:60%}
  #bj30 .vehicle-type .params{bottom:2%}
  #bj30 .vehicle-type .params .params-item:nth-last-child(-n+2){width:50%}
  #bj30 .vehicle-params-list{flex-wrap:wrap-reverse;width:100%}
  #bj30 .params-item{font-size:16px;width:33.3333333333%}
  #bj30 .params-item .title{font-size:12px}
  #bj30 .params-item:nth-child(n+2){margin-bottom:15px}
  #bj30 .vehicle-params-list.even-list .params-item{width:25%}
  /* selling-point text */
  #bj30 .text-wrap{font-size:15px;width:100%}
  #bj30 .text-wrap .title-list{justify-content:flex-start}
  #bj30 .text-wrap .text-item{flex:1;text-align:center}
  #bj30 .text-wrap .text-item>*{padding:18px 0 8px}
  #bj30 .text-wrap .text-item:first-child>*{padding-right:10px}
  #bj30 .text-wrap .describe{font-size:14px;text-align:left}
  /* slider arrows (Global images, 18 px wide, 19 px outside the image) [FIX G15] real disabled state */
  #bj30 .selling-point-slide .swiper-button{background-repeat:no-repeat;background-size:100% auto;display:flex;width:18px}
  #bj30 .selling-point-slide .swiper-button:after{display:none}
  #bj30 .selling-point-slide .swiper-button.swiper-button-prev{background-image:url(/assets/bj30-global/images/arrow-prev.png);left:-19px}
  #bj30 .selling-point-slide .swiper-button.swiper-button-next{background-image:url(/assets/bj30-global/images/arrow-next.png);right:-19px}
  #bj30 .selling-point-slide .swiper-button.swiper-button-disabled{opacity:.3;pointer-events:none}
}

/* =====================================================================
   769-1199 tablet: desktop (landscape) composition [FIX G2/G3/G4]
   ===================================================================== */
@media (min-width:769px) and (max-width:1199px){
  #bj30 .kv-wrap .btn{font-size:14px;margin-right:10px;padding:6px 20px}
  #bj30 .car-side-wrap{--k:calc(100vw / 1200)}
  #bj30 .point .text{font-size:max(12px,calc(22 * var(--k)))}
}

/* =====================================================================
   <=768 phone: Global portrait art + its phone rules, with the layout bugs corrected
   ===================================================================== */
@media (max-width:768px){
  #bj30 .btn{font-size:12px;padding:6px 15px}
  #bj30 .kv-wrap .btn-container{display:flex;justify-content:center;left:0;top:30%;width:100%}
  #bj30 .kv-wrap .btn{padding:6px 28px}
  /* colours [FIX G5]: the section height is reserved from the first render (portrait backdrop 1500x1572 at 101 % width),
     so it never collapses to 0 while color-bg-m.jpg downloads; the palette button can always be tapped. */
  #bj30 .car_color_box{height:auto;min-height:calc(101vw * 1572 / 1500)}
  #bj30 .open_icon{width:10vw}
  #bj30 .open_icon,#bj30 .turntable{left:50%;top:3vw;transform:translate(-50%)}
  #bj30 .car .car_swiper{bottom:21.5vw;left:50%;transform:translate(-50%);width:66vw}
  #bj30 .chart{height:40vw;width:40vw}
  /* hotspots: Global's phone point set and its <=1200 rules */
  #bj30 .car-side-wrap .pc-set{display:none}
  #bj30 .car-side-wrap .m-set{display:block}
  #bj30 .car-side-wrap .point-container.m-set .point .text{font-size:12px;text-align:center;width:150px}
  #bj30 .car-side-wrap .point-container.m-set .point .text-top{left:-30px;top:-18px}
  #bj30 .car-side-wrap .point-container.m-set .point .circle-right{right:-4px}
  #bj30 .car-side-wrap .point-container.m-set .point .circle-right-bottom{left:-3px}
  #bj30 .car-side-wrap .point-container.m-set .point .angle-wrap .angle{top:-22px;width:80px}
  #bj30 .car-side-wrap .point-container.m-set .point .angle-wrap .angle .text{width:108px}
  #bj30 .car-side-wrap .point-container.m-set .angle-left .angle{left:-70px}
  #bj30 .car-side-wrap .point-container.m-set .angle-right .angle{left:0}
  #bj30 .car-side-wrap .point-container.m-set .mark .text{text-align:right;width:92px}
  #bj30 .car-side-wrap .point-container.m-set .lamp .text{text-align:left}
  #bj30 .car-side-wrap .point-container.m-set .scratch .circle-dots{display:block;left:5px}
  #bj30 .car-side-wrap .point-container.m-set .scratch1 .circle-dots{left:-27px;top:-29px}
  #bj30 .car-side-wrap .point-container.m-set .point.angle-right .angle-wrap .angle .text{white-space:nowrap;width:auto}   /* [FIX G12] Global's 108 px box ran 5 px past a 390 px screen */
  /* configuration (Global @media(max-width:768px)) */
  #bj30 .bj30-config .configuration_title{font-size:5vw;font-weight:bolder}
  #bj30 .configuration_box{flex-direction:column;font-size:3vw}
  #bj30 .configuration_box .configuration_r{margin-top:2vw;padding-left:0;width:100%}
  #bj30 .configuration_box .configuration_r .min_title{font-size:3vw}
  #bj30 .configuration_box .configuration_r .title{display:inline-block;font-size:5vw}
  #bj30 .configuration_box .configuration_r .item_box{flex-direction:row;flex-wrap:wrap;justify-content:flex-start}
  #bj30 .configuration_box .configuration_r .item_box .item{margin-bottom:5vw;width:33.3333333333%}
  #bj30 .configuration_box .configuration_r .item_box .item_t{font-size:3vw}
  #bj30 .configuration_box .configuration_r .item_box .item_b{font-size:4vw}
  #bj30 .configuration_box .configuration_r .config_btn{font-size:4vw;height:auto;padding:2vw 0}
  #bj30 .configuration_l img{width:100%}
  /* test drive (Global <=1200 rules; the phone title has no side lines) */
  #bj30 .drive_title .xian{display:none}
  #bj30 .drive_title{justify-content:center}
  #bj30 .drive_title .title_content{font-size:5vw;font-weight:bolder;margin:5vw;text-align:center}
  #bj30 .from_btn{font-size:4vw;margin-bottom:5vw;padding:2vw 0;text-align:center;width:90%}
}

/* =====================================================================
   Specifications dialog (Element Plus el-dialog .my_dialog: 90 % wide, 15vh from the top, body 80vh scrolling)
   ===================================================================== */
dialog.my_dialog{background:#fff;border:0;border-radius:2px;box-shadow:0 12px 32px 4px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.08);color:#303133;margin:15vh auto 50px;max-height:none;max-width:none;overflow:visible;padding:0;width:90%}
dialog.my_dialog::backdrop{background:rgba(0,0,0,.5)}
dialog.my_dialog .el-dialog__header{height:16px;position:relative}
dialog.my_dialog .el-dialog__headerbtn{align-items:center;background:transparent;border:0;color:#909399;cursor:pointer;display:flex;height:48px;justify-content:center;padding:0;position:absolute;right:0;top:0;width:48px;z-index:1}
dialog.my_dialog .el-dialog__headerbtn:hover{color:#d1291a}
dialog.my_dialog .el-dialog__body{box-sizing:border-box;height:80vh;margin-top:2vw;overflow-y:scroll;padding:0 0 2vw}
html.bj30-dialog-open{overflow:hidden}

/* Specifications (data-v-5dfccb0b, as U5 PLUS): table >=1200, accordion <1200 (original switch kept) */
.bj30-spec .spec-m{display:none}
@media (max-width:1199px){.bj30-spec .spec-pc{display:none}.bj30-spec .spec-m{display:block}}
.bj30-spec .title{font-size:28px;font-weight:600}
.bj30-spec h2{margin:0}
.bj30-spec .params-table{border-collapse:collapse;border-spacing:0;margin:0 auto 20px;width:100%}
.bj30-spec .params-table td{padding:0}
.bj30-spec .params-table .table_line:first-child .table_cell:first-child{max-width:25em;min-width:25em}
.bj30-spec .params-table .table_cell{border:1px solid #c7c7c7;padding:6px 10px;text-align:center;width:25%}
.bj30-spec .params-table .table_cell:first-child{border-left:none;border-right:1px solid #c7c7c7}
.bj30-spec .params-table .table_cell:last-child{border-left:1px solid #c7c7c7;border-right:none}
.bj30-spec .params-table .params-table__body .table_line.stripe-even{background-color:#e8e8ea}
.bj30-spec .params-table .params-table__body .table_line_menu{background-color:#8894a3;border:none;color:#fff;cursor:pointer}
.bj30-spec .params-table .params-table__body .table_line_menu .table_cell{font-weight:700;padding:5px 0;text-align:left}
.bj30-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}
.bj30-spec .params-table .params-table__body .table_line_menu .table_cell .table_cell__menu .icon-plus-menu{margin:0 34px 0 20px;position:relative}
.bj30-spec .params-table .params-table__body .table_line_menu .table_cell .table_cell__menu .icon-plus-menu.close:after{transform:rotate(90deg)}
.bj30-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}
.bj30-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}
.bj30-spec .params-table .params-table__footer,.bj30-spec .params-table .params-table__header{background-color:#53586d;color:#fff}
.bj30-spec .params-table .params-table__footer .table_cell,.bj30-spec .params-table .params-table__header .table_cell{font-weight:700}
.bj30-spec .params-table .table_line_menu:focus-visible{outline:2px solid #53586d;outline-offset:-2px}
.bj30-spec .params-div{display:flex;flex-direction:column;margin-bottom:20px}
.bj30-spec .params-div .params-div__select{align-items:center;background-color:#8894a3;display:flex;height:51px;padding:0 20% 0 15px}
.bj30-spec .params-div .params-div__block{display:flex;flex-direction:column}
.bj30-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}
.bj30-spec .params-div .params-div__block .params-div__menu{background-color:#8894a3;border-bottom:1px solid #fff;color:#fff;cursor:pointer}
.bj30-spec .params-div .params-div__block .params-div__menu .params-div__value{position:relative;text-align:right}
.bj30-spec .params-div .params-div__block .params-div__menu .params-div__value.close:after{transform:rotate(90deg)}
.bj30-spec .params-div .params-div__block .params-div__menu .params-div__value:after{transition:transform .5s}
.bj30-spec .params-div .params-div__block .params-div__menu .params-div__value:after,.bj30-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}
.bj30-spec .params-div .params-div__block .params-div__body{overflow:hidden;transition:all .4s ease-in-out}
.bj30-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}
.bj30-spec .params-div .params-div__block .params-div__line:nth-child(2n){background-color:#e8e8ea}
.bj30-spec .params-div .params-div__block .params-div__line .params-div__name{flex:1}
.bj30-spec .params-div .params-div__block .params-div__line .params-div__value{text-align:right}
.bj30-spec .params-div .params-div__menu:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.bj30-spec .params-table__title{color:#606266;font-weight:600;line-height:3.5;text-align:center}
.bj30-spec .params-table__title_mobile{line-height:1.5;margin-bottom:30px}
.bj30-spec .params-table__remark{margin:auto auto 10px;white-space:pre-line;width:80%}
.bj30-spec .params-div__remark{margin-top:10px;padding:0 15px}
.bj30-spec .bj30-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:0;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%}
.bj30-spec .bj30-trim:focus{box-shadow:inset 0 0 0 1px #d1291a;outline:none}
@media (max-width:1199px){
  .bj30-spec .params-div .params-div__block .params-div__line{padding:5px .5em}
  .bj30-spec .params-div .params-div__block .params-div__body .params-div__line:not(.params-div__menu){padding:0;position:relative}
  .bj30-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}
  .bj30-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}
  .bj30-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%}
}

/* [A11Y] reduced motion: no fades, slides, line drawing or count-ups (bj30.js reads the same query) */
@media (prefers-reduced-motion:reduce){
  #bj30 .car .car_swiper .car-slide,#bj30 .frame-img,#bj30 .point .border,#bj30 .point .circle-dots,#bj30 .point .circle,#bj30 .point .text,#bj30 .point .angle,
  #bj30 .exquisite-picture .swiper-pagination-bullet-custom,.bj30-spec .params-div .params-div__block .params-div__body{transition:none!important}
}