/* Glass layout primitives adapted from dashersw/liquid-glass-js (MIT).
   This lightweight CSS treatment uses backdrop blur, not WebGL refraction.
   License and source decisions: THIRD_PARTY_NOTICES.md / UPGRADE.md. */
:root {
  --accent:#96d5ff;
  --muted:#aaaab5;
  --line:#303037;
  --surface:#141418;
  --product-accent:var(--accent);
  color-scheme:dark;
  background:#09090c;
  font-family:Arial,Helvetica,sans-serif
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  background:#09090c;
  color:#f5f5f7
}
main {
  overflow:visible
}
p {
  line-height:1.65
}
a {
  text-decoration:none;
  color:inherit
}
button,input,select {
  font:inherit
}
img {
  max-width:100%
}
a,button,summary,input,select {
  touch-action:manipulation
}
button,a,summary,input,select {
  outline-offset:5px
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--accent)
}
h2 {
  font-size:clamp(2.3rem,4.6vw,4.8rem);
  line-height:1.05;
  letter-spacing:-.055em;
  font-weight:600
}
.eyebrow {
  font-size:.7rem;
  line-height:1.4;
  letter-spacing:.18em;
  color:var(--accent);
  margin:0 0 1.4rem
}
.glass-container {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  box-sizing:border-box;
  background:linear-gradient(135deg,#ffffff0b,#ffffff02),#101016e8;
  border:1px solid #ffffff26;
  box-shadow:inset 0 1px #ffffff1c;
  backdrop-filter:blur(20px)
}
.showroom-header {
  position:sticky;
  top:0;
  z-index:40;
  height:76px;
  justify-content:space-between;
  padding:0 4.5%;
  border-width:0 0 1px
}
.showroom-brand {
  font-size:1.03rem;
  font-weight:800;
  letter-spacing:.15em;
  white-space:nowrap
}
.desktop-nav {
  display:flex;
  gap:2rem
}
.desktop-nav a {
  font-size:.82rem;
  color:#c8c8d0;
  padding:1rem 0
}
.desktop-nav a:hover {
  color:var(--accent)
}
.nav-cta {
  border:1px solid #656571;
  padding:.8rem 1rem;
  border-radius:6px;
  font-size:.8rem
}
.skip-link {
  position:fixed;
  top:-100px;
  left:1rem;
  z-index:100;
  background:var(--accent);
  color:#07090c;
  padding:1rem
}
.skip-link:focus {
  top:1rem
}
#menu-toggle {
  display:none
}
#mobile-navigation[hidden] {
  display:none
}
#mobile-navigation {
  position:fixed;
  top:76px;
  left:0;
  right:0;
  z-index:39;
  background:#16161c;
  border-bottom:1px solid var(--line);
  padding:1rem 5%
}
#mobile-navigation a {
  display:block;
  padding:1rem
}
.showroom {
  max-width:1600px;
  margin:auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  min-height:min(800px,calc(100svh - 76px));
  padding:2rem 4.5% 3rem;
  gap:1rem
}
.showroom-copy {
  z-index:1
}
.showroom-copy h1 {
  font-size:clamp(4rem,7.8vw,8.3rem);
  line-height:.95;
  letter-spacing:-.065em;
  font-weight:600;
  margin:0 0 1.8rem
}
.hero-description {
  color:#b7b7c0;
  max-width:32ch;
  font-size:1.1rem;
  margin-bottom:2rem
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap
}
.showroom .button {
  display:inline-flex;
  align-items:center;
  gap:2rem;
  padding:1.1rem 1.4rem;
  background:var(--accent);
  color:#071119;
  font-size:.88rem;
  font-weight:700;
  border-radius:6px;
  border:0;
  letter-spacing:0;
  text-transform:none
}
.hero-film-link {
  font-size:.85rem;
  border-bottom:1px solid #555564;
  padding:.7rem 0;
  display:inline-block
}
.showroom-visual {
  min-width:0
}
.eye-viewport {
  aspect-ratio:1.08;
  overflow:hidden
}
.eye-viewport img {
  width:100%;
  height:100%;
  object-fit:contain;
  mask-image:radial-gradient(ellipse,#000 42%,transparent 73%);
  transform:scale(1.1)
}
.preview-panel {
  display:block;
  max-width:31rem;
  margin:-.5rem auto 0;
  border-radius:12px;
  padding:1.1rem
}
.preview-heading {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.72rem;
  color:var(--muted);
  margin-bottom:.9rem
}
.preview-heading output {
  color:#fff
}
.preview-buttons {
  display:flex;
  gap:.4rem;
  flex-wrap:wrap
}
.preview-buttons button {
  min-height:44px;
  border:1px solid #41414e;
  color:#ccc;
  background:#1b1b24;
  border-radius:6px;
  padding:.6rem .75rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.74rem
}
.preview-buttons button[aria-pressed=true] {
  border-color:var(--accent);
  color:white;
  background:#25303b
}
.preview-buttons button:last-child {
  margin-left:auto
}
.color-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%
}
.blue {
  background:#54b9ff
}
.green {
  background:#7de04b
}
.purple {
  background:#ad76ff
}
.product-ribbon {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:1.7rem 4.5%;
  border-block:1px solid var(--line);
  max-width:1600px;
  margin:auto
}
.product-ribbon>div {
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding-left:2rem;
  border-left:1px solid var(--line)
}
.product-ribbon>div:first-child {
  padding-left:0;
  border:0
}
.product-ribbon strong {
  font-size:1.35rem;
  letter-spacing:-.035em
}
.product-ribbon span {
  font-size:.75rem;
  color:var(--muted)
}
.series-section,.product-cinema,.construction-section,.fitment-guide,.questions-section,.closing-section {
  max-width:1440px;
  margin:auto;
  padding:6rem 4.5%;
  min-block-size:0;
  background:transparent
}
.section-heading {
  margin:0 0 3rem;
  max-width:52rem;
  display:block
}
.section-heading h2 {
  font-size:clamp(2.3rem,4.6vw,4.8rem);
  letter-spacing:-.055em;
  line-height:1.05;
  margin:0 0 1.2rem
}
.section-heading .section-intro,.section-heading>p:not(.eyebrow) {
  max-width:44ch;
  font-size:1.05rem;
  color:var(--muted);
  line-height:1.65
}
.product-hero--inline {
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  border:0;
  background:transparent
}
.product-gallery {
  padding:0;
  border:0;
  position:sticky;
  top:105px;
  align-self:start
}
.product-gallery__stage {
  min-block-size:0;
  aspect-ratio:1;
  border-radius:12px;
  background:#17171c
}
.product-gallery__stage>img {
  width:100%;
  height:100%;
  object-fit:contain
}
.product-thumbs button {
  border-radius:8px;
  border:2px solid transparent;
  background:#19191f
}
.product-thumbs button.is-selected {
  border-color:var(--accent)
}
.product-thumbs img {
  object-fit:contain
}
.zoom-product {
  position:absolute;
  bottom:1rem;
  right:1rem;
  min-height:44px;
  border:1px solid #6c6c76;
  border-radius:6px;
  padding:.7rem;
  background:#101016ed;
  color:white;
  font-size:.75rem
}
.purchase-panel {
  padding:0;
  align-self:start
}
.purchase-panel h3 {
  font-size:clamp(2.2rem,3.5vw,3.5rem);
  line-height:1.05;
  letter-spacing:-.05em;
  margin:0 0 1rem
}
.purchase-panel .eyebrow {
  font-size:.65rem;
  color:var(--muted);
  margin-bottom:1rem
}
.product-lead {
  font-size:.95rem;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 1.5rem
}
.quick-facts {
  margin-bottom:1.5rem
}
.quick-facts span,.variant-picker legend,.kit-picker label,.quantity {
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.03em
}
.variant-picker {
  padding:0 0 1.5rem;
  min-width:0
}
.variant-picker output {
  font-size:.75rem
}
.swatch {
  width:44px;
  height:44px
}
.kit-picker {
  grid-template-columns:1fr;
  gap:.7rem;
  padding:1rem 0
}
.kit-picker select {
  width:100%;
  padding:.9rem;
  background:#17171f;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:.9rem
}
.purchase-row {
  gap:1rem
}
.product-price {
  font-size:1.08rem
}
.quantity input {
  min-height:44px
}
.product-buy {
  border-radius:6px;
  text-transform:none;
  letter-spacing:0;
  font-size:.95rem;
  min-height:52px
}
.availability-note {
  font-size:.8rem;
  color:#bcbcc5;
  margin:1rem 0 0
}
.purchase-note {
  font-size:.73rem;
  color:var(--muted)
}
.product-commerce .driver-strip {
  margin:2.5rem 0 0;
  padding:1.5rem 0 0;
  background:transparent;
  border-bottom:0
}
.driver-strip p {
  font-size:.74rem;
  letter-spacing:.03em;
  color:var(--muted)
}
.product-cinema {
  padding-top:3rem
}
.product-cinema video {
  display:block;
  width:100%;
  max-height:690px;
  aspect-ratio:16/9;
  object-fit:contain;
  border-radius:12px;
  background:#131318
}
.film-caption {
  font-size:.75rem;
  color:var(--muted)
}
.construction-section {
  grid-template-columns:.85fr 1.15fr;
  gap:4rem;
  align-items:center;
  padding-top:2rem
}
.construction-copy h2 {
  font-size:clamp(2.4rem,4.5vw,4.2rem);
  line-height:1.08;
  letter-spacing:-.05em
}
.construction-copy h2 span {
  color:#aaaab5
}
.construction-copy>p:not(.eyebrow) {
  color:var(--muted);
  font-size:1rem;
  line-height:1.65
}
.construction-visual img {
  width:100%;
  height:auto;
  border-radius:12px
}
.construction-visual figcaption {
  font-size:.7rem;
  color:var(--muted)
}
.spec-list dt {
  color:var(--muted);
  font-size:.75rem
}
.spec-list dd {
  font-size:1rem
}
.fitment-guide,.questions-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  border-top:1px solid var(--line)
}
.fitment-guide h2,.questions-section h2 {
  margin:0 0 1.5rem
}
.fitment-guide>div>p:not(.eyebrow),.questions-section>div>p {
  color:var(--muted);
  max-width:36ch
}
.fitment-guide ol {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:1.7rem
}
.fitment-guide li {
  display:flex;
  gap:1.5rem
}
.fitment-guide li>span {
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--accent);
  font-size:.75rem
}
.fitment-guide h3 {
  font-size:1.1rem;
  margin:.5rem 0
}
.fitment-guide li p {
  font-size:.9rem;
  color:var(--muted);
  margin:0
}
.question-list details {
  border-bottom:1px solid var(--line);
  padding:1.1rem 0
}
.question-list details:first-child {
  padding-top:0
}
.question-list summary {
  cursor:pointer;
  min-height:44px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  list-style:none;
  font-size:1rem;
  font-weight:600
}
.question-list summary::-webkit-details-marker {
  display:none
}
.question-list summary:after {
  content:'+';
  color:var(--accent);
  font-size:1.5rem
}
.question-list details[open] summary:after {
  content:'−'
}
.question-list p {
  color:var(--muted);
  font-size:.9rem;
  margin:1rem 0 0;
  max-width:50ch
}
.closing-section {
  padding-top:2rem
}
.closing-section p {
  color:var(--muted);
  font-size:.85rem
}
.closing-section>a {
  font-size:clamp(3rem,7vw,7rem);
  letter-spacing:-.06em;
  line-height:1.05;
  font-weight:600
}
.closing-section>a span {
  color:var(--accent)
}
.site-footer {
  padding:2rem 4.5%;
  min-block-size:0;
  gap:2rem;
  background:transparent
}
.site-footer p,.footer-link {
  font-size:.75rem;
  color:var(--muted)
}
.footer-mark {
  font-size:1rem
}
.checkout-dialog {
  border-radius:12px;
  max-height:90svh
}
.checkout-shell {
  padding:2.5rem
}
.checkout-close {
  min-width:44px;
  min-height:44px
}
.checkout-heading h2 {
  font-size:2.2rem;
  line-height:1.1
}
.checkout-status,.checkout-legal {
  font-size:.8rem;
  color:#c7c7d0
}
.checkout-status {
  background:#24242c
}
.order-summary {
  grid-template-columns:5rem 1fr
}
.order-summary>strong {
  grid-column:2;
  font-size:.9rem
}
.order-summary span {
  color:var(--muted);
  font-size:.8rem
}
.pay-button {
  font-size:.8rem;
  letter-spacing:0;
  border-radius:6px
}
.pay-button[aria-disabled=true] {
  opacity:1;
  background:#292931;
  color:#b8b8c4
}
.image-dialog {
  background:#111117;
  border:1px solid var(--line);
  border-radius:12px;
  width:min(900px,94vw);
  max-height:90svh;
  padding:3rem 1rem 1rem
}
.image-dialog img {
  display:block;
  width:100%;
  max-height:75svh;
  object-fit:contain
}
.image-dialog::backdrop {
  background:#000d
}
.dialog-open {
  overflow:hidden
}
.blink-blue {
  animation:blink-x 1.3s ease-in-out
}
.blink-green {
  animation:blink-y 1.3s ease-in-out
}
.blink-purple {
  animation:blink-y 1.5s ease-in-out 2
}
@keyframes blink-x {
  0%,100% {
  clip-path:inset(0)
}
45%,55% {
  clip-path:inset(0 48%)
}

}
@keyframes blink-y {
  0%,100% {
  clip-path:inset(0)
}
45%,55% {
  clip-path:inset(48% 0)
}

}

@media(max-width:1100px) {
  .desktop-nav {
  gap:1rem
}
.product-ribbon>div {
  flex-direction:column;
  gap:.3rem
}
.product-hero--inline {
  gap:2rem
}
.hero-actions {
  gap:1rem
}
.showroom {
  min-height:650px
}
.fitment-guide,.questions-section {
  gap:3rem
}

}

@media(max-width:800px) {
  .showroom-header {
  height:68px;
  padding-inline:5%
}
.desktop-nav,.nav-cta {
  display:none
}
#menu-toggle {
  display:block;
  min-height:44px;
  border:1px solid var(--line);
  background:#1b1b23;
  border-radius:6px;
  padding:.7rem 1rem;
  color:white;
  font-size:.8rem
}
#mobile-navigation {
  top:68px
}
.showroom {
  grid-template-columns:1fr;
  min-height:0;
  padding:3rem 5% 2rem;
  gap:.5rem
}
.showroom-copy h1 {
  font-size:clamp(3.4rem,12vw,6rem);
  line-height:1
}
.hero-description {
  font-size:1rem;
  max-width:37ch;
  margin-bottom:1.5rem
}
.showroom-visual {
  max-width:36rem;
  width:100%;
  margin:auto
}
.eye-viewport {
  aspect-ratio:1.35
}
.preview-panel {
  margin:0 auto
}
.product-ribbon {
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  padding:1.5rem 5%
}
.product-ribbon>div:nth-child(3) {
  border:0;
  padding-left:0
}
.series-section,.product-cinema,.construction-section,.fitment-guide,.questions-section,.closing-section {
  padding:4rem 5%
}
.product-hero--inline,.construction-section,.fitment-guide,.questions-section {
  grid-template-columns:1fr;
  gap:2.5rem
}
.product-gallery {
  position:static
}
.product-gallery__stage {
  max-height:70svh
}
.purchase-panel {
  padding:0;
  max-width:none
}
.purchase-panel h3 {
  font-size:2.5rem
}
.product-thumbs {
  padding-inline:0
}
.section-heading {
  margin-bottom:2rem
}
.product-commerce .driver-strip {
  grid-template-columns:1fr;
  gap:.8rem
}
.construction-visual {
  margin:0
}
.spec-list {
  max-width:none
}
.site-footer {
  padding:2rem 5% 7rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center
}
.site-footer p {
  margin:0
}
.mobile-buy {
  display:flex;
  position:fixed;
  z-index:25;
  left:5%;
  right:5%;
  bottom:calc(.6rem + env(safe-area-inset-bottom));
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:52px;
  padding:1rem 1.2rem;
  background:var(--accent);
  color:#071119;
  border-radius:8px;
  text-decoration:none;
  box-shadow:0 8px 24px #0009
}
.checkout-shell {
  padding:2.7rem 1.25rem 1.25rem
}
.order-summary {
  grid-template-columns:4rem 1fr
}
.checkout-dialog {
  width:calc(100% - 1.5rem)
}
.closing-section {
  padding-top:2rem
}

}

@media(max-width:380px) {
  .preview-buttons button {
  padding:.6rem
}
.preview-buttons button:last-child {
  margin-left:0
}
.showroom-brand {
  font-size:.9rem
}
.variant-picker output {
  float:none;
  display:block;
  margin-top:.5rem
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

}

@media(prefers-reduced-transparency:reduce) {
  .glass-container {
  backdrop-filter:none;
  background:#15151c
}

}

.construction-visual::before {
  display:none
}

.construction-visual figcaption {
  position:static;
  margin-top:1rem;
  text-transform:none;
  letter-spacing:0
}

.section-intro {
  max-inline-size:44ch
}


/* Trust and policy surfaces */
.remember-kit {display:flex;align-items:center;flex-wrap:wrap;gap:.65rem;font-size:.82rem;color:#bcbcc5;margin:0 0 1.4rem;min-height:44px}
.remember-kit input {width:20px;height:20px;accent-color:var(--accent)}
.remember-kit a,.purchase-note a,.legal-page a {text-decoration:underline;text-underline-offset:4px}
.policy-links {display:flex;flex-wrap:wrap;gap:1rem;font-size:.8rem;color:#c8c8d0}
.policy-links a {padding:.5rem 0}
.legal-page {max-width:820px;margin:auto;padding:4rem 5% 6rem}
.legal-page h1 {font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.05em;line-height:1.08;margin:1rem 0 2rem}
.legal-page h2 {font-size:1.4rem;letter-spacing:-.02em;margin:2rem 0 1rem}
.legal-page p,.legal-page li {line-height:1.75;color:#c8c8d0}
.legal-notice {border-left:3px solid var(--accent);padding:1rem 1.25rem;background:#19191f}
.privacy-action {background:var(--accent);color:#071119;border:0;padding:1rem;border-radius:6px;min-height:44px;cursor:pointer}
.noscript-note {padding:1rem 5%;background:#24242c}
.no-js .preview-panel,.no-js .variant-picker,.no-js .kit-picker,.no-js .purchase-row,.no-js .product-buy,.no-js .remember-kit,.no-js .zoom-product,.no-js #menu-toggle {display:none}
.no-js .desktop-nav {display:flex;flex-wrap:wrap}