/* =====================================================================
   BAIC Iraq — X55 page (Phase 2 rebuild of baicglobal.com/models/26, the generic Nuxt models/[id] template)
   Values are ported 1:1 from the original scoped CSS (SSR inline <style> blocks). Original scopes:
     page 22be1626 -> #x55 (root .cart-model-main)     PieColor 7ee0a39a -> .svg-pie-color-tip
     AboutImageBanner c80a3932 -> .x55-gal              Specifications 5dfccb0b -> .x55-spec
     ImgText ae1b5012 -> not ported (renders nothing on X55: titles are "0"/"1" placeholders)
   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/X55_PHASE2_IMPLEMENTATION.md §13-14).
   Dead original rules are NOT ported (Phase 1 S1-S7): the <=1200px 95vh hero (loses on specificity),
   all ImgText positioning, .video-box/.desc-img-box/.specificationsPDF/.h3, <=768px top:20%, zoom-only .max-1680.
   ===================================================================== */

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

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

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

/* 01 Hero / colour selector */
#x55 .cart-banner{height:100vh;position:relative;width:100%}
#x55 .cart-banner.max-1680{max-height:1050px}
#x55 .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}
#x55 .cart-banner .position-box .title{font-size:84px;font-weight:700;margin-bottom:0;margin-left:-7px;width:100%}
#x55 .cart-banner .position-box .desc{font-size:28px;width:100%}
#x55 .cart-banner .position-box .subTitle{color:#6f6f6f;font-size:21px;overflow:hidden;width:100%}
/* the CMS <p> is injected with innerHTML, so the scoped ".subTitle p{margin:0}" never matched it on Global; the global
   ".cart-model-main .subTitle p" rule + "p{margin:1em 0}" apply instead (verified: 16px text, 16px margins, box 56px) */
#x55 .cart-banner .position-box .subTitle p{float:left;font-size:16px;margin:1em 0;max-width:500px;text-align:left;word-break:break-word}
#x55 .cart-banner .position-box .btn{margin-right:15px}
#x55 .cart-banner .position-box .color-list{margin-bottom:6vh;margin-top:12vh;min-height:41px;width:85%}   /* min-height = measured line box (41px) so the JS-rendered swatches cause no shift */
#x55 .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}
#x55 .cart-banner .position-box .color-list .color-item.color-item-show{box-shadow:0 0 10px #0000008f}
#x55 .svg-pie-color-tip{display:block}
#x55 .cart-banner .cart-list{bottom:0;position:absolute;right:-20%;top:0;width:100%}
#x55 .cart-banner .cart-list .cart-item{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;width:100%}
#x55 .cart-banner .cart-list .cart-item.cart-item-show{opacity:1;transform:translate(0);transition:all .5s ease}
#x55 .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 */
#x55 .cart-banner .cart-list .cart-item img{display:inline-block;height:auto;max-height:100%;max-width:100%;width:auto}

/* 02 Feature stack (12 panels, scroll parallax set by x55.js) */
#x55 .desc-img-list{position:relative;z-index:5}
#x55 .desc-img-list .desc-img-item{width:100%}                      /* [FIX] original 100vw: clipped ~17px of every panel under classic desktop scrollbars */
#x55 .desc-img-list .desc-img-item .desc-img{height:auto;width:100%} /* [FIX Q19] original max-height:105vh cut the bottom of every panel (incl. baked captions) on viewports wider than ~16:8.4 */
#x55 .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 */
#x55 .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%}

/* 03 Gallery slider (AboutImageBanner data-v-c80a3932) */
#x55 .desc-img-slider{margin-top:-2px}
#x55 .x55-gal{aspect-ratio:16/9;width:100%}                          /* reserves the slider box before Swiper/images load (no layout shift) */
#x55 .x55-gal .swiper{width:100%}
#x55 .x55-gal .swiper .image{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}
#x55 .x55-gal .swiper .swiper-pagination{align-items:center;bottom:10px;display:flex;justify-content:center;left:0;position:absolute;width:100%;z-index:3}
#x55 .x55-gal .swiper .swiper-pagination .swiper-pagination-bullet-custom{background-color:#fff;border-radius:0;height:2px;margin:0 5px;opacity:.3;transition:.3s;width:30px}
#x55 .x55-gal .swiper .swiper-pagination .swiper-pagination-bullet-custom.swiper-pagination-bullet-active{opacity:1;transition:.3s}
/* [A11Y] 30x2px bars keep their look; an invisible 20px-tall hit area makes them tappable. */
#x55 .x55-gal .swiper .swiper-pagination .swiper-pagination-bullet-custom{position:relative}
#x55 .x55-gal .swiper .swiper-pagination .swiper-pagination-bullet-custom:after{content:"";height:20px;left:0;position:absolute;right:0;top:-9px}
#x55 .x55-gal .swiper .swiper-pagination .swiper-pagination-bullet-custom:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:3px}

/* ---------- <=768px (original scoped @media(max-width:768px)) ---------- */
@media (max-width:768px){
  #x55 .btn{font-size:12px;padding:6px 15px}
  #x55 .cart-banner{height:auto;position:relative;width:100%}
  #x55 .cart-banner .position-box{left:0;padding:30px 0 0;position:relative;width:100%;z-index:1}
  #x55 .cart-banner .position-box .title{font-size:34px;margin-bottom:0;margin-left:0}
  #x55 .cart-banner .position-box .desc{font-size:14px}
  #x55 .cart-banner .position-box .subTitle{color:#000;font-size:16px;overflow:hidden}
  #x55 .cart-banner .position-box .color-list{margin-bottom:20px;margin-top:0;min-height:26px;width:100%}
  #x55 .cart-banner .position-box .color-list .color-item{height:20px;margin-right:10px;width:20px}
  #x55 .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 Q4]: coherent two-column hero (original: swatches wrapped 5+1 / 4+2 / 3+3, the two
   buttons stacked touching, the eyebrow wrapped and the car's rear was cut off at the right edge).
   Same visual language as >=1200: text column left, car stage right, 35px round swatches, outline pill buttons.
   The hero stays 100vh as on Global (the fixed 64px Iraq header overlays its top, like Global's absolute header);
   min-height keeps the column from colliding on short landscape windows. ---------- */
@media (min-width:769px) and (max-width:1199px){
  #x55 .cart-banner{min-height:540px}
  #x55 .cart-banner .position-box{padding-left:40px;width:40%}
  #x55 .cart-banner .position-box .desc{font-size:clamp(20px,2.6vw,28px)}
  #x55 .cart-banner .position-box .color-list{display:flex;flex-wrap:nowrap;gap:clamp(10px,1.8vw,20px);min-height:clamp(28px,3.4vw,35px);width:100%}
  #x55 .cart-banner .position-box .color-list .color-item{flex:0 0 auto;height:clamp(28px,3.4vw,35px);margin-right:0;width:clamp(28px,3.4vw,35px)}
  #x55 .cart-banner .position-box .x55-cta{display:flex;flex-wrap:wrap;gap:12px}
  #x55 .cart-banner .position-box .btn{margin-right:0;padding:10px clamp(26px,2.6vw,30px)}
  #x55 .cart-banner .cart-list{left:37%;right:15px;width:auto}
}
/* ---------- 1200-1319px [FIX Q4, boundary]: the same defect continues above 1199px on Global (swatch row wraps 5+1 up to
   ~1318px because .color-list is 85% of the 34% column; the two buttons stack touching up to ~1254px). Minimal correction,
   source composition otherwise untouched (column, sizes, car stage and its right-edge bleed as at 1440/1920). ---------- */
@media (min-width:1200px) and (max-width:1319px){
  #x55 .cart-banner .position-box .color-list{width:100%}
  #x55 .cart-banner .position-box .color-list .color-item{margin-right:14px}   /* row ends ~30px before the car's nose */
  #x55 .cart-banner .position-box .btn{padding:10px 34px}
}

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