/* =====================================================================
   BAIC Iraq — U5 PLUS page (Phase 2 rebuild of baicglobal.com/models/17, the generic Nuxt models/[id] template)
   Values are ported 1:1 from the original scoped CSS (SSR inline <style> blocks, byte-identical to the X55 capture).
   Original scopes:
     page 22be1626 -> #u5plus (root .cart-model-main)     PieColor 7ee0a39a -> .svg-pie-color-tip
     Specifications 5dfccb0b -> .u5plus-spec
     ImgText ae1b5012 / AboutImageBanner c80a3932 -> not ported (ImgText renders nothing; U5 PLUS has no gallery)
   Breakpoints (as the original): scoped layout switch at 768/769 px; Specifications table/accordion at 1200 px.
   Lines marked [FIX] are deliberate production corrections (see notes/U5PLUS_PHASE2_IMPLEMENTATION.md §6, §14).
   Dead original rules are NOT ported (Phase 1 Q21): the <=1200px 95vh hero (loses on specificity), all ImgText
   positioning, slider/.video-box/.desc-img-box/.specificationsPDF rules, <=768px top:20%, zoom-only .max-1680.
   ===================================================================== */

/* ---------- Base (Tailwind preflight + global site CSS as shipped; zero specificity) ---------- */
:where(#u5plus) *,:where(#u5plus) :after,:where(#u5plus) :before{border:0 solid #e5e7eb;box-sizing:border-box}
:where(#u5plus) h1,:where(#u5plus) h2,:where(#u5plus) h3{font-size:inherit;font-weight:inherit;margin:0}
:where(#u5plus) a{color:inherit;text-decoration:inherit}
:where(#u5plus) p{margin:0}
:where(#u5plus) img,:where(#u5plus) svg{display:block;vertical-align:middle}
:where(#u5plus) img{height:auto;max-width:100%;border-style:none}
:where(#u5plus) table{border-collapse:collapse;border-color:inherit;text-indent:0}
:where(#u5plus) button,:where(#u5plus) select{font:inherit;color:inherit;margin:0}
:where(#u5plus) button{background-color:transparent;background-image:none;cursor:pointer;line-height:inherit;padding:0}
#u5plus [hidden]{display:none!important}
#u5plus{color:#000;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5}

/* ---------- Global utility classes used by the template (.max-1680, .btn, .secondary--btn-dark) ---------- */
#u5plus .max-1680{box-sizing:border-box;margin:0 auto;max-width:1680px;padding:0 15px}
#u5plus .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}
#u5plus .btn:hover{background-color:transparent;border:1px solid #000;color:#000}
#u5plus .secondary--btn-dark{background-color:transparent;border:1px solid #000;color:#000}
#u5plus .secondary--btn-dark:hover{background-color:#d1291a;border:1px solid #d1291a;color:#fff}
#u5plus .btn:focus-visible,#u5plus .color-item:focus-visible{outline:2px solid #d1291a;outline-offset:3px}

/* ---------- Page (data-v-22be1626) ---------- */
#u5plus.cart-model-main{min-height:100vh;overflow-x:hidden}

/* 01 Hero / colour selector */
#u5plus .cart-banner{height:100vh;position:relative;width:100%}
#u5plus .cart-banner.max-1680{max-height:1050px}
#u5plus .cart-banner .position-box{display:flex;flex-direction:column;flex-wrap:nowrap;height:100%;justify-content:center;left:0;padding-left:50px;position:absolute;top:0;width:34%;z-index:1}
#u5plus .cart-banner .position-box .title{font-size:84px;font-weight:700;margin-bottom:0;margin-left:-7px;width:100%}
#u5plus .cart-banner .position-box .desc{font-size:28px;width:100%}
#u5plus .cart-banner .position-box .subTitle{color:#6f6f6f;font-size:21px;overflow:hidden;width:100%}
/* the CMS <p> is injected with innerHTML on Global, so the global ".cart-model-main .subTitle p" rule + "p{margin:1em 0}"
   apply (verified on U5 PLUS: 16px text). The CMS <span style="color: rgb(32, 32, 32)"> inside it is kept (Global behaviour:
   near-black sub-title instead of the template grey). */
#u5plus .cart-banner .position-box .subTitle p{float:left;font-size:16px;margin:1em 0;max-width:500px;text-align:left;word-break:break-word}
#u5plus .cart-banner .position-box .btn{margin-right:15px}
#u5plus .cart-banner .position-box .color-list{margin-bottom:6vh;margin-top:12vh;min-height:41px;width:85%}   /* min-height = measured line box, so the JS-rendered swatches cause no shift */
#u5plus .cart-banner .position-box .color-list .color-item{border-radius:50%;cursor:pointer;display:inline-flex;height:35px;margin-right:20px;vertical-align:baseline;width:35px}
#u5plus .cart-banner .position-box .color-list .color-item.color-item-show{box-shadow:0 0 10px #0000008f}
#u5plus .svg-pie-color-tip{display:block}
#u5plus .cart-banner .cart-list{bottom:0;position:absolute;right:-20%;top:0;width:100%}
#u5plus .cart-banner .cart-list .cart-item{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;width:100%}
#u5plus .cart-banner .cart-list .cart-item.cart-item-show{opacity:1;transform:translate(0);transition:all .5s ease}
#u5plus .cart-banner .cart-list .cart-item.cart-item-hide{opacity:0;transform:translate(100%)}
/* width/height:auto override the 1700x750 attributes (kept for the intrinsic ratio) so max-width/max-height scale the car without distortion */
#u5plus .cart-banner .cart-list .cart-item img{display:inline-block;height:auto;max-height:100%;max-width:100%;width:auto}

/* ---------- >=769px car stage [FIX Q1/Q2]: on Global the car <img> is as wide as the hero and pushed 20% (13% at 1920)
   to the right, so the rear of the sedan is cut off by the viewport at EVERY width >=769 (108-203px of car body past the
   edge) and the sub-title runs 47-90px over the car body at every desktop width, 1920 included.
   Correction (same composition: text left, car right, vertically centred, same 0.5s slide-in): the stage width is the
   largest that keeps the car body (7.8%-94.1% of the U5 PLUS car PNGs — union of the 4 colours, measured from the alpha
   channel) between the text column (--u5-text + --u5-gap) and the hero's right edge (--u5-edge); never larger than
   Global's (100%). The transparent right margin of the PNG (5.9%) may pass the edge, so the car body ends --u5-edge inside
   the hero. --u5-text = real right edge of the text block (left padding + text column content). ---------- */
@media (min-width:769px){
  #u5plus .cart-banner{--u5-text:calc(50px + min(34% - 50px, 400px));--u5-gap:40px;--u5-edge:24px;
    --u5-stage:min(100%, calc((100% - var(--u5-text) - var(--u5-gap) - var(--u5-edge)) * 1.1587))}   /* 1.1587 = 1/(0.941-0.078) */
  #u5plus .cart-banner .cart-list{left:auto;right:calc(var(--u5-edge) - var(--u5-stage) * 0.059);width:var(--u5-stage)}
}
/* >=1200 [FIX Q2]: the sub-title line is capped at 400px (Global 500px) so the text column ends ~450px into the hero; at
   1920 the sub-title wraps to 3 lines exactly as Global already shows it at 1440/1200. Everything else as Global. */
@media (min-width:1200px){
  #u5plus .cart-banner .position-box .subTitle p{max-width:400px}
}

/* ---------- <=768px (original scoped @media(max-width:768px); verified phone layout, no clipping on Global) ---------- */
@media (max-width:768px){
  #u5plus .btn{font-size:12px;padding:6px 15px}
  #u5plus .cart-banner{height:auto;position:relative;width:100%}
  #u5plus .cart-banner .position-box{left:0;padding:30px 0 0;position:relative;width:100%;z-index:1}
  #u5plus .cart-banner .position-box .title{font-size:34px;margin-bottom:0;margin-left:0}
  #u5plus .cart-banner .position-box .desc{font-size:14px}
  #u5plus .cart-banner .position-box .subTitle{color:#000;font-size:16px;overflow:hidden}
  #u5plus .cart-banner .position-box .color-list{margin-bottom:20px;margin-top:0;min-height:26px;width:100%}
  #u5plus .cart-banner .position-box .color-list .color-item{height:20px;margin-right:10px;width:20px}
  #u5plus .cart-banner .cart-list{left:0;margin:0 -15px;padding-bottom:55%;position:relative;right:0;width:calc(100% + 30px)} /* [FIX] original 100vw */
}

/* ---------- 769-1199px [FIX Q2/Q4/Q5]: on Global the 34% text column becomes 261-408px: at 769 the eyebrow starts under
   the 64px header, "U5 PLUS" breaks into "U5 / PLUS" (also at 1000), the sub-title takes 4 lines, the four swatches break
   3+1 and the car is clipped and runs under the text.
   Coherent two-column hero with the >=1200 visual language: 40% text column (40px padding), top padding = the 64px fixed
   Iraq header so the text block is centred in the visible area below it, H1 scaled 52-84px so "U5 PLUS" stays on one line
   (glyph width ~4.23 x font-size), eyebrow scaled 20-28px, swatches on one row (35px circles, 20px gap), car stage to the
   right of the column (formula above). The hero stays 100vh as on Global. ---------- */
@media (min-width:769px) and (max-width:1199px){
  #u5plus .cart-banner{min-height:560px;--u5-text:40%;--u5-gap:32px;--u5-edge:20px}
  #u5plus .cart-banner .position-box{padding-left:40px;padding-top:64px;width:40%}
  #u5plus .cart-banner .position-box .title{font-size:clamp(52px,6.6vw,84px);margin-left:-5px;white-space:nowrap}
  #u5plus .cart-banner .position-box .desc{font-size:clamp(20px,2.6vw,28px)}
  #u5plus .cart-banner .position-box .color-list{display:flex;flex-wrap:nowrap;gap:20px;width:100%}
  #u5plus .cart-banner .position-box .color-list .color-item{flex:0 0 auto;margin-right:0}
}

/* ---------- 01b Feature stack (7 panels, scroll parallax set by u5plus.js) ---------- */
#u5plus .desc-img-list{position:relative;z-index:5}
#u5plus .desc-img-list .desc-img-item{width:100%}                      /* [FIX] original 100vw: clips under classic desktop scrollbars */
#u5plus .desc-img-list .desc-img-item .desc-img{height:auto;width:100%} /* [FIX] original max-height:105vh cuts the bottom of a 16:9 panel on viewports wider than ~16:8.4 */
#u5plus .desc-img-list .desc-img-item .desc-img .desc-img-text-box{position:relative}
/* display:block + height:auto = the measured original box (panel height = image height); width/height attributes reserve 16:9 before load */
#u5plus .desc-img-list .desc-img-item .desc-img .desc-img-text-box>img{display:block;height:auto;-o-object-fit:cover;object-fit:cover;position:relative;width:100%}

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