.products-section { display:block; min-height:100svh; padding:clamp(64px,7vw,104px) clamp(24px,7vw,110px); background:#0e2038; color:#f5f7fa; font-family:Arial,Helvetica,sans-serif; }
.products-section * { box-sizing:border-box; }
.products-inner { max-width:1240px; margin:0 auto; }
.products-section .products-kicker { color:#a9bccd; margin:0 0 12px; font-size:14px; letter-spacing:.13em; text-transform:uppercase; }
.products-section .products-title { margin:0 0 38px; color:#fff; font-size:clamp(38px,5vw,68px); line-height:1.1; font-weight:500; text-align:left; letter-spacing:-.035em; text-shadow:none; white-space:normal; }
.products-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:38px; align-items:start; }
.products-range { min-width:0; }
.range-intro > h3 { font-size:15px; font-weight:400; color:#a9c2da; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; }
.product-categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 24px; }
.product-category { display:flex; align-items:center; justify-content:center; min-height:118px; padding:20px 12px; background:#193651; border:1px solid #5c7d99; border-radius:6px; text-align:center; }
.product-category h3 { margin:0; font-size:clamp(19px,1.65vw,24px); font-weight:400; line-height:1.3; color:#f0f6fc; }
.range-primary { margin:0 0 12px; color:#e1eaf4; font-size:16px; line-height:1.7; }
.range-secondary { margin:0 0 28px; color:#a5bbcf; font-size:14px; line-height:1.6; }
.brand-group-title { margin:26px 0 14px; color:#b9cee2; font-size:15px; font-weight:400; }
.brand-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; list-style:none; padding:0; margin:0; }
.brand-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:94px; padding:13px 6px 10px; background:#fff; border-radius:5px; color:#233240; text-align:center; }
.brand-card img { display:block; width:88px; max-width:100%; height:39px; object-fit:contain; flex-shrink:0; }
.brand-card span { font-size:14px; line-height:1.25; overflow-wrap:anywhere; }
.product-gallery { min-width:0; position:sticky; top:24px; }
.product-photo-stage { position:relative; aspect-ratio:4/5; width:100%; overflow:hidden; background:#0e2038; }
.product-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .3s ease; }
.product-slide.is-active { opacity:1; }
.photo-hit { position:absolute; top:0; bottom:0; width:50%; padding:0; border:0; background:transparent; cursor:pointer; color:white; z-index:2; display:flex; align-items:center; }
.product-prev { left:0; justify-content:flex-start; }
.product-next { right:0; justify-content:flex-end; }
.photo-chevron { display:grid; place-items:center; width:40px; height:54px; margin:12px; border-radius:4px; background:#07182880; font:38px/1 Arial; border:1px solid #ffffff50; }
.photo-hit:hover .photo-chevron { background:#071828ba; }
.photo-overlay-title,.photo-overlay-count { position:absolute; top:14px; padding:7px 10px; background:#071828b8; color:#fff; font:14px/1.4 Arial; border-radius:4px; z-index:3; pointer-events:none; }
.photo-overlay-title { left:14px; max-width:65%; }
.photo-overlay-count { right:14px; font-variant-numeric:tabular-nums; }
.product-dots { position:absolute; bottom:9px; left:50%; transform:translateX(-50%); display:flex; z-index:4; border-radius:24px; background:#0718288f; }
.product-dot { display:grid; place-items:center; width:40px; height:44px; border:0; background:transparent; padding:0; cursor:pointer; }
.product-dot::after { content:''; width:7px; height:7px; border:1px solid #fff; border-radius:50%; }
.product-dot[aria-pressed="true"]::after { background:#fff; }
.product-gallery button:focus-visible { outline:3px solid #8dc9ff; outline-offset:-3px; }
.products-page { margin:0; background:#0e2038; }
.products-page .products-home { display:inline-flex; align-items:center; min-height:44px; color:#d8e4ef; font:16px Arial; text-decoration:none; margin-bottom:28px; }
.products-page .products-section { padding-top:24px; }
@media(max-width:1100px) and (min-width:801px) { .brand-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .products-layout { gap:24px; } .product-categories { gap:8px; } .product-category { padding:15px 8px; } }
@media(max-width:800px) {
 .products-section { padding:54px 24px; }
 .products-layout { grid-template-columns:1fr; gap:28px; }
 .products-range { display:contents; }
 .range-intro { order:0; }
 .product-gallery { position:static; order:1; }
 .vehicle-brands { order:2; }
 .brand-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .range-secondary { margin-bottom:0; }
}
@media(max-width:480px) {
 .brand-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .product-categories { gap:8px; }
 .product-category { min-height:108px; padding:15px 6px; }
 .product-category h3 { font-size:18px; }
 .photo-chevron { width:32px; height:46px; margin:9px; }
 .photo-overlay-title { max-width:65%; left:10px; top:10px; font-size:13px; }
 .photo-overlay-count { right:10px; top:10px; font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .product-slide { transition:none; } }

.photo-hit:focus-visible { outline:none !important; }
.photo-hit:focus-visible .photo-chevron { outline:3px solid #8dc9ff; outline-offset:3px; }
.product-photo-backdrop { position:absolute; inset:-30px; background-position:center; background-size:cover; filter:blur(24px) brightness(.65); }
.product-categories { gap:12px; margin-bottom:26px; }
.product-category { position:relative; min-height:154px; padding:24px 14px 20px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:left; border:1px solid #497496; border-top:3px solid #99cbed; border-radius:3px; background:linear-gradient(135deg,#254b6d,#142d48); overflow:hidden; }
.product-category::after { content:''; position:absolute; right:-27px; top:31px; width:96px; height:96px; border:1px solid #9bc5e51c; transform:rotate(35deg); pointer-events:none; }
.category-index { font-size:11px; letter-spacing:.16em; color:#a6c9e4; }
.product-category h3 { font-size:clamp(18px,1.7vw,24px); font-weight:600; line-height:1.15; position:relative; z-index:1; }
.product-category h3 span { display:inline-block; margin-top:5px; color:#aec9df; font-size:.75em; font-weight:400; }
.range-copy { padding:0 0 0 20px; border-left:2px solid #709bbb; margin-bottom:30px; }
.range-primary { font-size:17px; line-height:1.65; color:#d7e3ef; margin-bottom:14px; }
.range-copy strong { font-weight:600; color:#fff; }
.range-sourcing { border-top:1px solid #ffffff22; padding-top:14px; font-size:15px; color:#acc9e2; line-height:1.65; margin:0; }
.range-secondary { border-top:1px solid #ffffff22; padding-top:14px; font-size:13px; line-height:1.65; margin:0; }
@media(max-width:480px) {
 .product-categories { gap:8px; }
 .product-category { min-height:138px; padding:17px 9px; }
 .product-category h3 { font-size:17px; }
 .range-copy { padding-left:15px; margin-bottom:0; }
 .range-primary { font-size:16px; }
}

.photo-chevron,.photo-hit:hover .photo-chevron { background:transparent; border:0; border-radius:0; text-shadow:0 2px 8px #000b; }
.product-dots { background:transparent; }
.photo-overlay-title,.photo-overlay-count { background:transparent; padding:0; text-shadow:0 2px 7px #000,0 0 3px #000; }

.product-category { align-items:center; justify-content:center; text-align:center; }

/* Official FORVIA HELLA artwork includes its original clear space. */
.brand-card img[src$="official-forvia-hella-20261009.svg"] { width:100%; height:52px; }