:root { --product-orange: #e3540b; --product-text: #333; }

.cps-products,
.cps-product-detail { padding-top: max(4vw, calc(3.75rem + 2px)); color: var(--product-text); }

/* Product index banner and category rail */
.products-banner { position: relative; width: 100vw; aspect-ratio: 1920 / 400; overflow: hidden; background: #050505; }
.products-banner__slides,
.products-banner__slide,
.products-banner__slide picture { position: absolute; inset: 0; display: block; }
.products-banner__slide { opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s ease; }
.products-banner__slide.is-active { opacity: 1; visibility: visible; }
.products-banner__slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.products-banner__slide h1 { position: absolute; top: 50%; left: 20vw; margin: 0; color: #f5f5f5; font-size: 3rem; font-weight: 500; transform: translateY(-50%); }
.products-banner__arrow { position: absolute; z-index: 3; top: 50%; width: 4.75rem; height: 4.75rem; padding: 0; color: #fff; background: rgb(0 0 0 / 4%); border: .125rem dotted #fff; border-radius: 50%; font-size: 2.25rem; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.products-banner__arrow:hover { color: var(--product-orange); border-color: var(--product-orange); }
.products-banner__arrow--prev { left: 5.5rem; }
.products-banner__arrow--next { right: 5.5rem; }

.product-category-nav { background: #fafafa; }
.product-category-nav__inner { height: 11.25rem; display: flex; align-items: center; justify-content: center; }
.product-category-nav__item { width: 15.6875rem; min-width: 0; height: 5.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; color: #b2b2b2; border-right: .0625rem solid #b3b3b3; }
.product-category-nav__item:last-child { border-right: 0; }
.product-category-nav__item img { width: 3.125rem; height: 3.125rem; object-fit: contain; filter: grayscale(1); opacity: .65; }
.product-category-nav__item span { color: #b2b2b2; font-size: 1rem; font-weight: 400; line-height: 1rem; }
.product-category-nav__item:hover span,
.product-category-nav__item.is-active span { color: var(--product-orange); }
.product-category-nav__item.is-active img { filter: none; opacity: 1; }

/* Product index filters and cards: dimensions mirror the live Nuxt component. */
.products-catalogue { box-sizing: border-box; max-width: 90rem; margin: 0 auto; padding: 5.5625rem 0 6.5625rem; display: flex; gap: 6.25rem; background: #f5f5f5; }
.cps-products { background: #f5f5f5; overflow: hidden; }
.products-filters { width: 16.25rem; flex: 0 0 16.25rem; }
.products-filters__selected { width: 16.25rem; padding-bottom: 1.5rem; border-bottom: .0625rem solid #c5c5c5; }
.products-filters__heading { display: flex; justify-content: space-between; margin-bottom: 1.4375rem; }
.products-filters__heading strong,
.products-filters__heading a { color: #333; cursor: pointer; font-size: 1rem; font-weight: 400; line-height: 1rem; text-align: center; }
.products-filters__heading a:hover { color: var(--product-orange); }
.products-filter-group { margin: 0; padding: 1.5rem 0; border: 0; border-bottom: .0625rem solid #ccc; }
.products-filter-group:last-child { border-bottom: 0; }
.products-filter-group__title { margin-bottom: 1.25rem; display: block; color: #666; font-size: 1rem; font-weight: 400; line-height: 1rem; }
.products-filter-group__options { box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 1rem; }
.products-filter-group__option { box-sizing: border-box; width: 45%; display: flex; gap: .375rem; color: #b3b3b3; cursor: pointer; font-size: .875rem; font-weight: 300; line-height: .875rem; }
.products-filter-group input { position: absolute; opacity: 0; }
.products-filter-group__box { box-sizing: border-box; width: .875rem; height: .875rem; flex: 0 0 .875rem; display: grid; place-items: center; color: transparent; border: .0625rem solid #b3b3b3; line-height: .875rem; text-align: center; user-select: none; }
.products-filter-group__box > span { font-size: .75rem; transform: scale(.4); }
.products-filter-group input:checked + .products-filter-group__box { color: #fff; background: var(--product-orange); border: 0; }
.products-filter-group input:focus-visible + .products-filter-group__box { outline: .125rem solid rgb(227 84 11 / 35%); outline-offset: .125rem; }

.products-results { width: 100%; }
.products-results__header { margin-bottom: 2.1875rem; display: flex; justify-content: space-between; align-items: flex-start; }
.products-results__header p { margin: 0; color: #333; font-size: 1rem; font-weight: 400; line-height: 1rem; }
.products-sort { box-sizing: border-box; width: 100%; max-width: 11.25rem; position: relative; z-index: 8; background: #fafafa; border-radius: .125rem; }
.products-sort__trigger { box-sizing: border-box; width: 100%; padding: .625rem 1.0625rem; display: block; color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; text-align: left; }
.products-sort__trigger > span { display: flex; justify-content: space-between; color: #4d4d4d; font-size: .75rem; font-weight: 400; line-height: .875rem; white-space: nowrap; }
.products-sort__trigger svg { width: .75rem; height: .5rem; margin-left: .3125rem; align-self: center; }
.products-sort__menu { box-sizing: border-box; width: 100%; padding: 0 .375rem .8125rem; position: absolute; top: 100%; left: 0; display: none; flex-direction: column; background: #fafafa; }
.products-sort__menu button { width: 100%; padding: .25rem .75rem; color: #6e6e6e; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 400; line-height: .875rem; text-align: left; }
.products-sort__menu button:hover,
.products-sort__menu button:focus-visible { background: #f2f2f2; outline: 0; }
.products-sort:hover .products-sort__menu,
.products-sort:focus-within .products-sort__menu,
.products-sort.is-open .products-sort__menu { display: flex; }
.products-grid { display: grid; grid-template-columns: repeat(4, 15vw); gap: 1.5rem; }
.products-card { min-width: 0; max-width: 15vw; background: #fafafa; border-radius: .125rem; transition: box-shadow 1s; }
.products-card > a { box-sizing: border-box; min-height: 23.8vw; padding: 2vw 2vw 1.5vw; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.products-card__image { width: 10vw; max-width: 100%; height: 15vw; max-height: 15vw; margin-bottom: 1vw; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.products-card__image img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform 1s; }
.products-card__colors { height: 1.125rem; margin-bottom: .625rem; display: flex; justify-content: center; gap: .3125rem; }
.products-card__colors span { box-sizing: border-box; width: 1.125rem; height: 1.125rem; display: block; background: var(--swatch, #3b3c3c); border: .0625rem solid #dcdcdc; }
.products-card h2 { width: 10.625rem; margin: 0; color: #3c3b3b; font-size: .875rem; font-weight: 400; line-height: 1.25rem; text-align: center; }
.products-card:hover { box-shadow: 0 .125rem 1.25rem rgb(0 0 0 / 15%); }
.products-card:hover h2 { color: var(--product-orange); }
.products-card:hover .products-card__image img { transform: scale(1.15); }
.products-results__empty { grid-column: 1 / -1; min-height: 20rem; padding-top: 5rem; color: #999; text-align: center; }

/* Detail overview */
.cps-product-detail { overflow: hidden; background: #efefef; }
.product-detail-nav { position: fixed; z-index: 20; top: max(4vw, calc(3.75rem + 2px)); left: 0; right: 0; height: 3.125rem; padding: 0 16vw; display: flex; align-items: center; justify-content: space-around; color: #fff; background: #4d4d4d; opacity: 0; pointer-events: none; transform: translateY(-100%); transition: opacity .25s ease, transform .25s ease; }
.product-detail-nav.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.product-detail-nav strong { font-size: 1rem; font-weight: 500; }
.product-detail-nav div { width: 40vw; display: flex; }
.product-detail-nav a { margin-right: 5vw; color: #fff; font-size: .875rem; font-weight: 400; white-space: nowrap; }
.product-detail-nav a:hover { color: var(--product-orange); }

.product-intro { position: relative; display: flex; justify-content: center; background: #efefef; overflow: hidden; }
.product-intro::after { position: absolute; z-index: 0; top: 0; right: 0; width: 42vw; height: 100%; content: ""; opacity: .46; background: center / cover no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='760' viewBox='0 0 520 760'%3E%3Cg fill='%23fff' fill-opacity='.38'%3E%3Cpath d='M280 0h120l-60 104z'/%3E%3Cpath d='M400 0h120l-60 104z'/%3E%3Cpath d='M340 104h120l-60 104z'/%3E%3Cpath d='M220 520h120l-60 104z'/%3E%3Cpath d='M340 520h120l-60 104z'/%3E%3Cpath d='M280 624h120l-60 104z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
.product-intro__inner { margin: 10vh 0; display: flex; gap: 5rem; justify-content: center; }
.product-intro__inner { position: relative; z-index: 1; }
.product-intro__visual { display: flex; align-items: center; flex-direction: row; justify-content: flex-start; text-align: center; }
.product-intro__stage { box-sizing: border-box; width: 35vw; height: 35vw; max-width: 35vw; max-height: 35vw; display: flex; align-items: center; justify-content: center; }
.product-intro__stage img { width: 100%; height: 100%; object-fit: contain; }
.product-intro__thumbs-wrap { margin-left: 5vw; display: flex; flex-direction: column; align-items: center; }
.product-intro__thumbs-wrap > button { width: 2rem; padding: .25rem; color: #b3b3b3; background: transparent; border: 0; cursor: pointer; }
.product-intro__thumbs { width: 10vw; height: 33.5vw; overflow-y: auto; scrollbar-width: none; }
.product-intro__thumbs::-webkit-scrollbar { display: none; }
.product-intro__thumb { box-sizing: border-box; width: 8vw; max-width: 8vw; height: 8vw; max-height: 8vw; margin: 0 auto .3125rem; padding: 0; display: block; background: #dbdbdb; border: .0625rem solid transparent; cursor: pointer; }
.product-intro__thumb img { width: 100%; height: 100%; display: block; object-fit: contain; opacity: .6; }
.product-intro__thumb.is-active { border-color: var(--product-orange); }
.product-intro__thumb.is-active img { opacity: 1; }
.product-intro__summary { max-width: 44vw; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.product-intro__summary h1 { margin: 0 0 1.25rem; color: #333; font-size: 1.875rem; font-weight: 400; }
.product-intro__description { min-height: 10vw; margin: 1vw 0; display: flex; flex-direction: column; justify-content: flex-end; }
.product-intro__description p { margin: 0; color: #666; font-size: .75rem; font-weight: 300; letter-spacing: .0875rem; line-height: 1.3125rem; white-space: pre-wrap; }
.product-intro__color-title { margin: 0 0 1.25rem; color: #333; font-size: .875rem; font-weight: 300; }
.product-intro__color-title strong { font-weight: 400; }
.product-intro__colors { margin-bottom: 1.875rem; display: flex; gap: .6875rem; }
.product-intro__colors button { padding: 0; display: flex; flex-direction: column; align-items: center; background: transparent; border: 0; cursor: pointer; }
.product-intro__colors button span { box-sizing: border-box; width: 1.5rem; height: 1.5rem; display: block; background: var(--swatch, #c0c0c0); border: .0625rem solid #ccc; }
.product-intro__colors button i { width: 0; height: 0; margin-top: .25rem; border: .25rem solid transparent; border-bottom-color: var(--product-orange); opacity: 0; }
.product-intro__colors button.is-active i { opacity: 1; }
.product-related-select { display: grid; gap: 1.25rem; }
.product-related-select label { color: #4d4d4d; font-size: .875rem; font-weight: 400; }
.product-related-select select { box-sizing: border-box; width: 15rem; height: 2.25rem; padding: 0 .625rem; color: #666; background: #efefef; border: .0625rem solid #bfbfbf; }
.product-quote { margin-top: 1.5625rem; padding: .625rem 1.5rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #f0961e, #e3540b); border-radius: 3.125rem; box-shadow: 0 .25rem .75rem rgb(227 84 11 / 35%); font-size: .875rem; font-weight: 500; line-height: 1.25rem; }
.product-quote:hover { color: #fff; background: linear-gradient(135deg, #faaa28, #f06414); }

/* Official detail imagery, parameter tables, gallery and downloads */
.product-detail-stage { position: relative; width: 100%; display: grid; overflow: hidden; background: #efefef; }
.product-detail-background,
.product-detail-stage__foreground { min-width: 0; grid-area: 1 / 1; }
.product-detail-background { position: relative; z-index: 0; width: 100%; align-self: start; background: #111; pointer-events: none; }
.product-detail-stage__foreground { position: relative; z-index: 1; width: 100%; align-self: start; }
.product-detail-stage.has-background .product-detail-html { background: transparent; }
.product-detail-background__item { position: relative; width: 100%; overflow: hidden; line-height: 0; }
.product-detail-background__item img,
.product-detail-background__item video,
.product-detail-background__item iframe { width: 100%; height: auto; display: block; border: 0; }
.product-detail-background__item--video { aspect-ratio: 16 / 9; background: #111; }
.product-detail-background__item--video video,
.product-detail-background__item--video iframe { width: 100%; height: 100%; object-fit: cover; }
.product-detail-background__poster { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.product-detail-background__item--external video,
.product-detail-background__item--external iframe { position: relative; z-index: 1; }
.product-detail-html { box-sizing: border-box; width: 100%; padding: 0 8vw; background: #efefef; font-family: inherit; }
.product-detail-html * { font-family: inherit !important; }
.product-detail-html > .content-block { margin-bottom: 0; }
.product-detail-html p { margin: 0; }
.product-detail-html img { width: 100%; height: auto; display: block; }
.product-detail-html--mobile { display: none; }
.product-specifications,
.product-official-gallery,
.product-downloads { box-sizing: border-box; width: 100%; padding: 7.5rem 8vw 0; display: flex; flex-direction: column; align-items: center; background: #efefef; }
.product-specifications h2,
.product-official-gallery h2,
.product-downloads h2 { width: 84vw; margin: 0 0 3.25rem; color: #4d4d4d; font-size: 1.5rem; font-weight: 400; line-height: 1.5rem; }
.product-specifications__tables { display: flex; justify-content: center; }
.product-specifications table { margin-right: 1vw; border-collapse: collapse; }
.product-specifications th,
.product-specifications td { box-sizing: border-box; height: 2.0625rem; padding: 0 .125rem; color: #b3b3b3; border-top: .0625rem solid #e5e5e5; font-size: .875rem; font-weight: 400; line-height: 1.3; text-align: left; white-space: pre-line; }
.product-specifications th { width: 21vw; }
.product-specifications td { width: 20vw; }
.product-specifications tr:hover th,
.product-specifications tr:hover td { color: var(--product-orange); background: #f2f2f2; }
.product-official-gallery { padding-top: 7.5rem; }
.product-official-gallery__grid { width: 84vw; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.75rem 1vw; }
.product-official-gallery__grid button { width: 20vw; height: 20vw; padding: 0; background: #d6d6d6; border: 0; cursor: pointer; overflow: hidden; }
.product-official-gallery__grid img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform .35s ease; }
.product-official-gallery__grid button:hover { box-shadow: 0 .125rem 1.875rem rgb(112 112 112 / 15%); }
.product-official-gallery__grid button:hover img { transform: scale(1.025); }
.product-downloads { padding-bottom: 7.5rem; }
.product-downloads__items { width: 84vw; }
.product-downloads__items a { width: 100%; padding: 0 1vw .9375rem; margin-bottom: 1.875rem; display: flex; justify-content: space-between; color: #5f605e; border-bottom: .0625rem solid #5f605e; }
.product-downloads__items a:hover { color: var(--product-orange); }
.product-downloads__items p { margin: 1.25rem 0 0; color: #999; font-size: .875rem; text-align: center; }
.product-image-dialog { width: calc(100vw - 3.75rem); height: calc(100vh - 10.625rem); padding: 3.5rem; background: #fafafa; border: 0; }
.product-image-dialog::backdrop { background: rgb(0 0 0 / 50%); }
.product-image-dialog > button { position: absolute; top: 1rem; right: 1rem; width: 3.125rem; height: 3.125rem; color: #555; background: transparent; border: .0625rem solid #b3b3b3; font-size: 1.5rem; cursor: pointer; }
.product-image-dialog > img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 1715px) {
  .products-catalogue { max-width: 87.5rem; }
}
@media (max-width: 1450px) {
  .products-catalogue { max-width: 68.75rem; }
  .product-intro__inner { gap: 5rem; padding: 0 .625rem; }
}
@media (max-width: 1280px) {
  .products-catalogue { max-width: 62.5rem; gap: 3.125rem; }
  .products-grid { gap: .625rem; }
}
@media (max-width: 1024px) {
  .products-catalogue { box-sizing: border-box; padding: 3.125rem .625rem; gap: 3.125rem; }
  .products-grid { grid-template-columns: repeat(3, 15vw); }
  .product-intro__stage { width: 31.25rem; height: 31.25rem; }
  .product-specifications__tables { gap: 1.25rem; }
}

@media (max-width: 767px) {
  .products-index .site-header,
  .product-detail .site-header,
  .products-index .site-header__inner,
  .product-detail .site-header__inner,
  .products-index .site-logo,
  .product-detail .site-logo,
  .products-index .site-header__tools,
  .product-detail .site-header__tools { height: 70px; }
  .products-index .primary-navigation,
  .product-detail .primary-navigation { top: 70px; }
  .cps-products,
  .cps-product-detail { padding-top: 70px; }

  .products-banner { height: auto; aspect-ratio: 750 / 456; }
  .products-banner__slide h1 { display: none; }
  .products-banner__arrow { display: none; }
  .product-category-nav__inner { height: 7.875rem; padding: 0 2.1875rem; justify-content: flex-start; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .product-category-nav__inner::-webkit-scrollbar { display: none; }
  .product-category-nav__item { min-width: 50%; width: 50%; height: 4rem; gap: .625rem; }
  .product-category-nav__item img { width: 2.5rem; height: 2.5rem; }
  .product-category-nav__item span { font-size: .875rem; }

  .products-catalogue { max-width: none; padding: 1.875rem 3.75rem; flex-direction: column; gap: 3.125rem; background: #fff; }
  .products-filters { width: auto; flex: none; }
  .products-filters__selected { width: auto; padding: 0; border: 0; }
  .products-filters__heading { margin-bottom: .625rem; }
  .products-filters__heading strong,
  .products-filters__heading a { font-size: 1.375rem; font-weight: 500; }
  .products-filter-group { border: 0; }
  .products-filter-group__title { font-size: 1.125rem; }
  .products-filter-group__option { color: #707070; font-size: 1.125rem; }
  .products-filter-group__box { width: 1.125rem; height: 1.125rem; flex-basis: 1.125rem; }
  .products-results__header { align-items: center; }
  .products-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.875rem 3.125rem; }
  .products-card { width: 17.875rem; max-width: 17.875rem; max-height: 26.875rem; }
  .products-card > a { min-height: 26.875rem; padding: .9375rem 1.25rem; }
  .products-card__image { width: 9.375rem; height: 18.6875rem; max-height: 18.6875rem; max-width: 9.375rem; }
  .products-card h2 { font-size: .875rem; }

  .product-detail-nav { display: none; }
  .product-intro { min-height: 100vh; padding: 0; }
  .product-intro::after { right: auto; left: 0; width: 58vw; height: 22rem; background-size: 24rem auto; transform: scaleX(-1); }
  .product-intro__inner { box-sizing: border-box; width: 100%; margin: 0; padding: 7rem 4rem 2.5rem; flex-direction: column; gap: 2rem; }
  .product-intro__visual { width: 100%; flex-direction: column; }
  .product-intro__stage { width: 100%; max-width: 100%; height: 100vw; max-height: 100vw; }
  .product-intro__thumbs-wrap { width: 100%; max-width: 100vw; margin: 0; flex-direction: row; justify-content: center; }
  .product-intro__thumbs-wrap > button { display: none; }
  .product-intro__thumbs { width: 80vw; height: 4.25rem; display: flex; overflow-x: auto; overflow-y: hidden; }
  .product-intro__thumb { width: 3.625rem; min-width: 3.625rem; height: 3.625rem; margin: 0 .125rem; }
  .product-intro__summary { width: 100%; max-width: 99vw; padding: 0 0 2.5rem 2.5rem; box-sizing: border-box; }
  .product-intro__summary h1 { margin: 0 0 2.5rem; }
  .product-intro__description { min-height: 0; margin: 0 0 .625rem; }
  .product-intro__colors { margin-bottom: 1.5rem; }

  .product-detail-html--desktop { display: none; }
  .product-detail-html--mobile { padding: 0 .625rem; display: block; }
  .product-detail-html--mobile img { width: 100%; }
  .product-specifications,
  .product-official-gallery,
  .product-downloads { padding: 2.5rem .625rem 0; }
  .product-specifications h2,
  .product-official-gallery h2,
  .product-downloads h2 { width: 100%; margin: 0 0 1.25rem; padding: .625rem; }
  .product-specifications__tables { width: 100%; display: block; }
  .product-specifications table { width: 100%; margin: 0; }
  .product-specifications th,
  .product-specifications td { height: 1.375rem; padding: .25rem .75rem; border: .0625rem solid #e5e5e5; font-size: .75rem; line-height: 1.375rem; }
  .product-specifications th { width: 40%; min-width: 7.5rem; }
  .product-specifications td { width: 60%; color: #333; }
  .product-official-gallery__grid { width: 100%; justify-content: center; gap: .625rem; }
  .product-official-gallery__grid button { width: 90vw; height: 90vw; }
  .product-downloads { padding-bottom: 3.125rem; }
  .product-downloads__items { width: 90vw; }
}

@media (max-width: 600px) {
  .products-catalogue { padding: 1.5625rem 1.875rem; }
}
@media (max-width: 520px) {
  .products-catalogue { padding: .625rem; }
  .products-filters__heading strong,
  .products-filters__heading a,
  .products-filter-group__title { font-size: 1.125rem; }
  .products-filter-group { padding: .625rem 0; }
  .products-filter-group__options { gap: .625rem; }
  .products-filter-group__option { font-size: .75rem; }
  .products-filter-group__box { width: .9375rem; height: .9375rem; flex-basis: .9375rem; line-height: .9375rem; }
  .products-grid { gap: 1.25rem; }
  .products-card { width: 45vw; max-width: 45vw; }
  .products-card > a { min-height: 25rem; padding: .625rem; }
  .products-card__image { width: 6.25rem; height: 18rem; max-width: 6.25rem; }
  .products-card h2 { width: 7.5rem; font-size: .75rem; }
  .product-intro__inner { padding: 5rem .625rem 2.5rem; }
  .product-intro__stage { height: 24rem; }
  .product-intro__thumbs-wrap { margin-top: 1.5rem; }
  .product-intro__stage img { max-width: 75%; }
  .product-intro__summary { padding-left: 2.5rem; }
  .product-intro__summary h1 { margin-bottom: 1.5rem; }
}
@media (max-width: 400px) {
  .products-catalogue { padding: 1.5625rem .625rem; }
  .products-grid { gap: .625rem; }
  .products-card { width: 46vw; max-width: 46vw; }
}
