/* Product pages share the homepage hero typography, spacing and positioning. */
.product-hero{background:#111923}
.product-hero-picture,.product-hero-picture img,.product-hero-shade{position:absolute;inset:0;width:100%;height:100%}
.product-hero-picture img{object-fit:cover;object-position:center}
.product-hero-shade{display:none}
.product-overview{padding-top:var(--section-space);padding-bottom:var(--content-gap)}
.product-overview-copy{max-width:1100px;line-height:1.7}
.product-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.product-photo{margin:0;aspect-ratio:1168/768;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.product-photo img{display:block;width:100%;height:100%;object-fit:cover}
.product-intro{text-align:center;padding-block:var(--section-space) 0}
.product-intro>div{max-width:760px;margin-inline:auto}
.product-intro p{margin:var(--content-gap) auto;max-width:700px;line-height:1.7}
.product-specifications{padding-block:var(--section-space)}
.product-specs-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:var(--content-gap)}
.product-specs-head p{color:var(--muted)}
.spec-tabs{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:4px 0 16px;margin-bottom:16px}
.spec-tabs>button{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;font:400 var(--text)/1.5 'Libre Franklin',Arial,sans-serif;background:transparent;color:var(--ink);white-space:nowrap;transition:color 180ms ease,background-color 180ms ease}
.spec-tabs>button[aria-selected=true]{background:var(--ink);color:white}
.spec-tabs.has-highlight>button[aria-selected=true]{background:transparent}
.spec-tabs>.selection-highlight{background:var(--ink)}
.spec-mobile-controls{display:none;gap:16px;margin-bottom:24px}
.spec-mobile-controls label{display:flex;flex-direction:column;gap:8px;font-size:var(--small);color:var(--muted)}
.spec-mobile-controls select{width:100%;min-width:0;min-height:48px;padding:10px 48px 10px 14px;border:1px solid #a6a6aa;border-radius:var(--radius);background-color:white;color:var(--ink);font:400 var(--text)/1.5 'Libre Franklin',Arial,sans-serif;cursor:pointer}
.spec-mobile-controls select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.spec-panels{position:relative}
.spec-panel{margin-bottom:var(--content-gap);outline-offset:4px}
.product-specifications.is-enhanced .spec-panels{margin-bottom:var(--content-gap);overflow-anchor:none}
.product-specifications.is-enhanced .spec-panel{margin-bottom:0}
.spec-panels.is-transitioning{overflow:hidden}
.spec-panels.is-transitioning>.spec-panel{position:absolute;inset:0 0 auto;width:100%}
.spec-category-title{margin:28px 0 16px}
.product-specifications.is-enhanced .spec-category-title{display:none}
.spec-table-frame{overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.spec-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:var(--text)}
.spec-table thead th:first-child{width:50%}
.spec-table thead th[data-trim]{width:25%}
.spec-table thead{background:var(--surface)}
.spec-table th,.spec-table td{padding:18px 24px;line-height:1.5;vertical-align:middle;text-align:center;overflow-wrap:break-word}
.spec-table thead th{font-weight:600}
.spec-table thead th:first-child{text-align:center}
.spec-table tbody th{text-align:left}
.spec-table tbody th{font-weight:400}
.spec-table tbody tr+tr>*{border-top:1px solid var(--line)}
.spec-table tbody tr:first-child>*{border-top:1px solid var(--line)}
.spec-table td+td,.spec-table th+th,.spec-table tbody td{border-left:1px solid var(--line)}
.trim-price{display:block;margin-top:6px;font-size:var(--small);font-weight:400}
.spec-standard{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center}
.spec-unavailable{color:#707075}
.spec-legend{display:flex;align-items:center;flex-wrap:wrap;gap:24px;font-size:var(--small);color:var(--muted);margin-top:20px}
.spec-legend>span{display:inline-flex;gap:8px;align-items:center}
.product-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding-top:36px}
.spec-table-many{min-width:1100px}
.spec-table-many thead th:first-child{width:30%}
.spec-table-many thead th[data-trim]{width:14%}
.spec-table-many th,.spec-table-many td{padding:18px 14px}
.product-colours{text-align:center;padding-block:var(--section-space) 0}
.product-overview+.product-colours{padding-top:calc(var(--section-space) - var(--content-gap))}
/* Visible vehicle bounds define the stage, not the transparent OEM image canvas. */
.colour-stage{position:relative;container-type:size;width:min(100%,clamp(280px,40vw,500px));aspect-ratio:var(--colour-aspect,1.75);margin:32px auto 0;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,var(--surface) 0,white 70%);border-radius:var(--radius)}
.colour-image{position:absolute;left:50%;top:100%;width:min(calc(100cqw * var(--fit-width)),calc(100cqh * var(--fit-height)));max-width:none;height:auto;transform:translate(var(--origin-x),var(--origin-y));opacity:0;transition:opacity var(--selector-duration) var(--ease)}
.colour-image.is-active{opacity:1}
.colour-options{display:flex;justify-content:center;gap:12px;margin-top:16px}
.colour-option{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:6px;border:1px solid transparent;background:transparent;transition:border-color 180ms ease}
.colour-option[aria-pressed=true]{border-color:var(--ink)}
.colour-option>span{display:block;width:28px;height:28px;border:1px solid #0003;border-radius:var(--radius)}
#colour-name{margin-top:12px;font-size:var(--small)}
.product-features{padding-block:var(--section-space) 0}
.product-features>h2{margin-bottom:var(--content-gap)}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--grid-gap);aspect-ratio:2.05}
.feature-card{margin:0;position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:0;color:var(--ink);text-align:left;background:var(--surface);border-radius:var(--radius)}
.feature-card:first-child{grid-column:1/3}
.feature-card:nth-child(4){grid-column:3;grid-row:1/3}
.feature-card img{width:100%;height:100%;object-fit:cover}
.feature-caption{position:absolute;left:24px;right:24px;bottom:20px;z-index:1;display:block;padding:0;background:transparent;color:white;text-shadow:0 1px 6px #000b;font-size:var(--text);font-weight:400;line-height:1.5}
.feature-plus{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--radius);background:white;transition:background-color 180ms ease}
.feature-card:focus-visible{outline-offset:5px}
.technology-section{padding-block:var(--section-space) 0}
.technology-panel{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.technology-panel>img{width:100%;height:100%;max-height:560px;object-fit:cover;aspect-ratio:873/787}
.technology-copy{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:var(--panel-padding)}
.technology-copy p{line-height:1.7;max-width:480px}
.product-closing{padding-top:var(--section-space)}
.product-closing img{width:100%;height:auto;aspect-ratio:3;object-fit:cover;border-radius:var(--radius)}
.product-page dialog::backdrop{background:transparent;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.feature-dialog{width:min(960px,calc(100vw - 40px));overflow:auto;background:transparent;box-shadow:0 16px 64px #18202c26;border:0;padding:0}
.feature-dialog>.close-button{z-index:3;background:transparent;box-shadow:none}
.feature-dialog>.close-button::before{content:'';position:absolute;inset:8px;background:#ffffffe6;border-radius:var(--radius);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.feature-dialog-image{display:block;width:100%;height:auto;object-fit:cover;background:transparent;border:0;border-radius:0}
.feature-dialog-copy{padding:32px;background:#ffffffed;border:0}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .feature-dialog-copy{background:#ffffffb8;backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%)}
}
.feature-dialog-copy h2{max-width:700px}
.feature-dialog-copy p{margin:16px 0 0;max-width:700px;line-height:1.6}
@media(hover:hover) and (pointer:fine){
 .spec-tabs>button:not([aria-selected=true]):hover{background:var(--surface)}
 .feature-card:hover .feature-plus{background:var(--surface);color:var(--ink)}
 .colour-option:hover{border-color:#999}
}
@media(min-width:621px) and (max-width:1279px){
 .product-hero-picture img{object-position:center 70%}
}
@media(max-width:1020px){
 .spec-table th,.spec-table td{padding:16px}
}
@media(max-width:900px){
 .spec-tabs{display:none}
 .spec-mobile-controls{display:grid;grid-template-columns:1fr 1fr}
 .product-specifications.is-enhanced .spec-table [data-trim]:not(.is-selected-trim){display:none}
 .spec-table-many{min-width:0}
 .spec-table thead th:first-child{width:60%}
 .spec-table thead th[data-trim]{width:40%}
 .spec-table th,.spec-table td{padding:16px}
 .feature-grid{gap:16px;aspect-ratio:1.7}
 .feature-caption{left:16px;right:16px;bottom:16px;gap:8px}
 .technology-copy{padding:28px}
}
@media(max-width:620px){
 .product-hero-picture img{object-position:center 80%}
 .product-gallery{grid-template-columns:1fr;gap:16px}
 .spec-mobile-controls{grid-template-columns:1fr;gap:16px}
 .spec-table th,.spec-table td{padding:14px 12px;font-size:var(--small)}
 .spec-table thead th{font-size:var(--text)}
 .spec-legend{gap:16px}
 .product-actions{flex-direction:column;align-items:center;padding-top:28px}
 .feature-grid{aspect-ratio:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}
 .feature-card{aspect-ratio:1}
 .feature-card:first-child{grid-column:1/3;aspect-ratio:16/9}
 .feature-card:nth-child(4){grid-column:1/3;grid-row:auto;aspect-ratio:16/10}
 .feature-caption{gap:8px;align-items:flex-end;bottom:12px;left:12px;right:12px}
 .feature-plus{width:28px;height:28px}
 .technology-panel{grid-template-columns:1fr}
 .technology-panel>img{max-height:420px}
 .technology-copy{padding:28px 24px}
 .product-closing img{aspect-ratio:16/9}
 .feature-dialog{width:calc(100vw - 24px)}
 .feature-dialog-copy{padding:var(--content-gap)}
 .feature-dialog-image{height:auto}
}
@media(prefers-reduced-motion:reduce){.product-page :is(.selection-highlight,.reveal,.colour-image){transition:none!important}}

@media(prefers-reduced-transparency:reduce){
 .feature-dialog-copy,.feature-dialog-image{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Model family pages retain the approved rhythm, with original OEM content. */
.catalogue-product .product-overview-copy{max-width:920px;margin-inline:auto;text-align:center}
.colour-options{flex-wrap:wrap}
.product-feature-collection{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--grid-gap)}
.product-feature-collection>.feature-card{grid-column:span 2;grid-row:auto;aspect-ratio:1.25}
.product-feature-collection.feature-count-1>.feature-card{grid-column:1/-1;aspect-ratio:2.4}
.product-feature-collection.feature-count-2>.feature-card{grid-column:span 3;aspect-ratio:1.5}
.product-feature-collection.feature-count-4>.feature-card{grid-column:span 3;aspect-ratio:1.6}
.product-feature-collection.feature-count-5>.feature-card:nth-child(-n+2){grid-column:span 3;aspect-ratio:1.6}
.catalogue-product .spec-table thead th:first-child{width:40%}
.catalogue-product .spec-table thead th[data-trim]{width:calc(60% / var(--trim-columns))}
.catalogue-product .spec-table-many thead th:first-child{width:28%}
.catalogue-product .spec-table-many thead th[data-trim]{width:calc(72% / var(--trim-columns))}
@media(max-width:900px){
 .catalogue-product .spec-table thead th:first-child{width:60%}
 .catalogue-product .spec-table thead th[data-trim]{width:40%}
 .product-feature-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .product-feature-collection>.feature-card,.product-feature-collection.feature-count-2>.feature-card,.product-feature-collection.feature-count-4>.feature-card,.product-feature-collection.feature-count-5>.feature-card:nth-child(-n+2){grid-column:auto;aspect-ratio:1.25}
 .product-feature-collection>.feature-card:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:2}
}
@media(max-width:620px){
 .product-feature-collection{grid-template-columns:1fr}
 .product-feature-collection>.feature-card,.product-feature-collection.feature-count-1>.feature-card,.product-feature-collection.feature-count-2>.feature-card,.product-feature-collection.feature-count-4>.feature-card,.product-feature-collection.feature-count-5>.feature-card:nth-child(-n+2),.product-feature-collection>.feature-card:last-child:nth-child(odd){grid-column:auto;aspect-ratio:1.5}
}
.product-gallery-rail{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin;margin-top:var(--section-space);padding-bottom:16px}
.product-gallery-rail figure{margin:0;scroll-snap-align:start;aspect-ratio:2;overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.product-gallery-rail img{width:100%;height:100%;object-fit:cover}
@media(max-width:620px){.product-gallery-rail{grid-auto-columns:88%;gap:16px}.product-gallery-rail figure{aspect-ratio:1.4}}

.product-gallery-rail .gallery-contained{background:white}
.product-gallery-rail .gallery-contained img{object-fit:contain}

/* Keep the H6 GT boot-lip spoiler inside the wide feature crop. */
.product-page[data-product="Haval H6 GT"] .feature-card img[src$="/03-1.webp"]{object-position:50% 12%}

.product-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

.technology-panel,.spec-table thead{background:var(--panel-background);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

.technology-panel,.spec-table-frame{border:1px solid var(--panel-border);box-shadow:var(--panel-shadow)}
