/* RaceGrip editorial design. The configurator logic and product plates are shared. */
:root {
  --bg: #08090a;
  --panel: #121416;
  --panel2: #1b1d20;
  --line: #34373a;
  --text: #f4f4f1;
  --muted: #a2a5a7;
  --accent: #f4f4ef;
  --paper: #e8e9e8;
}

html { scroll-padding-top: 28px; }
body {
  background: #08090a;
  color: var(--text);
  font-family: Manrope, Arial, sans-serif;
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), #ffffff06 100%);
  background-size: 22vw 100%;
}
main { width: 100%; max-width: none; }
.site-header {
  height: 82px;
  width: min(1600px, calc(100% - 72px));
  border-bottom: 1px solid #ffffff21;
  gap: 34px;
}
.wordmark { gap: 11px; }
.brand-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  position: relative;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -6px;
  color: #fff;
  border: 1px solid #f4f4f1;
  transform: none;
  padding-right: 5px;
}
.brand-symbol span { font-size: 14px; transform: translate(-1px, 4px); }
.wordmark strong { font-size: 19px; font-weight: 800; letter-spacing: 2.1px; }
.wordmark > span:last-child { margin-left: 3px; font-size: 8px; letter-spacing: 1.8px; color: #aeb0ae; }
.header-nav { margin-left: auto; display: flex; gap: 28px; align-items: center; }
.header-nav a { color: #d4d4d1; font-size: 11px; font-weight: 700; transition: color .2s; }
.header-nav a:hover { color: #fff; }
.design-switch { display: flex; align-items: center; gap: 0; border: 1px solid #ffffff45; padding: 3px; }
.design-switch a { padding: 7px 9px; color: #aaa; font-size: 9px; font-weight: 700; white-space: nowrap; }
.design-switch a[aria-current=page] { background: #eaeae6; color: #0d0e0f; }

.intro {
  width: min(1680px, 100%);
  min-height: min(710px, 54vw);
  margin: 0 auto;
  padding: clamp(65px, 8vw, 120px) max(5.2vw, calc((100% - 1490px)/2));
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(90deg, #08090a 2%, #08090aec 23%, #08090a75 46%, #08090a08 74%), url('assets/hero-racegrip-coleccion.png') center 52% / cover no-repeat;
  border-bottom: 1px solid #ffffff24;
}
.intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(18% - 1px), #ffffff13 calc(18% - 1px) 18%);
  opacity: .34;
}
.intro::after {
  content: 'RACEGRIP';
  position: absolute;
  bottom: -7vw;
  left: 2%;
  z-index: 0;
  font: 800 clamp(120px, 19vw, 315px)/1 Manrope, sans-serif;
  letter-spacing: -.09em;
  color: #ffffff09;
  pointer-events: none;
  white-space: nowrap;
}
.hero-copy { position: relative; z-index: 1; width: min(570px, 48%); }
.eyebrow { color: #d0d1ce; font-size: 10px; font-weight: 800; letter-spacing: 2.8px; }
.hero-copy .eyebrow::before { content: ''; display: inline-block; width: 27px; height: 1px; background: #e6e6e2; vertical-align: middle; margin-right: 13px; }
.intro h1 {
  font-size: clamp(58px, 5.2vw, 88px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.074em;
  margin: 22px 0 26px;
  text-wrap: balance;
}
.intro h1 em { color: #e7e8e7; font-weight: 800; }
.intro p { display: block; max-width: 440px; margin: 0; color: #b9bcbd; font-size: 13px; line-height: 1.95; }
.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  margin-top: 33px;
  min-width: 210px;
  padding: 15px 17px;
  background: #f0f0ed;
  color: #121314;
  font-size: 12px;
  font-weight: 800;
  transition: background .2s, transform .2s;
}
.hero-button:hover { background: #fff; transform: translateY(-2px); }
.hero-button span { font-size: 18px; line-height: 1; }
.hero-caption {
  position: absolute;
  bottom: 26px;
  left: max(5.2vw, calc((100% - 1490px)/2));
  right: max(5.2vw, calc((100% - 1490px)/2));
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: #d5d5d2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.4px;
}
.editorial-band {
  width: min(1490px, calc(100% - 72px));
  margin: 0 auto;
  min-height: 88px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  border-bottom: 1px solid #ffffff30;
}
.editorial-band span { border-left: 1px solid #ffffff27; padding-left: 24px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #b7b9ba; }
.editorial-band span:first-child { border-left: 0; padding-left: 0; }
.editorial-band span:last-child { color: #fff; text-align: right; }

.workspace {
  width: min(1490px, calc(100% - 72px));
  margin: 68px auto 0;
  grid-template-columns: minmax(0, 1.3fr) minmax(380px, .73fr);
  gap: 24px;
  scroll-margin-top: 24px;
}
.visual-column { top: 22px; }
.photo-stage, .model-gallery, .rpm-panel, .config-panel, .custom-order { border-radius: 0; }
.photo-stage { border: 1px solid #969b9a; background: #e9eae9; color: #17191a; }
.stage-top { padding: 25px 30px 13px; }
.stage-top .eyebrow { color: #575d5d; }
.stage-top h2 { font-size: 26px; font-weight: 800; letter-spacing: -1.2px; }
.stage-count { border-color: #9da2a1; color: #303737; border-radius: 0; letter-spacing: 2px; }
.view-switch { background: #d4d7d6; border-radius: 0; padding: 2px; margin-bottom: 4px; }
.view-switch button { border-radius: 0; font-size: 10px; letter-spacing: .5px; color: #5f6464; }
.view-switch button[aria-pressed=true] { background: #1b1e1f; color: #fff; box-shadow: none; }
.photo-canvas { background: #e9eae9; height: clamp(430px, 42vw, 670px); }
.preview-loader { background: #e9eae9ee; color: #25292a; border-radius: 0; }
.photo-canvas[aria-busy=true]:after { border-radius: 0; background: #17191ae0; }
.stage-bottom { border-top-color: #c3c7c5; padding: 16px 30px; }
.photo-status { color: #4e5452; }
.reset-button { color: #1f2727; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; font-weight: 800; }
.model-gallery, .rpm-panel { background: #101214; border-color: #383b3d; }
.model-gallery { margin-top: 20px; padding: 24px; }
.gallery-heading { margin-bottom: 19px; }
.gallery-heading h2 { font-size: 24px; letter-spacing: -.8px; font-weight: 700; }
.gallery-browse button { background: #191c1e; border-color: #505354; border-radius: 0; }
.gallery-browse button:hover { border-color: #fff; }
.gallery-track { scrollbar-color: #777 transparent; }
.photo-card { background: #1a1d1f; border-color: #424547; border-radius: 0; flex-basis: 155px; }
.photo-card:hover, .photo-card[aria-pressed=true] { border-color: #f2f2ef; }
.photo-card[aria-pressed=true] { box-shadow: inset 0 0 0 1px #fff; }
.photo-card-text { padding: 11px 12px 13px; }
.photo-card-text small { color: #a4a7a8; }
.rpm-panel { margin-top: 20px; padding: 22px 24px; }
.rpm-control label { color: #c9cdce; }
.rpm-control output { color: #fff; }
.led-strip span { background: #343739; }
.rpm-control input { accent-color: #fff; }

.config-panel { background: #111315; border: 1px solid #3d4143; }
.panel-head { padding: 27px 29px 23px; }
.panel-head strong { font-size: 34px; font-weight: 700; letter-spacing: -1.4px; }
.tabs { border-bottom-color: #3a3d3f; padding: 0 29px; }
.tabs button { color: #a6a9aa; font-size: 11px; letter-spacing: .2px; }
.tabs button[aria-selected=true] { color: #fff; border-color: #f3f3ef; }
.options { padding: 27px 29px 30px; }
.field legend, .field-title { font-size: 12px; letter-spacing: .25px; }
.brand-button, .choice { background: #1c1f21; border-color: #43484a; border-radius: 0; }
.brand-button:hover, .choice:hover { background: #252a2c; border-color: #e1e3e2; }
.brand-button[aria-pressed=true], .choice[aria-pressed=true] { background: #2a2e30; border-color: #f4f4ef; }
.brand-button[aria-pressed=true]:after, .choice[aria-pressed=true]:after { color: #f7f7f5; }
.brand-button small, .choice small { color: #aaadae; }
.choice .sample { border-radius: 0; }
.sample-round { background: radial-gradient(circle at 50% 58%,transparent 0 10px,#b7b8b5 11px 13px,transparent 14px)!important; }
.sample-flat { background: radial-gradient(ellipse at 50% 40%,transparent 0 10px,#b7b8b5 11px 13px,transparent 14px),linear-gradient(transparent 0 26px,#b7b8b5 26px 29px,transparent 29px)!important; }
.sample-sport { background: linear-gradient(120deg,transparent 0 20%,#b7b8b5 21% 25%,transparent 26% 74%,#b7b8b5 75% 79%,transparent 80%),linear-gradient(transparent 0 26px,#b7b8b5 26px 29px,transparent 29px)!important; }
.swatch { border-color: #151719; box-shadow: 0 0 0 1px #898d8d; }
.swatch[aria-pressed=true] { box-shadow: 0 0 0 2px #f8f8f4; }
.reference-note { background: #1b1f21; border-color: #52585a; border-radius: 0; color: #c9cece; }
.reference-note strong { color: #fff; }
.custom-model-link { color: #f5f5f1; border-bottom-color: #9da2a2; }
.toggle { background: #555b5d; }
.toggle[aria-checked=true] { background: #e8e9e6; }
.toggle[aria-checked=true]:before { background: #1c1e1f; }
.purchase { background: #1b1e20; border-top-color: #505456; padding: 26px 29px 27px; }
.price-block strong { font: 700 45px/1 Manrope, sans-serif; letter-spacing: -2px; }
.demo-badge { color: #c1c6c6; border-color: #606669; border-radius: 0; }
.primary-button { background: #eaeae7; color: #111315; border-radius: 0; font-weight: 800; font-size: 12px; letter-spacing: .2px; min-height: 50px; }
.primary-button:hover { background: #fff; }
.purchase p { color: #a2a7a8; }
.field-note, .toggle-row p { color: #adb1b2; }

.summary-section {
  width: min(1490px, calc(100% - 72px));
  margin: 78px auto 0;
  padding: 45px 0 58px;
  border-top: 1px solid #55595a;
  gap: 70px;
}
.summary-section h2 { font-size: clamp(34px, 3.2vw, 55px); font-weight: 800; letter-spacing: -2.8px; line-height: 1.08; }
.summary-section dl { border-left: 1px solid #484d4e; padding-left: 33px; gap: 24px 30px; }
.summary-section dt { color: #a2a7a8; letter-spacing: 1.5px; }
.summary-section dd { font-size: 13px; }
.custom-order {
  width: min(1490px, calc(100% - 72px));
  margin: 0 auto 74px;
  padding: clamp(30px, 4vw, 62px);
  background: linear-gradient(114deg, #1b1e20, #101214 70%);
  border: 1px solid #575c5e;
  gap: 6vw;
}
.custom-order-intro h2 { font-size: clamp(36px, 3.5vw, 60px); font-weight: 800; letter-spacing: -2.8px; }
.custom-order-intro p { color: #bec3c4; }
.contact-channel { color: #f1f1ed; border-color: #767c7d; border-radius: 0; }
.custom-order-form label { color: #e5e7e7; }
.custom-order-form input, .custom-order-form textarea { background: #111416; border-color: #575c5e; border-radius: 0; }
.custom-order-form input::placeholder, .custom-order-form textarea::placeholder { color: #919899; }
.custom-order-form input:focus, .custom-order-form textarea:focus { border-color: #f5f5f0; box-shadow: 0 0 0 1px #ffffff4c; }
.custom-form-status { color: #f5f5f0; }
.photo-empty a, .gallery-empty a { color: #f6f6f2; }

footer { width: min(1490px, calc(100% - 72px)); margin: 0 auto; border-top-color: #44494a; }
footer span { font-size: 16px; letter-spacing: 2px; }
dialog { background: #171a1c; border-color: #676c6e; border-radius: 0; }
dialog textarea { background: #0d0f10; }
.checkout-review { border-color: #4d5253; }
.checkout-review dt { color: #aab0b1; }
.checkout-review dd { color: #f3f3f0; }
.checkout-total { border-bottom: 1px solid #4d5253; padding-bottom: 15px; }
.checkout-total strong { letter-spacing: -1px; }
.payment-return { border-color: #666c6d; background: #171a1c; }

@media (max-width: 1120px) {
  .workspace { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: 17px; }
  .intro { min-height: 560px; }
  .hero-copy { width: min(570px, 64%); }
  .intro h1 { font-size: clamp(58px, 6.6vw, 80px); }
  .photo-canvas { height: 500px; }
  .panel-head, .options, .purchase { padding-left: 22px; padding-right: 22px; }
  .tabs { padding: 0 22px; }
  .summary-section { gap: 35px; }
}
@media (max-width: 850px) {
  .site-header { width: calc(100% - 40px); gap: 16px; }
  .wordmark > span:last-child, .header-nav { display: none; }
  .design-switch { margin-left: auto; }
  .intro { min-height: 610px; background-position: 59% center; }
  .hero-copy { width: 65%; }
  .intro h1 { font-size: clamp(53px, 8.1vw, 72px); }
  .editorial-band { width: calc(100% - 40px); grid-template-columns: repeat(2, 1fr); gap: 17px; padding: 20px 0; }
  .editorial-band span:nth-child(3) { border-left: 0; padding-left: 0; }
  .editorial-band span:last-child { text-align: left; }
  .workspace, .summary-section, .custom-order, footer { width: calc(100% - 40px); }
}
@media (max-width: 760px) {
  .site-header { height: 72px; }
  .wordmark strong { font-size: 17px; letter-spacing: 1.1px; }
  .brand-symbol { width: 31px; height: 31px; font-size: 20px; }
  .brand-symbol span { font-size: 12px; }
  .intro { padding: 65px 25px 100px; min-height: 670px; display: block; background-position: 63% center; background-image: linear-gradient(180deg, #08090ae8 0%, #08090acd 35%, #08090a35 68%, #08090a55 100%), url('assets/hero-racegrip-coleccion.png'); }
  .hero-copy { width: min(590px, 100%); }
  .intro h1 { font-size: clamp(52px, 10vw, 78px); letter-spacing: -.073em; }
  .intro p { max-width: 380px; font-size: 12px; }
  .hero-button { margin-top: 26px; }
  .hero-caption { left: 25px; right: 25px; }
  .editorial-band { min-height: 90px; }
  .editorial-band span { font-size: 9px; }
  .workspace { margin-top: 38px; display: flex; flex-direction: column; }
  .visual-column, .config-panel { width: 100%; }
  .photo-canvas { height: 430px; }
  .model-gallery { padding: 20px; }
  .summary-section { margin-top: 55px; }
  .summary-section dl { border-left: 0; border-top: 1px solid #484d4e; padding: 25px 0 0; }
  .custom-order { padding: 29px; }
}
@media (max-width: 490px) {
  .site-header { width: calc(100% - 28px); gap: 8px; }
  .wordmark { gap: 7px; }
  .wordmark strong { font-size: 14px; letter-spacing: .7px; }
  .brand-symbol { width: 28px; height: 28px; font-size: 18px; letter-spacing: -5px; padding-right: 5px; }
  .brand-symbol span { font-size: 10px; }
  .design-switch { padding: 2px; }
  .design-switch a { font-size: 8px; padding: 6px 5px; }
  .intro { min-height: 660px; padding: 64px 19px 90px; background-color: #08090a; background-image: linear-gradient(180deg, #08090a 0%, #08090a 37%, #08090ae0 55%, #08090a70 75%, #08090a30 100%), url('assets/hero-racegrip-coleccion.png'); background-size: 100% 100%, 120% auto; background-position: center center, right 92%; background-repeat: no-repeat; }
  .intro h1 { font-size: clamp(48px, 12vw, 64px); max-width: 390px; }
  .hero-copy .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .hero-copy .eyebrow::before { width: 16px; margin-right: 7px; }
  .hero-caption { left: 19px; right: 19px; letter-spacing: 1px; font-size: 8px; }
  .editorial-band, .workspace, .summary-section, .custom-order, footer { width: calc(100% - 28px); }
  .editorial-band { gap: 15px 9px; }
  .editorial-band span { font-size: 8px; letter-spacing: .6px; padding-left: 10px; }
  .stage-top, .stage-bottom { padding-left: 17px; padding-right: 17px; }
  .stage-top h2 { font-size: 20px; }
  .photo-canvas { height: 350px; }
  .view-switch button { padding: 7px 11px; }
  .model-gallery { padding: 16px; }
  .gallery-heading h2 { font-size: 19px; }
  .gallery-browse { font-size: 9px; }
  .photo-card { flex-basis: 128px; }
  .photo-card-image { height: 128px; }
  .rpm-panel { padding: 16px; }
  .panel-head, .options, .purchase { padding-left: 18px; padding-right: 18px; }
  .panel-head strong { font-size: 28px; }
  .tabs { padding: 0 18px; }
  .summary-section h2 { letter-spacing: -1.8px; }
  .custom-order { padding: 21px; }
  .custom-order-intro h2 { font-size: 35px; letter-spacing: -2px; }
  footer { padding-bottom: 25px; }
}
@media (min-width: 491px) and (max-width: 650px) {
  .intro { min-height: 700px; background-color: #08090a; background-image: linear-gradient(180deg, #08090a 0%, #08090a 38%, #08090ad9 60%, #08090a55 100%), url('assets/hero-racegrip-coleccion.png'); background-size: 100% 100%, 100% auto; background-position: center center, center bottom; background-repeat: no-repeat; }
}
@media (min-width: 651px) and (max-width: 850px) {
  .intro { min-height: 760px; display: block; padding: 65px 40px 90px; background-color: #08090a; background-image: linear-gradient(180deg, #08090a 0%, #08090adf 32%, #08090a65 72%, #08090a30 100%), url('assets/hero-racegrip-coleccion.png'); background-size: 100% 100%, 100% auto; background-position: center center, center 120%; background-repeat: no-repeat; }
  .hero-copy { width: min(570px, 100%); }
}

.brand-symbol{width:39px;height:39px;padding:0;border:0;display:block;color:#f4f4f1;letter-spacing:normal}
.brand-symbol svg{display:block;width:100%;height:100%}
.photo-stage,.photo-canvas,.photo-card-image,.preview-loader{background:#fff}
@media(max-width:760px){.brand-symbol{width:32px;height:32px}}
@media(max-width:490px){.brand-symbol{width:29px;height:29px;padding:0}}

.photo-canvas.scene-preview{background:#202021;height:auto;aspect-ratio:1/1}
.photo-canvas.scene-preview .preview-loader{background:#242526;color:#f4f4f1}

/* The configured product now shares the gallery's dark presentation frame. */
.photo-stage{background:#111315;color:#f5f5f2;border-color:#3d4143}
.stage-top{background:#111315}
.stage-top .eyebrow{color:#aeb4b2}
.intro .hero-performance{max-width:430px;margin-top:21px;color:#d1d0ca;font-size:10px;line-height:1.6;letter-spacing:1.4px;text-transform:uppercase}
@media(max-width:490px){.intro .hero-performance{max-width:320px;margin-top:17px;font-size:9px;letter-spacing:1px}}
.stage-count{border-color:#5d6362;color:#d9dcda}
.view-switch{background:#25292a}
.view-switch button{color:#b5b9b7}
.view-switch button[aria-pressed=true]{background:#f0f0ed;color:#141617}
.stage-bottom{background:#111315;border-top-color:#353a3b}
.photo-status{color:#b5bbba}
.reset-button{color:#f0f0ed}

.gallery-custom{margin-top:18px;padding:21px 0 0;border-top-color:#383b3d}
.gallery-custom strong{color:#f3f3ef;font-size:15px;letter-spacing:-.2px}
.gallery-custom p{color:#b5b7b5;font-size:11px}
.gallery-custom a{border-color:#767a7b;color:#f3f3ef;text-transform:uppercase;letter-spacing:.8px;font-size:10px}
.gallery-custom a:hover{background:#f3f3ef;border-color:#f3f3ef;color:#111}

.material-group-title{color:#c2c5c3}
.material-group+.material-group{border-top:1px solid #34383a;padding-top:18px}
.material-group .choice{min-height:96px}
.material-group .sample{height:43px;border:1px solid #ffffff25}