.oem-entry { width: 100%; overflow: hidden; background: #111; }
.oem-stage { position: relative; width: 100%; height: calc(100svh - var(--header-height)); min-height: 520px; overflow: hidden; }
.oem-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity .8s ease, visibility .8s ease, transform 1.2s ease; background: #1b1b1b var(--oem-poster) center / cover no-repeat; }
.oem-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transform: scale(1); }
.oem-slide__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.oem-slide__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 39%), rgb(0 0 0 / 3%) 68%), linear-gradient(0deg, rgb(0 0 0 / 18%), transparent 38%); }
.oem-slide__content { position: relative; z-index: 2; width: min(1200px, 100%); margin: 0 auto; padding: 0 80px; }
.oem-slide__inner { max-width: 700px; }
.oem-slide h1 { margin: 0 0 48px; color: #fff; font-size: clamp(48px, 4.2vw, 64px); font-weight: 700; line-height: 1.2; letter-spacing: 8px; text-shadow: 0 2px 12px rgb(0 0 0 / 20%); }
.oem-learn-more { display: inline-flex; align-items: center; gap: 12px; padding: 14px 36px; color: #fff; background: #e4540d; border-radius: 4px; font-size: 16px; font-weight: 600; letter-spacing: 2px; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.oem-learn-more:hover, .oem-learn-more:focus-visible { color: #fff; background: #d14a0a; box-shadow: 0 8px 24px rgb(228 84 13 / 40%); transform: translateY(-2px); }
.oem-learn-more span { font-size: 20px; transition: transform .25s ease; }
.oem-learn-more:hover span { transform: translateX(4px); }
.oem-arrow { position: absolute; z-index: 3; top: 50%; width: 56px; height: 56px; display: grid; place-items: center; padding: 0; color: #fff; background: transparent; border: 2px solid rgb(255 255 255 / 60%); border-radius: 50%; transform: translateY(-50%); cursor: pointer; transition: border .25s ease, background .25s ease, color .25s ease; }
.oem-arrow:hover, .oem-arrow:focus-visible { color: #e4540d; background: rgb(228 84 13 / 20%); border-color: #e4540d; }
.oem-arrow span { margin-top: -5px; font: 42px/1 Arial, sans-serif; }
.oem-arrow--prev { left: 40px; }
.oem-arrow--next { right: 40px; }
.oem-pagination { position: absolute; z-index: 3; right: 0; bottom: 40px; left: 0; display: flex; justify-content: center; gap: 12px; }
.oem-pagination__item { width: 32px; height: 4px; padding: 0; background: rgb(255 255 255 / 50%); border: 0; border-radius: 2px; cursor: pointer; transition: width .25s ease, background .25s ease; }
.oem-pagination__item.is-active { width: 48px; background: #e4540d; }
.oem-loading { position: absolute; z-index: 4; top: 50%; left: 50%; display: none; transform: translate(-50%, -50%); }
.oem-loading.is-visible { display: block; }
.oem-loading span { display: block; width: 40px; height: 40px; border: 3px solid rgb(255 255 255 / 20%); border-top-color: #e4540d; border-radius: 50%; animation: oem-spin .8s linear infinite; }
@keyframes oem-spin { to { transform: rotate(360deg); } }
.oem-empty { min-height: 55vh; display: grid; place-content: center; gap: 8px; padding: 60px 24px; color: #fff; text-align: center; background: #151515; }
.oem-empty h1, .oem-empty p { margin: 0; }

.oem-detail { overflow-x: clip; background: #f5f5f5; }
.oem-detail__banner { width: 100%; overflow: hidden; background: #ddd; }
.oem-detail__banner img { width: 100%; height: 620px; min-height: 260px; max-height: 620px; object-fit: cover; }
.oem-detail-container { width: min(1200px, 100%); margin: 0 auto; padding: 0 80px; }
.oem-category-sentinel { width: 1px; height: 1px; visibility: hidden; }
.oem-category-nav {
  position: sticky;
  z-index: 100;
  top: 4rem;
  padding: 50px 0;
  background: linear-gradient(180deg, #e5e5e5, #ececec);
  transition: padding .3s ease, box-shadow .3s ease;
}
.oem-category-nav.is-compact { padding: 14px 0; box-shadow: 0 2px 8px rgb(0 0 0 / 10%); }
.oem-category-list { display: flex; justify-content: center; gap: clamp(30px, 3.75vw, 72px); }
.oem-category { display: flex; align-items: center; flex-direction: column; flex-shrink: 0; gap: 12px; padding: 0; color: #707070; background: transparent; border: 0; cursor: pointer; }
.oem-category img { width: 56px; height: 56px; object-fit: contain; filter: grayscale(1) opacity(.4); transition: filter .3s ease, width .3s ease, height .3s ease; }
.oem-category span { font-size: 13px; white-space: nowrap; transition: color .3s ease; }
.oem-category.is-active img { filter: brightness(0) saturate(100%) invert(36%) sepia(92%) saturate(1954%) hue-rotate(356deg) brightness(94%); }
.oem-category.is-active span { color: #e3540b; }
.oem-category-nav.is-compact .oem-category img { width: 40px; height: 40px; }
.oem-category-nav.is-compact .oem-category span { font-size: 12px; }
.oem-gallery { min-height: 600px; padding: 60px 0 100px; background: #f5f5f5; }
.oem-gallery-panel { display: none; }
.oem-gallery-panel.is-active { display: block; animation: oem-gallery-in .35s ease; }
@keyframes oem-gallery-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.oem-gallery figure { margin: 0; background: #e8e8e8; overflow: hidden; border-radius: 14px; box-shadow: 0 4px 16px rgb(0 0 0 / 8%); }
.oem-gallery figure img { width: 100%; height: auto; display: block; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.oem-gallery-large { margin-bottom: 16px !important; }
.oem-gallery-large:hover { box-shadow: 0 16px 40px rgb(0 0 0 / 15%); }
.oem-gallery-large:hover img { transform: scale(1.03); }
.oem-gallery-small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.oem-gallery-item { transition: transform .35s ease, box-shadow .35s ease; }
.oem-gallery-item:hover { box-shadow: 0 16px 40px rgb(0 0 0 / 15%); transform: translateY(-8px); }
.oem-gallery-item:hover img { transform: scale(1.05); }
.oem-back-top { position: fixed; z-index: 101; right: 40px; bottom: 40px; width: 48px; height: 48px; padding: 0; color: #fff; background: #e4540d; border: 0; border-radius: 50%; box-shadow: 0 4px 12px rgb(228 84 13 / 30%); cursor: pointer; }
.oem-back-top[hidden] { display: none; }

@media (min-width: 1025px) {
  /* Match the gallery edges to the category strip's first and last icons. */
  .oem-gallery > .oem-detail-container { padding-inline: 0; }
}

@media (min-width: 768px) and (max-width: 800px) {
  .oem-category-nav { top: 3.892857rem; }
}

@media (max-width: 1024px) {
  .oem-slide__content, .oem-detail-container { padding-inline: 40px; }
  .oem-slide h1 { font-size: 48px; }
  .oem-arrow--prev { left: 20px; }
  .oem-arrow--next { right: 20px; }
  .oem-detail__banner img { height: 400px; }
  .oem-category-nav { padding: 32px 0; }
  .oem-category-list { gap: 30px; }
  .oem-category img { width: 48px; height: 48px; }
  .oem-gallery-small { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 767px) {
  .oem-stage { min-height: 470px; }
  .oem-slide__content { padding-inline: 24px; }
  .oem-slide h1 { margin-bottom: 32px; font-size: 32px; letter-spacing: 4px; }
  .oem-learn-more { padding: 12px 28px; font-size: 14px; }
  .oem-arrow { display: none; }
  .oem-pagination { bottom: 24px; gap: 8px; }
  .oem-pagination__item { width: 20px; height: 3px; }
  .oem-pagination__item.is-active { width: 32px; }
  .oem-detail__banner img { height: 280px; min-height: 0; }
  .oem-detail-container { padding-inline: 16px; }
  .oem-category-nav, .oem-category-nav.is-compact { top: 6.25rem; padding: 10px 0; background: rgb(255 255 255 / 95%); box-shadow: 0 2px 12px rgb(0 0 0 / 8%); backdrop-filter: blur(10px); }
  .oem-category-nav .oem-detail-container { padding: 0; }
  .oem-category-list { justify-content: flex-start; gap: 8px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .oem-category-list::-webkit-scrollbar { display: none; }
  .oem-category, .oem-category-nav.is-compact .oem-category { flex-direction: row; gap: 6px; padding: 8px 16px; background: #fff; border-radius: 20px; scroll-snap-align: start; }
  .oem-category img, .oem-category-nav.is-compact .oem-category img { width: 24px; height: 24px; }
  .oem-category span, .oem-category-nav.is-compact .oem-category span { font-size: 13px; }
  .oem-category.is-active { background: #e3540b; box-shadow: 0 2px 8px rgb(227 84 11 / 30%); }
  .oem-category.is-active img { filter: brightness(0) invert(1); }
  .oem-category.is-active span { color: #fff; }
  .oem-gallery { min-height: 400px; padding: 30px 0 50px; }
  .oem-gallery figure { border-radius: 10px; }
  .oem-gallery-large { margin-bottom: 12px !important; }
  .oem-gallery-large img { max-height: 400px; object-fit: cover; }
  .oem-gallery-small { gap: 10px; }
  .oem-gallery-item:hover { transform: none; }
  .oem-back-top { right: 20px; bottom: 20px; width: 40px; height: 40px; }
}

@media (max-width: 520px) {
  .oem-category-nav, .oem-category-nav.is-compact { top: 3.75rem; }
}

@media (max-width: 480px) {
  .oem-slide__content { padding-inline: 16px; }
  .oem-slide h1 { margin-bottom: 24px; font-size: 24px; letter-spacing: 2px; }
  .oem-learn-more { padding: 10px 24px; font-size: 13px; letter-spacing: 1px; }
  .oem-detail__banner img { height: 200px; }
  .oem-detail-container { padding-inline: 12px; }
  .oem-category-list { gap: 6px; padding-inline: 12px; }
  .oem-category, .oem-category-nav.is-compact .oem-category { padding: 6px 12px; }
  .oem-category img, .oem-category-nav.is-compact .oem-category img { width: 20px; height: 20px; }
  .oem-category span, .oem-category-nav.is-compact .oem-category span { font-size: 12px; }
  .oem-gallery { padding: 20px 0 40px; }
  .oem-gallery-small { gap: 8px; }
}

@media (max-width: 450px) {
  .oem-category-nav, .oem-category-nav.is-compact { top: 3.125rem; }
}