/* =====================================================================
   BAIC Iraq — X35 page (Phase 2 rebuild of baicglobal.com/models/21, 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 -> #x35 (root .cart-model-main)     PieColor 7ee0a39a -> .svg-pie-color-tip
     Specifications 5dfccb0b -> .x35-spec
     ImgText ae1b5012 / AboutImageBanner c80a3932 -> not ported (ImgText renders nothing; X35 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/X35_PHASE2_IMPLEMENTATION.md §7, §11).
   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(#x35) *,:where(#x35) :after,:where(#x35) :before{border:0 solid #e5e7eb;box-sizing:border-box}
:where(#x35) h1,:where(#x35) h2,:where(#x35) h3{font-size:inherit;font-weight:inherit;margin:0}
:where(#x35) a{color:inherit;text-decoration:inherit}
:where(#x35) p{margin:0}
:where(#x35) img,:where(#x35) svg{display:block;vertical-align:middle}
:where(#x35) img{height:auto;max-width:100%;border-style:none}
:where(#x35) table{border-collapse:collapse;border-color:inherit;text-indent:0}
:where(#x35) button,:where(#x35) select{font:inherit;color:inherit;margin:0}
:where(#x35) button{background-color:transparent;background-image:none;cursor:pointer;line-height:inherit;padding:0}
#x35 [hidden]{display:none!important}
#x35{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) ---------- */
#x35 .max-1680{box-sizing:border-box;margin:0 auto;max-width:1680px;padding:0 15px}
#x35 .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}
#x35 .btn:hover{background-color:transparent;border:1px solid #000;color:#000}
#x35 .secondary--btn-dark{background-color:transparent;border:1px solid #000;color:#000}
#x35 .secondary--btn-dark:hover{background-color:#d1291a;border:1px solid #d1291a;color:#fff}
#x35 .btn:focus-visible,#x35 .color-item:focus-visible{outline:2px solid #d1291a;outline-offset:3px}

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

/* 01 Hero / colour selector */
#x35 .cart-banner{height:100vh;position:relative;width:100%}
#x35 .cart-banner.max-1680{max-height:1050px}
#x35 .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}
#x35 .cart-banner .position-box .title{font-size:84px;font-weight:700;margin-bottom:0;margin-left:-7px;width:100%}
#x35 .cart-banner .position-box .desc{font-size:28px;width:100%}
#x35 .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 X35: 16px text, box 56px tall at >=1200) */
#x35 .cart-banner .position-box .subTitle p{float:left;font-size:16px;margin:1em 0;max-width:500px;text-align:left;word-break:break-word}
#x35 .cart-banner .position-box .btn{margin-right:15px}
#x35 .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 */
#x35 .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}
#x35 .cart-banner .position-box .color-list .color-item.color-item-show{box-shadow:0 0 10px #0000008f}
#x35 .svg-pie-color-tip{display:block}
#x35 .cart-banner .cart-list{bottom:0;position:absolute;right:-20%;top:0;width:100%}
#x35 .cart-banner .cart-list .cart-item{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;width:100%}
#x35 .cart-banner .cart-list .cart-item.cart-item-show{opacity:1;transform:translate(0);transition:all .5s ease}
#x35 .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 */
#x35 .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 car is cut off by the viewport at EVERY width >=769 (216-288px of image past the edge)
   and, at 1000-1200, its nose runs under the text column.
   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 (8.5%-91.1% of every X35 car PNG, measured from the alpha channel) between the text
   column (--x35-text + --x35-gap) and the hero's right edge (--x35-edge); never larger than Global's (100%).
   The transparent right margin of the PNG (8.9%) is allowed past the edge, so the car body ends exactly --x35-edge
   inside the hero. ---------- */
@media (min-width:769px){
  #x35 .cart-banner{--x35-text:400px;--x35-gap:40px;--x35-edge:24px;
    --x35-stage:min(100%, calc((100% - var(--x35-text) - var(--x35-gap) - var(--x35-edge)) * 1.2107))}   /* 1.2107 = 1/(0.911-0.085) */
  #x35 .cart-banner .cart-list{left:auto;right:calc(var(--x35-edge) - var(--x35-stage) * 0.089);width:var(--x35-stage)}
}

/* ---------- <=768px (original scoped @media(max-width:768px); verified phone layout, no clipping on Global) ---------- */
@media (max-width:768px){
  #x35 .btn{font-size:12px;padding:6px 15px}
  #x35 .cart-banner{height:auto;position:relative;width:100%}
  #x35 .cart-banner .position-box{left:0;padding:30px 0 0;position:relative;width:100%;z-index:1}
  #x35 .cart-banner .position-box .title{font-size:34px;margin-bottom:0;margin-left:0}
  #x35 .cart-banner .position-box .desc{font-size:14px}
  #x35 .cart-banner .position-box .subTitle{color:#000;font-size:16px;overflow:hidden}
  #x35 .cart-banner .position-box .color-list{margin-bottom:20px;margin-top:0;min-height:26px;width:100%}
  #x35 .cart-banner .position-box .color-list .color-item{height:20px;margin-right:10px;width:20px}
  #x35 .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/Q6]: on Global the 34% text column becomes 262-408px: the eyebrow/sub wrap, the four
   swatches break 3+1 at 769 (the swatch row is 85% of the column) and the car is cut off / runs under the text.
   Coherent two-column hero with the >=1200 visual language: 38% text column, eyebrow scaled 20-28px, swatches kept on one
   row (35px circles, 20px gap — fits the column down to 769), car stage to the right of the column (formula above).
   The hero stays 100vh as on Global (the fixed 64px Iraq header overlays its top, like Global's absolute header). ---------- */
@media (min-width:769px) and (max-width:1199px){
  #x35 .cart-banner{min-height:540px;--x35-text:38%;--x35-gap:32px;--x35-edge:20px}
  #x35 .cart-banner .position-box{padding-left:40px;width:38%}
  #x35 .cart-banner .position-box .desc{font-size:clamp(20px,2.6vw,28px)}
  #x35 .cart-banner .position-box .color-list{display:flex;flex-wrap:nowrap;gap:20px;width:100%}
  #x35 .cart-banner .position-box .color-list .color-item{flex:0 0 auto;margin-right:0}
}

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