/* CORSAIR Wallpaper Gallery — Immersive redesign
   All rules namespaced under .crsr-wp to avoid theme collisions.
   Typography/CTAs matched to corsair.com homepage (June 2026):
   - Headlines: "Saira Expanded" Light 300, 1px letter-spacing (self-hosted family on corsair.com,
     weights 300/400/600 — already loaded by the site, no @font-face needed here)
   - Sub-headers / product names: Saira 600 (matches .text-header-4/5)
   - Primary CTA: Bright Yellow bg, black Saira 14px/600, 12px 32px padding, square corners
   - Small labels/links: Saira 400, 0.8px letter-spacing (matches ribbon links) */

.crsr-wp {
  --crsr-black: #000;
  --crsr-anthracite: #191919;
  --crsr-dark-grey: #373638;
  --crsr-mid-grey: #8C8C8E;
  --crsr-vivid-grey: #5F626B;
  --crsr-white: #FFF;
  --crsr-yellow: #ECE81A;
  --crsr-font: Saira, Arial, sans-serif;
  --crsr-font-exp: "Saira Expanded", Saira, Arial, sans-serif;
  background: var(--crsr-black);
  color: var(--crsr-white);
  font-family: var(--crsr-font);
}

.crsr-wp * {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

/* HERO */
.crsr-wp-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden
}

.crsr-wp-hero .crsr-wp-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1s;
  opacity: 0
}

.crsr-wp-hero .crsr-wp-bg.crsr-wp-show {
  opacity: 1
}

.crsr-wp-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .45) 100%)
}

.crsr-wp-hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 56px 48px;
  max-width: 1500px;
  margin: 0 auto
}

.crsr-wp-label {
  font-family: var(--crsr-font);
  font-weight: 400;
  letter-spacing: .8px;
  font-size: 13px;
  color: var(--crsr-yellow);
  text-transform: uppercase;
  margin-bottom: 12px
}

.crsr-wp-h1 {
  font-family: var(--crsr-font-exp);
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: 1px;
  color: var(--crsr-white)
}

.crsr-wp-h1 b {
  font-weight: 600
}

.crsr-wp-feat {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap
}

.crsr-wp-hero-cta {
  display: flex;
  gap: 10px
}

.crsr-wp-featname {
  color: var(--crsr-mid-grey);
  font-weight: 300;
  font-size: 15px;
  margin-top: 14px
}

.crsr-wp-featname b {
  color: var(--crsr-white);
  font-weight: 600;
  text-transform: uppercase
}

.crsr-wp-btn {
  font-family: var(--crsr-font);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 10px 24px;
  border-radius: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate
}

.crsr-wp-btn::after {
  background-color: #ff3;
  content: "";
  position: absolute;
  z-index: -1;
  padding: 0 30px;
  display: block;
  transition: .2s;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scaleX(0)
}

.crsr-wp-btn:not(:disabled):hover::after,
.crsr-wp-btn:not(:disabled):focus-visible::after {
  transition: .15s;
  transform: skewX(-45deg) scale(1)
}

.crsr-wp-btn svg {
  width: 16px;
  height: 16px;
  flex: none
}

.crsr-wp-btn-primary {
  background: var(--crsr-yellow);
  color: var(--crsr-black);
  border-color: var(--crsr-yellow)
}

.crsr-wp-btn-primary:hover {
  color: var(--crsr-black)
}

/* secondary = yellow outline (matches coworker's BROWSE ALL) */
.crsr-wp-btn-ghost {
  background: transparent;
  color: var(--crsr-yellow);
  border-color: var(--crsr-yellow);
  transition: color .15s
}

.crsr-wp-btn-ghost:hover {
  color: var(--crsr-black)
}

.crsr-wp-dots-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px
}

.crsr-wp-dots {
  display: flex;
  gap: 8px
}

.crsr-wp-dots button {
  width: 28px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative
}

.crsr-wp-dots button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -1.5px;
  height: 3px;
  background: var(--crsr-dark-grey);
  transition: .3s
}

.crsr-wp-dots button.crsr-wp-on::after {
  background: var(--crsr-yellow)
}

.crsr-wp-pause {
  background: none;
  border: 1px solid var(--crsr-dark-grey);
  color: var(--crsr-white);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  font-family: var(--crsr-font);
  line-height: 1
}

.crsr-wp-pause:hover {
  border-color: var(--crsr-yellow);
  color: var(--crsr-yellow)
}

/* GALLERY */
.crsr-wp-strip-head {
  max-width: 1500px;
  margin: 0 auto;
  padding: 56px 56px 0px;
  display: flex;
  justify-content: space-between;
  align-items: baseline
}

.crsr-wp-h2 {
  font-family: var(--crsr-font-exp);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 32px;
  line-height: 1.125;
  letter-spacing: 1px;
  color: var(--crsr-white)
}

.crsr-wp-h2 b {
  font-weight: 600
}

.crsr-wp-gallery {
  max-width: 1500px;
  margin: 0 auto;
  padding: 32px 56px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px
}

.crsr-wp-tile {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
  background: var(--crsr-anthracite);
  border: none;
  padding: 0;
  display: block;
  width: 100%
}

.crsr-wp-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s, filter .4s;
  display: block
}

.crsr-wp-tile:hover img,
.crsr-wp-tile:focus-visible img {
  transform: scale(1.06);
  filter: brightness(.55)
}

.crsr-wp-tile .crsr-wp-nm {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--crsr-font);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  opacity: 0;
  transition: .25s;
  transform: translateY(6px);
  color: var(--crsr-white)
}

.crsr-wp-tile:hover .crsr-wp-nm,
.crsr-wp-tile:focus-visible .crsr-wp-nm {
  opacity: 1;
  transform: none
}

.crsr-wp-tile .crsr-wp-vw {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--crsr-yellow);
  color: var(--crsr-black);
  font-family: var(--crsr-font);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 0;
  opacity: 0;
  transition: .25s
}

.crsr-wp-tile:hover .crsr-wp-vw,
.crsr-wp-tile:focus-visible .crsr-wp-vw {
  opacity: 1
}

/* LIGHTBOX */
.crsr-wp-lb {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .97);
  z-index: 9999;
  display: none;
  flex-direction: column
}

.crsr-wp-lb.crsr-wp-open {
  display: flex
}

.crsr-wp-lb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px
}

.crsr-wp-lb-name {
  font-family: var(--crsr-font);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.2;
  color: var(--crsr-white)
}

.crsr-wp-lb-name small {
  display: block;
  font-weight: 300;
  text-transform: none;
  color: var(--crsr-mid-grey);
  font-size: 13px
}

/* filled dark circular close (matches coworker's icon button) */
.crsr-wp-lb-close {
  background: var(--crsr-anthracite);
  border: none;
  color: var(--crsr-white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  font-family: var(--crsr-font);
  display: flex;
  align-items: center;
  justify-content: center
}

.crsr-wp-lb-close:hover {
  background: var(--crsr-dark-grey);
  color: var(--crsr-yellow)
}

.crsr-wp-lb-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 70px;
  position: relative;
  min-height: 0
}

.crsr-wp-monitor {
  position: relative;
  max-width: min(900px, 80vw)
}

.crsr-wp-screen {
  border: 10px solid #111;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #2a2a2a, 0 30px 80px rgba(0, 0, 0, .8);
  overflow: hidden;
  background: #111
}

.crsr-wp-screen img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover
}

.crsr-wp-monitor.crsr-wp-uw .crsr-wp-screen img {
  aspect-ratio: 21/9
}

.crsr-wp-monitor.crsr-wp-xe {
  max-width: min(1100px, 85vw)
}

.crsr-wp-monitor.crsr-wp-xe .crsr-wp-screen img {
  aspect-ratio: 32/9
}

/* XENEON EDGE has no stand — it mounts or sits flush */
.crsr-wp-monitor.crsr-wp-xe .crsr-wp-stand,
.crsr-wp-monitor.crsr-wp-xe .crsr-wp-base {
  display: none
}

.crsr-wp-stand {
  width: 110px;
  height: 38px;
  background: linear-gradient(#1c1c1c, #0c0c0c);
  margin: 0 auto;
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%)
}

.crsr-wp-base {
  width: 220px;
  height: 8px;
  background: #1a1a1a;
  border-radius: 4px;
  margin: 0 auto
}

/* solid yellow circular nav (matches coworker's Swipe_Arrow) */
.crsr-wp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--crsr-yellow);
  border: none;
  color: var(--crsr-black);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  font-family: var(--crsr-font);
  display: flex;
  align-items: center;
  justify-content: center
}

.crsr-wp-nav:hover {
  filter: brightness(1.1)
}

.crsr-wp-nav-prev {
  left: 18px
}

.crsr-wp-nav-next {
  right: 18px
}

.crsr-wp-lb-bottom {
  padding: 20px 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center
}

/* pill segmented control (matches coworker's Toggle component) */
.crsr-wp-ratio {
  display: inline-flex;
  border: 1px solid var(--crsr-mid-grey);
  border-radius: 50px
}

.crsr-wp-ratio button {
  font-family: var(--crsr-font);
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1.8px;
  background: transparent;
  border: none;
  color: var(--crsr-white);
  padding: 8px 32px;
  cursor: pointer;
  border-radius: 50px;
  white-space: nowrap
}

.crsr-wp-ratio button.crsr-wp-on {
  background: var(--crsr-white);
  color: var(--crsr-black)
}

.crsr-wp-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center
}

/* CTA-style chip: yellow, SemiBold, spaced label + download arrow icon */
.crsr-wp-chips a {
  font-family: var(--crsr-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--crsr-black);
  background: var(--crsr-yellow);
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 0;
  text-transform: uppercase;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate
}

.crsr-wp-chips a::after {
  background-color: #ff3;
  content: "";
  position: absolute;
  z-index: -1;
  padding: 0 30px;
  display: block;
  transition: .2s;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scaleX(0)
}

.crsr-wp-chips a:hover::after,
.crsr-wp-chips a:focus-visible::after {
  transition: .15s;
  transform: skewX(-45deg) scale(1)
}

.crsr-wp-chips a svg {
  width: 16px;
  height: 16px;
  flex: none
}

.crsr-wp-chips a:hover {
  color: var(--crsr-black)
}

/* A11Y: visible focus ring on every interactive element */
.crsr-wp :focus-visible,
.crsr-wp-lb :focus-visible {
  outline: 3px solid var(--crsr-yellow);
  outline-offset: 2px
}

/* A11Y: respect reduced motion (rotator auto-play is also disabled in JS) */
@media (prefers-reduced-motion: reduce) {

  .crsr-wp *,
  .crsr-wp-lb * {
    transition-duration: .01ms !important;
    animation: none !important
  }

  .crsr-wp-tile:hover img,
  .crsr-wp-tile:focus-visible img {
    transform: none
  }
}

/* reduce desktop 144px gutters on narrower viewports */
@media(max-width:1100px) {

  .crsr-wp-strip-head,
  .crsr-wp-gallery {
    padding-left: 56px;
    padding-right: 56px
  }
}

@media(max-width:700px) {

  .crsr-wp-hero-inner,
  .crsr-wp-strip-head {
    padding-left: 20px;
    padding-right: 20px
  }

  .crsr-wp-gallery {
    padding-left: 20px;
    padding-right: 20px
  }

  .crsr-wp-lb-stage {
    padding: 0 16px
  }

  .crsr-wp-nav {
    display: none
  }
}

html {
  scroll-behavior: smooth;
}