/* ------------------ LayerZero 2025: Acura-Premium Tokens ------------------ */
:root {
  --lz-accent: #cc6633;
  --lz-navy: #0b1630;
  --lz-teal: #0e4b52;
  --lz-ink: #0f1320;
  --lz-ink-2: #2c3344;
  --lz-ink-3: #6b7280;
  --lz-line: #e9ecf0;
  --lz-bg: #fafbfc;
  --lz-card: rgba(255, 255, 255, .95);
  --lz-g1: #f8f9fa; --lz-g2: #f1f3f5;
  --lz-tile-fill: #d1d5db;
  --lz-tile-stroke: #c1c4cb;
  --lz-tile-glow: rgba(204, 102, 51, 0.15);
  --lz-r-lg: 12px; --lz-r-xl: 16px;
  --lz-sdw-1: 0 8px 24px rgba(10,18,40,.06);
  --lz-h1: clamp(2.2rem,3.6vw,3.4rem);
  --lz-h2: clamp(1.7rem,2.5vw,2.4rem);
  --lz-h3: clamp(1.1rem,1.6vw,1.3rem);
  --lz-body: clamp(0.98rem,1.05vw,1.05rem);
  --lz-ease: cubic-bezier(.2,.7,.2,1);
  --lz-bg-page: #ffffff;
  --lz-bg-card: #ffffff;
  --lz-bg-card-alt: #f9fafb;
  --lz-border-card: rgba(0,0,0,0.08);
  --lz-shadow-card: 0 8px 20px rgba(0,0,0,.05);
  --lz-shadow-hover: 0 16px 32px rgba(0,0,0,.09);
  --lz-gap-section-mobile: 18px;
  --lz-gap-section-desktop: 18px;
  --lz-max-width: 1920px;
  --lz-card-padding-mobile: 6px;
  --lz-card-padding-desktop: 14px;

  --lz-line-height: 1.52;
  --lz-header-height-mobile: 60px;
  --lz-page-max: 1600px;
  --lz-side-pad-mobile: 14px;
  --lz-side-pad-desktop: 24px;
  --lz-band-bg: #0f172a;
  --lz-band-fg: #fff;
	--lz-zblock-gap: 14px; 
  --ok: #10b981; --bad: #ef4444; --muted: #6b7280;
}

/* Transparent card fallback */
.transparentCard { background: rgba(220, 220, 220, .6) !important; }

/* ------------------ Base ------------------ */
body {
  color: var(--lz-ink-2);

  line-height: var(--lz-line-height);
  background-color: var(--lz-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}


/* Container */
.lz-container {
  max-width: var(--lz-max-width);
  margin: 0 auto;
  width: 100%;
  padding-left: var(--lz-side-pad-desktop);
  padding-right: var(--lz-side-pad-desktop);
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .lz-container { padding-left: var(--lz-side-pad-mobile); padding-right: var(--lz-side-pad-mobile); }
}
@media (min-width: 768px) { .lz-container { padding-left: 20px; padding-right: 20px; } }

/* Section rhythm */
.lz-section {  position: relative; }
@media (min-width: 768px) { .lz-section { padding: var(--lz-gap-section-desktop) 0; } }
.subsection { padding-top: clamp(12px, 1vw, 20px); }
.section { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 16px; margin-top: 16px; padding-bottom: 16px; overflow: hidden; }

/* ------------------ Grid System ------------------ */
.lz-grid { display: grid; gap: 24px; width: 100%; box-sizing: border-box; }
.lz-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 20px; row-gap: 20px; }
@media (max-width: 767px) {
  .lz-cols-12 { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 16px !important; }
  [style*="grid-column:span"] { grid-column: auto !important; }
}
@media (min-width: 768px) { .lz-grid.lz-cols-12 { grid-template-columns: repeat(12,1fr); } }
.span-8, .span-4 { grid-column: span 12; }
@media (min-width: 768px) { .span-8 { grid-column: span 8; } .span-4 { grid-column: span 4; } }

/* ------------------ Typography ------------------ */
.lz-h1 { font-size: var(--lz-h1); color: var(--lz-ink); margin: 0 0 12px; letter-spacing: -0.03em; line-height: 1.18; font-weight: 600; }
.lz-h2 { font-size: var(--lz-h2); color: var(--lz-ink); margin: 0 0 10px; line-height: 1.22; font-weight: 600; padding:10px; text-align:center;}
.lz-h3 { font-size: var(--lz-h3); color: var(--lz-ink); margin: 0 0 6px; line-height: 1.28; font-weight: 600; text-align:center; }
.lz-h4 { color: #0a0a0a; font-weight: 600; line-height: 1.2; margin: 0 0 .4em; font-size: clamp(.92rem, .28vw + .78rem, 1.05rem); }
.lz-lede { max-width: 70ch; color: var(--lz-ink-2); opacity: .94; font-size: 0.98rem; line-height: 1.38; }
@media (min-width: 768px) { .lz-lede { font-size: 1.1rem; } }
.lz-hr { height: 1px; background: var(--lz-line); margin: 16px 0; border-top: 1px solid rgba(0,0,0,.07); }
.lz-card ul { list-style: disc; margin-left: 20px; }

/* ------------------ Card System ------------------ */
.lz-card {
  background: var(--lz-bg-card);
  border-radius: var(--lz-r-xl);
  border: 1px solid var(--lz-border-card);
  box-shadow: var(--lz-shadow-card);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow .2s var(--lz-ease), transform .2s var(--lz-ease);
}
.lz-card.lz-elevated:hover {
  box-shadow: var(--lz-shadow-hover);
  transform: translateY(-3px);
}
@media (max-width: 767px) { .lz-card { box-shadow: 0 12px 28px rgba(0,0,0,.04); border-radius: 12px; } }
.lz-pad { padding: 10px; }

/* Card Header */
.lz-card-header {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--lz-border-card);
  margin: -24px -24px 18px; padding: 16px 24px;
}
@media (max-width: 767px) { .lz-card-header { margin: -16px -16px 16px; padding: 12px 16px; } }

/* ------------------ Spec Bar ------------------ */
.lz-specbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 767px) { .lz-specbar { gap: 6px; } }
.lz-spec {
  background: var(--lz-g2); border: 1px solid var(--lz-line); border-radius: 10px;
  padding: 6px 10px; color: var(--lz-ink-3); font-weight: 700; font-size: .76rem; line-height: 1.28;
  min-width: max(90px,fit-content); display: flex; flex-direction: column; text-align: center;
}
@media (max-width: 767px) { .lz-spec { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); } }
.lz-spec strong { color: var(--lz-ink); margin-left: 4px; font-size: .94rem; font-weight: 600; }

/* ------------------ Buttons ------------------ */
.lz-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none; transition: all .18s var(--lz-ease); min-height: 40px;
  font-size: .88rem; line-height: 1.2; cursor: pointer; user-select: none; border: 1px solid transparent;
}
.lz-btn.primary { background: var(--lz-accent); color: #fff; border-color: var(--lz-accent); box-shadow: 0 4px 12px rgba(204,102,51,.25); }
.lz-btn.primary:hover { transform: translateY(-2px); filter: saturate(112%); }
.lz-btn.secondary { background: var(--lz-navy); color: #fff; }
.lz-btn.secondary:hover { transform: translateY(-1px); }

/* ------------------ HERO: 50/50 ACURA LAYOUT ------------------ */
.lz-hero { position: relative; z-index: 2; padding: 32px 20px; }
.lz-hero .lz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 979px) {
  .lz-hero .lz-grid { grid-template-columns: 1fr; gap: 28px; }
  .lz-hero .lz-grid > :nth-child(2) { order: -1; }
}
@media (max-width: 768px) { .lz-hero { padding: 28px 12px; } .lz-hero-text { text-align: center; } }

.lz-hero-text h2 { font-size: clamp(2.2rem, 3.5vw, 3.0rem); line-height: 1.14; margin-bottom: 0.8rem; color: var(--lz-ink); text-align: center; padding-bottom:10px; }
.lz-hero-text p { font-size: 1.08rem; line-height: 1.58; color: var(--lz-ink-2); max-width: 62ch; margin: 0 auto 1.2rem; }
@media (max-width: 979px) { .lz-hero-text p { margin: 0 0 1.2rem; } }

.lz-hero .lz-media { padding: 0; margin: 0; border-radius: var(--lz-r-xl); overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,.12); position: relative; background-color:#fff;}

/* ------------------ HERO: SVG TILES (Subtle) ------------------ */
.lz-tiles-wrap { position: relative; border-radius: var(--lz-r-xl); background: rgba(255, 255, 255, .96); overflow: hidden; box-shadow: 0 16px 32px rgba(0,0,0,.07); }
.lz-tiles { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.lz-tiles svg { position: absolute; right: 0; bottom: 0; width: auto; height: 105%; max-height: none; transform: translateY(3%); }
@media (max-width: 767px) { .lz-tiles svg { width: 1400px; height: auto; right: -15%; } }
.lz-tiles .fill path { fill: var(--lz-tile-fill) !important; }
.lz-tiles .stroke path { fill: none !important; stroke: var(--lz-tile-stroke); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
@keyframes tilePulse { from { filter: drop-shadow(0 0 6px var(--lz-tile-glow)); } to { filter: drop-shadow(0 0 12px rgba(204,102,51,.22)); } }

/* ------------------ ACURA SPEC CARDS (Glass + Metallic) ------------------ */
.lz-spec-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; margin: 2%; }
@media (max-width: 1023px) { .lz-spec-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 767px) { .lz-spec-cards { grid-template-columns: 1fr; gap: 14px; } }
.spec-card {
  background: linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(240,240,242,.88) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(200,200,200,.7);
  border-radius: var(--lz-r-xl);
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.06), 0 0 0 1px rgba(255,255,255,.3) inset, 0 1px 0 rgba(255,255,255,.8) inset;
  transition: all .25s var(--lz-ease);
  position: relative;
  overflow: hidden;
}
.spec-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to bottom, rgba(255,255,255,.4) 0%, transparent 100%); pointer-events: none; z-index: 0; }
.spec-card:hover { border-color: rgba(204,102,51,.4); }
.spec-card img { width: 70%; height: auto; margin: 0 auto 12px; }
.spec-card .spec-label { color: #0a0a0a; font-weight: 700; font-size: .96rem; letter-spacing: -0.02em; margin-bottom: 4px; }
.spec-card .spec-sub { color: #4b5563; font-weight: 500; font-size: .82rem; opacity: .92; }
.spec-card > * { position: relative; z-index: 1; }

/* ------------------ Comparison Slider (ELEGANT HANDLE) ------------------ */
#torqueDemo .lz-compare {
  --cut: 50%;
  position: relative; width: 100%; max-width: 960px; height: 280px;
  border-radius: var(--lz-r-lg); overflow: hidden; background: var(--lz-bg-card);
  box-shadow: var(--lz-shadow-card); isolation: isolate; user-select: none; touch-action: pan-y;
  cursor: ew-resize;
}
#torqueDemo .pane { position: absolute; inset: 0; z-index: 1; }
#torqueDemo .pane img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
#torqueDemo .left { clip-path: polygon(0 0, var(--cut) 0, var(--cut) 100%, 0 100%); }
#torqueDemo .right { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%); z-index: 2; }
#torqueDemo .handle {
  position: absolute; top: 0; bottom: 0; left: var(--cut); width: 44px;
  transform: translateX(-50%); background: transparent; border: 0; cursor: ew-resize; z-index: 3;
}
#torqueDemo .handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 3px; background: var(--lz-ink); opacity: 0.12; border-radius: 2px; }
#torqueDemo .handle::after {
  content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--lz-bg-card); border-radius: 999px; padding: 0.35rem 0.8rem;
  box-shadow: 0 5px 14px rgba(0,0,0,.18); font-size: 20px; color: var(--lz-accent);
  border: 2px solid var(--lz-accent); transition: all .2s var(--lz-ease);
}
#torqueDemo .handle:hover::after { background: var(--lz-accent); color: #fff; transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 7px 18px rgba(204,102,51,.35); }
#torqueDemo .labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#torqueDemo .badge { position: absolute; bottom: 0.65rem; background: rgba(255,255,255,.94); padding: 0.35rem 0.7rem; border-radius: 0.45rem; font-weight: 600; box-shadow: 0 2px 7px rgba(0,0,0,.07); font-size: 0.86rem; }
#torqueDemo .badge.left { left: 0.65rem; } #torqueDemo .badge.right { right: 0.65rem; }

/* ------------------ Rotation Overlay ------------------ */
.ov-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ov-label {
  position: absolute; max-width: 38%; color: #fff; line-height: 1.38; opacity: 0; padding: 12px;
  background: rgba(0,0,0,0.68); border-radius: 10px; box-shadow: 0 5px 14px rgba(0,0,0,.32);
  transition: opacity .28s var(--lz-ease), transform .28s var(--lz-ease); transform: translateY(10px);
  backdrop-filter: blur(7px); border: 1px solid rgba(255,255,255,.08);
}
.ov-label.visible { opacity: 1; transform: translateY(0); }
.ov-label ul { padding-left: 18px; margin: 0; list-style-type: disc; }
.ov-label li { margin-bottom: 0.4em; }
.ov-label h4 { margin: 0 0 0.4em; color: #fff; font-size: 15px; font-weight: 600; }
.ov-label p { margin: 0.4em 0 0; color: #e2e8f0; font-size: 13.5px; }
.ov-left { left: 0; top: 16px; margin-left: 10px; }
.ov-right { right: 0; top: 16px; margin-right: 10px; }

/* ------------------ AMP Lightbox Gallery ------------------ */
.amp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 18px; }
.amp-gallery amp-img { border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.09); transition: transform .2s var(--lz-ease); }
.amp-gallery amp-img:hover { transform: scale(1.025); }
amp-lightbox-gallery { --color-bg: rgba(0,0,0,.96); --color-fg: #fff; }

/* ------------------ Z-Pattern & Other Layouts ------------------ */
.lz-z { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.lz-z > .lz-z-a { order: 1; } .lz-z > .lz-z-b { order: 2; }
.lz-z.lz-z--flip > .lz-z-a { order: 2; } .lz-z.lz-z--flip > .lz-z-b { order: 1; }
@media (max-width: 1023px) { .lz-z { grid-template-columns: 1fr; } }
.lz-zblock { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; margin-bottom: 48px; }
@media (min-width: 768px) {
  .lz-zblock { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lz-zblock--flip .lz-ztext { order: 2; } .lz-zblock--flip .lz-zmedia { order: 1; }
}
.lz-ztext, .lz-zmedia { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; }

/* ------------------ Docs Tiles ------------------ */
.docs-tiles { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .docs-tiles { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); } }
.docs-tiles .lz-card { display: flex; flex-direction: column; height: 100%; }
.docs-tiles .lz-media { flex-shrink: 0; margin-bottom: 10px; text-align:center; }
.docs-tiles .lz-media img { width: 80%; height: auto; border-radius: 7px; margin: auto; }
.docs-tiles .lz-card > div[style*="margin-top"] { flex: 1; margin-top: 10px !important; display: flex; flex-direction: column; justify-content: space-between; }
.docs-tiles .lz-card > div[style*="text-align:center"] { margin-top: auto !important; padding-top: 14px; text-align: center; }

/* ------------------ Reduced Motion ------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; transform: none !important; }
}

/* ------------------ PIXI & CANVAS ------------------ */
.targetContainer, #preloaderContainer { position: absolute; }
canvas { max-width: 100%; height: auto; }
.spin-wrap{ 
	position:relative; 	
}
.spinInstructions { position: absolute; pointer-events: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%;   height: 30%; }
.lz-connector, .lz-card .lz-h3 {
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-size: 1.1rem;
  background: linear-gradient(90deg, #f5f6f7 0%, #e9ecef 100%);
  color: #4b5563; padding: 0.75rem 1rem; 
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05); text-align: center; user-select: none;
}

/* ------------------ Sectionalization Demo ------------------ */
#sectionalizationDemo { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 320px; padding: 16px; box-sizing: border-box; gap: 18px; }
#secWrap { position: relative; width: min(100%, 720px); max-width: 720px; aspect-ratio: 720 / 405; border-radius: var(--lz-r-xl); overflow: hidden; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.14); background: #ffffff; margin: 0 auto; }
#secHost { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
#secHost canvas { display: block; width: 100% !important; height: 100% !important; object-fit: contain; touch-action: none; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast; }
#secHost + .ov-layer, #secHost .ov-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#secHost + .ov-layer svg, #secHost .ov-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sec-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; width: 100%; max-width: 720px; padding: 0 16px; box-sizing: border-box; z-index: 20; }
.sec-btn { padding: 12px 24px; border-radius: 12px; font-weight: 600; font-size: 0.94rem; cursor: pointer; transition: all .24s var(--lz-ease); min-width: 180px; text-align: center; flex: 1; max-width: 280px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border: 1.8px solid transparent; }
.sec-btn.orangeButton { background: #cc6633; color: #ffffff; border-color: #cc6633; }
.sec-btn.orangeButton:hover { background: #d47a44; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(204, 102, 51, 0.32); }
.sec-btn.orangeButtonGray { background: #6b7280; color: #ffffff; border-color: #6b7280; }
.sec-btn.orangeButtonGray:hover { background: #7f8694; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
@media (max-width: 480px) { .sec-buttons { flex-direction: column; align-items: center; } }
@media (min-width: 992px) { #secWrap { width: 720px; } }

/* ------------------ Gallery Grid ------------------ */
.lz-gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(min(260px,45%),1fr)); }
@media(min-width:768px){ .lz-gallery-grid { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); } }

.lz-gallery-item {
  appearance: none; border: none; background: transparent; padding: 0; text-align: left; cursor: pointer;
  border-radius: 16px; position: relative; isolation: isolate; overflow: hidden;
  box-shadow: 0 16px 32px rgba(0,0,0,.12); background-color:#0b0b0b05; display:flex; flex-direction:column;
}
.lz-gallery-imgwrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background:#0b0b0b0d; }
.lz-gallery-imgwrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
@media(hover:hover){ .lz-gallery-item:hover .lz-gallery-imgwrap img { transform:scale(1.05); } }

.lz-gallery-label { padding:1rem 1rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; background:#fff; }
.lz-gallery-label .lz-connector { font-size:.7rem; line-height:1.2; font-weight:600; background:rgba(204,102,51,.08); color:#cc6633; padding:.4rem .6rem; border-radius:999px; width:max-content; box-shadow:0 4px 12px rgba(204,102,51,.25); }
.lz-gallery-caption { color:#4a5568; font-size:.8rem; line-height:1.4; }

/* Lightbox */
#lz-lightbox { position: fixed; inset: 0; z-index: 2147483647; display: none; align-items: center; justify-content: center; padding: 2rem 1rem; pointer-events: none; box-sizing: border-box; font-family: inherit; }
#lz-lightbox[aria-hidden="false"] { display: flex; }
.lz-lightbox-backdrop { position: fixed; inset: 0; background: rgba(5,8,15,.7); backdrop-filter: blur(4px); z-index: 0; pointer-events: auto; cursor: zoom-out; }
.lz-lightbox-frame { position: relative; z-index: 1; max-width: min(90vw,1100px); width: 100%; max-height: 90vh; background: #0b0b0b; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.8); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.06); pointer-events: auto; }
#lz-lightbox-img { width: 100%; max-height: 70vh; object-fit: contain; background: #000; }
.lz-lightbox-meta { color: #fff; padding: 1rem 1.25rem 1.25rem; background: linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,.9) 80%); font-size: .8rem; line-height: 1.4; }
.lz-lightbox-head { font-weight: 600; font-size: .8rem; color: #cc6633; margin-bottom: .25rem; text-shadow: 0 0 8px rgba(204,102,51,.8); }
.lz-lightbox-desc { color: #cbd5e1; font-size: .8rem; }
.lz-lightbox-close, .lz-lightbox-prev, .lz-lightbox-next {
  position: absolute; top: .75rem; background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; width: 2.25rem; height: 2.25rem; line-height: 2.25rem; font-size: 1rem; font-weight: 600;
  text-align: center; cursor: pointer; box-shadow: 0 20px 40px rgba(0,0,0,.6); user-select: none; backdrop-filter: blur(8px);
}
.lz-lightbox-close { right: .75rem; }
.lz-lightbox-prev, .lz-lightbox-next { top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 2.25rem; font-weight: 400; }
.lz-lightbox-prev { left: .75rem; } .lz-lightbox-next { right: .75rem; }
.lz-lightbox-close:active, .lz-lightbox-prev:active, .lz-lightbox-next:active { transform: scale(.97) translateY(-50%); }
.lz-lightbox-close:active { transform: scale(.97); }

/* Tabs */
.lz-ztext .lz-nb-tabs-wrapper { font-family: inherit; }
.lz-ztext .lz-nb-tab { outline: none; }
.lz-ztext .lz-nb-tab:hover:not(.lz-nb-tab--active) { background:#fff !important; color:#0b253a !important; transform:translateY(-1px); }
.lz-ztext .lz-nb-tab.lz-nb-tab--active { background:#fff !important; color:#0b253a !important; border-color:var(--lz-accent) !important; box-shadow:0 -3px 8px rgba(51,51,51,.25); z-index:10; }
.lz-ztext .lz-nb-tab-panel { display:none; }
.lz-ztext .lz-nb-tab-panel.lz-nb-tab-panel--active { display:block; animation:fadeIn .28s var(--lz-ease); font-size:.8em; }
@keyframes fadeIn { from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }
@media (max-width:640px){
  .lz-ztext .lz-nb-tab-headers{flex-direction:column;gap:0;}
  .lz-ztext .lz-nb-tab{ border-radius:8px 8px 0 0 !important; border-bottom:1px solid rgba(0,0,0,.08) !important; margin-bottom:-1px; }
  .lz-ztext .lz-nb-tab.lz-nb-tab--active{border-bottom:none !important;}
}

/* Feature List */
.lz-featurelist { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; padding:10px; margin:10px; border:1px solid #f2f2f2; border-radius:10px; }
.lz-feature {
  position: relative; padding: 0.75rem 1rem 0.75rem 1.25rem; border-left: 3px solid transparent;
  cursor: pointer; font-size: 1rem; line-height: 1.5; color: #1e293b; transition: all 0.25s ease;
}
.lz-feature::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: #cc6633;
  opacity: 0; transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease, opacity 0.25s ease;
}
.lz-feature:hover::before, .lz-feature.lz-selected::before { opacity: 1; transform: scaleY(1); }
.lz-feature:hover, .lz-feature.lz-selected { color: #cc6633; }
.lz-feature.lz-selected { font-weight: 600; }

/* Gallery & Visual States */
.lz-gallery { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; background: #fff; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }
.lz-gallery .gallery-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 95%; max-height: 95%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.lz-gallery .gallery-image--visible { opacity: 1; pointer-events: auto; }
.lz-hint { top: 25%; left: 50%; transform: translate(-50%, 0%); pointer-events: none; position: absolute; background-color:rgba(255, 255, 255, .9); padding:10px; border-radius:5px; box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75); border:1px solid #ccc; }

/* 4-Pole Callout */
.lz-4p-callout { margin: 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid #cc6633; background: #f8f9fa; font-size: 0.9rem; line-height: 1.5; color: #334155; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); }
.lz-4p-callout .lz-callout-title { font-weight: 600; color: #cc6633; margin-bottom: 0.25rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Safety & Reliability */
#safetyDetailText .lz-connector { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#cd6632; }
#safetyDetailHead { font-weight:600; color:#0b253a; }
#safetyDetailCopy { color:#1f2937; font-size:.9rem; line-height:1.4; }
#safetyDetailList li { list-style:disc; }
.lz-section.subsection .lz-card { align-self: stretch; }
#safetyVisualFrame, #reliabilityVisualFrame {  max-height: 400px; display: flex; flex-direction: column; justify-content: space-between; }

/* Visual Frame */
.lz-visual-frame { aspect-ratio: 16/9; max-height: 420px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.relMode { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); }
.relMode-active { opacity: 1 !important; transform: translateY(0) !important; }
.relMode-exit { opacity: 0 !important; transform: translateY(-6px) !important; }

/* Unified Layout */
.lz-unified-row { align-items: stretch; }
.lz-gallery { min-height: clamp(320px, 45vw, 460px); display: flex; flex-direction: column; justify-content: flex-start; }
.lz-gallery-item { position: absolute; inset: 0; opacity: 0; transform: scale(1); transition: opacity .25s ease, transform .25s ease; display: flex; flex-direction: column; justify-content: flex-start; }
.lz-gallery-item--visible { opacity: 1; transform: scale(1.05); z-index: 2; }
.lz-gallery img, .lz-gallery video, .lz-gallery canvas { transition: transform .25s ease, filter .25s ease; }
.lz-gallery-item--visible img:hover, .lz-gallery-item--visible video:hover, .lz-gallery-item--visible canvas:hover { transform: scale(1.04); filter: brightness(1.04); }

.lz-detailtext { margin-top: .75rem; font-size: .85rem; line-height: 1.4; color: #1f2937; }
.lz-detailtext .lz-h3 { font-size: 1rem; font-weight: 600; color: #0b253a; margin: 0 0 .5rem; }
.lz-bullets { list-style: disc; padding-left: 1rem; margin: 0; color: #4b5563; font-size: .85rem; line-height: 1.4; display: grid; gap: .35rem; }

/* Demo Frame */
.demo { border: 1px solid var(--lz-border-card); box-shadow: var(--lz-shadow-card); background: #fff; position: relative; width: 100%; min-height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.demo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo figcaption, figcaption { font-size: .8rem; line-height: 1.4; background: rgba(0,0,0,.55); color: #fff; padding: .35rem .6rem; position: absolute; left: 12px; bottom: 12px; line-height: 1; }
.demo[data-layout="waveforms"] { background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; padding: 1rem; }

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .span-4, .span-8 { grid-column: span 12; order: 0 !important; }
  .lz-gallery { min-height: 320px; }
  .lz-gallery-item--visible { transform: scale(1); }
  .lz-featurelist { flex-direction: row; flex-wrap: wrap; }
  .lz-feature { flex: 1 1 calc(50% - .5rem); min-width: 140px; }
  .demo { min-height: 260px; }
  #torqueDemo .lz-compare { height: 240px; }
}
@media (max-width: 600px) {
  .lz-feature { flex: 1 1 100%; min-width: 0; }
}
  /* Ensure the gallery items position inside their container, not the page */
  .lz-gallery { position: relative; } /* children are absolutely positioned */
  /* Optional: keep visible card on top without weird scaling */
  .lz-gallery-item { z-index: 1; }
  .lz-gallery-item--visible { z-index: 2; transform: scale(1.0); }

  /* Compare slider: a sensible default split if inline --cut is missing */
  #torqueDemo .lz-compare { --cut: 50%; }

/* --- Gallery container fixes --- */
.lz-gallery {
  position: relative;            /* establish positioning context */
  min-height: clamp(360px, 45vw, 520px); /* give it room so abs children don't collapse */
  isolation: isolate;            /* create a new stacking context */
  z-index: 0;
}

.lz-gallery .lz-gallery-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: none;               /* avoid visual 'zoom' conflicts */
  transition: opacity .25s ease;
  z-index: 1;
}

.lz-gallery .lz-gallery-item--visible {
  opacity: 1;
  z-index: 2;
}

/* Ensure media fills predictably */
.lz-gallery img,
.lz-gallery video,
.lz-gallery canvas,
.lz-gallery object {
  width: 100%;
  height: 100%;
  object-fit: scale-down;             /* or 'contain' if you prefer no crop */
  display: block;
}

/* --- Compare slider (keep overlay behavior, no accidental scaling) --- */
#torqueDemo .lz-compare { position: relative; width: 100%; height: 280px; }
#torqueDemo .pane { position: absolute; inset: 0; }
#torqueDemo .pane img { width: 100%; height: 100%; object-fit: contain; display: block; }
#torqueDemo .left  { clip-path: polygon(0 0, var(--cut) 0, var(--cut) 100%, 0 100%); }
#torqueDemo .right { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%); }
#torqueDemo .handle {
  position: absolute; top: 0; bottom: 0; left: var(--cut);
  width: 44px; transform: translateX(-50%);
  border: 0; background: transparent; cursor: ew-resize; z-index: 3;
}

  /* ---------- Layout & frame utilities ---------- */

  .lz-media-frame {
    position: relative;
    isolation: isolate;
    min-height: var(--lz-media-min, clamp(360px, 42vw, 520px));
    border-radius: 12px;
    background: #0b253a0d;
    overflow: hidden;
  }
  .fit-contain { object-fit: contain; }
  .fit-cover   { object-fit: cover; }
  .media-fill  { width:100%; height:100%; display:block; }

  /* ---------- Standard gallery ---------- */
  .lz-gallery { position: relative; isolation: isolate; }
  .lz-gallery-item {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .28s ease;
    z-index: 1;
  }
  .lz-gallery-item--visible { opacity: 1; z-index: 2; }
  .lz-gallery:hover .lz-gallery-item--visible .media-fill {
    transform: scale(1.03);
  }
  .lz-gallery .media-fill { transform: scale(1); transition: transform .45s ease; }

  /* Pills / feature-list that control a gallery */
  .lz-featurelist .lz-feature { cursor: pointer; user-select: none; }
  .lz-featurelist .lz-selected { font-weight: 700; }

  /* ---------- Compare slider (overlay; no scaling) ---------- */
  .lz-compare { position: relative; width: 100%; height: var(--lz-compare-h, 280px); --cut: 50%; }
  .lz-compare .pane { position: absolute; inset: 0; }
  .lz-compare img.media-fill { object-fit: contain; }
  .lz-compare .left  { clip-path: polygon(0 0, var(--cut) 0, var(--cut) 100%, 0 100%); }
  .lz-compare .right { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%); }
  .lz-compare .handle {
    position: absolute; top: 0; bottom: 0; left: var(--cut);
    width: 44px; transform: translateX(-50%);
    border: 0; background: transparent; cursor: ew-resize; z-index: 3;
  }

  /* ---------- Lightbox opt-out (prevents delegated handlers) ---------- */
  [data-lightbox="off"] img,
  [data-lightbox="off"] a {
    pointer-events: auto; /* still clickable for your own handlers */
  }

.lz-swapper { position: relative; width: 100%; }
.lz-swap { display: none; }
.lz-swap.lz-swap--active { display: block; }

#safety .demo { overflow: hidden; }
#safety .demo img, 
#safety .demo video, 
#safety .demo canvas { max-width: 100%; height: auto; display: block; }

/* subtle hover zoom/fade to draw user in */
#safety .demo:hover * { transition: transform .35s ease, opacity .35s ease; }
#safety .demo:hover video { transform: scale(1.02); opacity: .96; }

/* keep feature list consistent with other sections */
#safety .lz-featurelist .lz-feature { cursor: pointer; }
#safety .lz-featurelist .lz-feature.lz-selected { outline: 1px solid var(--lz-border-card); border-radius: var(--lz-r-md); }

/* ensure no accidental anchor/lightbox inside this block */
#safety a { pointer-events: auto; }
#safety .demo a { pointer-events: none; } /* demos are not clickable galleries */

#safety .lz-swapper { position: relative; }
#safety .lz-swap {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s var(--lz-ease), visibility .24s var(--lz-ease);
}
#safety .lz-swap.lz-swap--active {
  opacity: 1; visibility: visible; pointer-events: auto;
}


  /* Swapper visibility for the three reliability blocks */
  #rel-mech .lz-swapper, #rel-elec .lz-swapper, #rel-ops .lz-swapper { position:relative; }
  #rel-mech .lz-swap, #rel-elec .lz-swap, #rel-ops .lz-swap {
    position:absolute; inset:0;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .24s var(--lz-ease, ease), visibility .24s var(--lz-ease, ease);
  }
  #rel-mech .lz-swap.lz-swap--active,
  #rel-elec .lz-swap.lz-swap--active,
  #rel-ops .lz-swap.lz-swap--active {
    opacity:1; visibility:visible; pointer-events:auto;
  }

  /* Keep gallery/lightbox off inside these demos (only Photo Gallery should lightbox) */
  #rel-mech .demo img, #rel-mech .demo a,
  #rel-elec .demo img, #rel-elec .demo a,
  #rel-ops  .demo img, #rel-ops  .demo a { pointer-events:none; }
  #rel-mech video, #rel-elec video, #rel-ops video,
  #rel-mech .lz-compare, #rel-mech .lz-compare .handle { pointer-events:auto; }



 .lz-zblock {
  gap: var(--lz-zblock-gap) !important;
  margin-bottom: var(--lz-zblock-gap);
}

 .lz-zblock:last-child {
  margin-bottom: 0;
}

/* Ensure media/text fill full height in Z-blocks */
.lz-ztext,
.lz-zmedia {
  min-height: clamp(420px, 55vh, 580px);
}

/* Subtle Z-pattern connector lines (optional polish) */
.lz-zblock:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 50%;
  top: 100%;
  width: 2px;
  height: clamp(40px, 8vh, 80px);
  background: linear-gradient(to bottom, var(--lz-accent), transparent);
  transform: translateX(50%);
  z-index: 1;
}

/* === Make a section escape the main 1600px cap (full-bleed row) === */
.lz-section.lz-fullbleed {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Optional alternating band tones */
.lz-band { background: #0b1220; }      /* match your navy */
.lz-band.alt { background: #0e172a; }

/* Z-pattern grid (uses your semantics) */
.lz-zblock {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 1.25rem;
  align-items: center;
}
.lz-zblock .lz-ztext { grid-column: span 5; }
.lz-zblock .lz-zmedia { grid-column: span 7; }

/* Flip order per row */
.lz-zblock--flip .lz-ztext { order: 2; }
.lz-zblock--flip .lz-zmedia { order: 1; }

/* Container inside a full-bleed band */
.lz-band .lz-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* Media basics */
.lz-zmedia img,
.lz-zmedia video,
.lz-zmedia object,
.lz-zmedia svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Tabs: stop the “growing” behavior on select */
.lz-featurelist.lz-featurelist--tabs { display:flex; flex-wrap:wrap; gap:.5rem; }
.lz-featurelist .lz-feature { 
  flex: 0 0 auto;
  padding: .5rem .75rem; 
  border-radius: 8px; 
  background:#f1f5f9; 
  cursor:pointer; 
  transition: transform .15s ease, background .15s ease;
}
.lz-featurelist .lz-feature.lz-selected { background:#e2e8f0; }
.lz-featurelist .lz-feature:active { transform: scale(.98); }

/* Swapper panes */
.lz-swapper { position: relative; }
.lz-swapper .lz-swap { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .2s ease; }
.lz-swapper .lz-swap.lz-swap--active { opacity:1; visibility:visible; }

/* Responsive stack */
@media (max-width: 1024px) {
  .lz-zblock { grid-template-columns: 1fr; }
  .lz-zblock .lz-ztext, .lz-zblock .lz-zmedia { order: unset; grid-column: auto; }
}
    /* --- Transfer section height/spacing constraints --- */
    #transferDemo .lz-zblock--flip{
      display:flex; align-items:center; justify-content:space-between;
      gap:2rem; flex-wrap:wrap; min-height:0; padding-block:0;
    }
    #transferDemo .lz-card{
      flex:1 1 44%;
      display:flex; flex-direction:column; justify-content:center;
      min-width:280px;
    }
    /* Keep the SVG/media compact and prevent stray whitespace */
    #transferDemo #stsOneLine{
      display:block; vertical-align:middle; width:100%; height:auto;
      max-height:45vh; object-fit:contain;
    }
    /* Tighter controls + helper text */
    #transferDemo .controlRow{
      display:flex; justify-content:center; gap:.5rem; margin:.25rem 0 .25rem;
    }
    #transferDemo .controlRow .orangeButton,
    #transferDemo .controlRow .orangeButtonGray{ padding:.4rem 1rem; font-size:.85rem; }
    #transferDemo .hint{ font-size:.8rem; line-height:1.35; color:#4a5568; text-align:center; margin-top:.25rem; }
    /* Right column: cap height so the whole section fits a viewport */
    #transferDemo .lz-transfer-text{
      max-height:70vh; overflow:auto;
    }
    /* Compact callout */
    #transferDemo .lz-4p-callout{
      margin-top:1rem; padding:.75rem 1rem; background:#f9fafb;
      border-left:4px solid #cc6633; font-size:.92rem;
    }
    /* Mobile/tablet: relax height constraints to avoid inner scrolling */
    @media (max-width:1024px){
      #transferDemo .lz-transfer-text{ max-height:none; overflow:visible; }
      #transferDemo #stsOneLine{ max-height:none; }
      #transferDemo .lz-zblock--flip{ gap:1.25rem; }
    }

    /* ===== Operator Safety unified layout (scoped) ===== */
    .lz-unified-row{
      display:flex; gap:2rem; align-items:center; flex-wrap:wrap; min-height:0;
    }
    .span-4{ flex:1 1 360px; min-width:300px; display:flex; flex-direction:column; gap:1rem; }
    .span-8{ flex:1 1 640px; min-width:320px; display:flex; flex-direction:column; }
    .lz-featurelist{ display:flex; flex-direction:column; gap:.5rem; }
    .lz-feature{ cursor:pointer; padding:.6rem .8rem; border-radius:10px; border:1px solid var(--lz-border-card, rgba(0,0,0,.08)); background:#fff; }
    .lz-feature.lz-selected{  background:#fff7f3; }

    /* Swapper canvas */
    .lz-swapper{
      position:relative; width:100%;
      /* cap height to avoid page scroll; keep media readable */
      max-height:62vh; min-height:420px;
      display:flex; flex-direction:column; gap:.75rem;
    }
    .lz-swap{ position:absolute; inset:0; display:none; }
    .lz-swap.lz-swap--active{ display:flex; flex-direction:column; }
    /* Each panel’s demo grows; controls and details sit underneath */
    .demo{
      flex:1 1 auto; min-height:260px;
      border:1px solid var(--lz-border-card, rgba(0,0,0,.08));
      box-shadow:var(--lz-shadow-card, 0 8px 24px rgba(0,0,0,.06));
      background:#fff; display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden;
    }
    video{ width:100%; height:100%; object-fit:cover; display:block; }
    .controlRow{
      display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
      gap:.5rem; margin:.5rem 0 0;
    }
    .controlRow .orangeButton,
    .controlRow .orangeButtonGray{ padding:.45rem 1rem; font-size:.9rem; }
    .lz-detailtext{ margin-top:.5rem; }
    /* Make right column scroll internally if copy overflows the cap */
    .panel-scroll{
      display:flex; flex-direction:column; min-height:0; /* for proper flex overflow */
    }
    .panel-content{
      overflow:auto; padding-bottom:.25rem; /* gentle scroll if needed */
    }
    /* Hero (kept minimal and compact) */
    .lz-full-hero{
      display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center;
      margin-bottom:1rem;
		box-shadow: 0 6px 16px rgba(51,51,51,0.38);
		border-top-right-radius:16px; 
		border-top-left-radius:16px; 
		background: linear-gradient(180deg, #ffffff 50%, #d4d4d4 150%);
		overflow;hidden; 
    }
    .lz-hero-image img{ width:100%; height:auto; display:block; border-left:2px solid #cc6633; }
    @media (max-width:1024px){
      .lz-swapper{ max-height:none; }       /* no inner scrolling on small screens */
      .panel-content{ overflow:visible; }
      .lz-full-hero{ grid-template-columns:1fr; }
    }
.lz-swapper{
  position:relative; width:100%;
  max-height:62vh; min-height:420px;
  display:flex; flex-direction:column; gap:.75rem;
}

.lz-swap{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  display:flex; flex-direction:column;
}

.lz-swap.lz-swap--active{
  position:relative;ou
  opacity:1; visibility:visible; pointer-events:auto;
}

/* Ensure the sectionalization demo expands correctly */
#sectionalizationDemo{
  flex:1 1 auto; display:flex; flex-direction:column;
}
#secWrap{ flex:1 1 auto; min-height:260px; }
#secHost{ width:100%; height:100%; position:relative; }
#secHost svg{ width:100%; height:auto; display:block; }

/* ============================================================= */
/* STANDARDIZED ORANGE-THEMED FEATURE PILLS (SHARED)             */
/* ============================================================= */
.lz-featurelist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.lz-featurelist.orange-theme .lz-feature {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  cursor: pointer;
	overflow:hidden;
  transition: all 0.22s var(--lz-ease);
  user-select: none;
  font-size: 0.94rem;
  line-height: 1.35;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.lz-featurelist.orange-theme .lz-feature:hover {
  background: #fef3e8;
  border-color: #cc6633;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(204,102,51,0.18);
}

.lz-featurelist.orange-theme .lz-feature.lz-selected {
  background: #fff7f3;
  border-color: #cc6633;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(204,102,51,0.22);
}

.lz-featurelist.orange-theme .lz-feature strong {
  color: #0f172a;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.lz-featurelist.orange-theme .lz-feature .lz-subtext {
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 500;
}

/* Responsive: stack tighter on small screens */
@media (max-width: 768px) {
  .lz-featurelist.orange-theme .lz-feature {
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
  }
  .lz-featurelist.orange-theme .lz-feature strong { font-size: 0.96rem; }
}

#gallery .lz-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:14px;
}

/* Card button */
#gallery .lz-gallery-item{
  display:flex;
  flex-direction:column;
  text-align:left;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#gallery .lz-gallery-item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.12);
}

/* Image wrapper keeps a consistent thumb height */
#gallery .lz-gallery-imgwrap{
  aspect-ratio: 4/3;
  background:#eef1f5;
  overflow:hidden;
}
#gallery .lz-gallery-imgwrap img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Label area */
#gallery .lz-gallery-label{
  padding:10px 12px 12px;
}
#gallery .lz-gallery-label .lz-connector{
  display:inline-block;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#cc6633; background:#fff7f3; border:1px solid #ffd8c2; border-radius:8px;
  padding:3px 8px; margin-bottom:6px;
}
#gallery .lz-gallery-caption{
  color:#334155; line-height:1.4; font-size:.95rem;
}

/* Put this near the end of products_2025.css */
#gallery .lz-gallery-item {
  position: static;
  inset: auto;
  opacity: 1;
  transform: none;
  z-index: auto;
}
/* === Torque compare: fill the frame, no vertical clipping === */
#torqueDemo { --torque-h: clamp(360px, 50vh, 680px); }  /* overall height budget */

#torqueDemo .demo{
  min-height: var(--torque-h);
  display:flex; align-items:center; justify-content:center;
}

/* let the compare take all available space in the demo */
#torqueDemo .lz-compare{
  --cut: 50%;
  width: 100%;
  height: 100%;
  max-width: none;            /* remove the 960px cap */
  border-radius: var(--lz-r-lg);
  overflow: hidden;
}

/* never crop the art vertically */
#torqueDemo .pane img{
  width: 100%;
  height: 100%;
  object-fit: contain;        /* shows the whole SVGs */
  display: block;
}

/* one source of truth for the split: --cut */
#torqueDemo .left  { clip-path: polygon(0 0, var(--cut) 0, var(--cut) 100%, 0 100%); }
#torqueDemo .right { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%); }

#torqueDemo .handle{
  left: var(--cut);           /* tie handle to the CSS var */
  transform: translateX(-50%);
}

/* === MOBILE GALLERY: Horizontal Snap-Scrolling (Premium Swipe) === */
/* Targets .lz-gallery-grid or .amp-gallery – makes thumbs swipeable like iOS carousel */
/* High-end: Smooth inertia, snap alignment, subtle shadows on hover */

@media (max-width: 767px) {
  .lz-gallery-grid,
  .amp-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 76%;            /* Each item ~76% of viewport for peek-ahead */
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;     /* Mandatory snap for precise stops */
    padding: 0 14px 16px;              /* Side padding + bottom for scroll indicator */
    -webkit-overflow-scrolling: touch; /* Butter-smooth on iOS */
    scrollbar-width: none;             /* Hide scrollbar (Firefox) */
    -ms-overflow-style: none;          /* Hide scrollbar (IE/Edge) */
  }
  .lz-gallery-grid::-webkit-scrollbar,
  .amp-gallery::-webkit-scrollbar {
    display: none;                     /* Hide scrollbar (Chrome/Safari) */
  }
  .lz-gallery-item,
  .amp-gallery amp-img {
    scroll-snap-align: center;         /* Snap to item center for intuitive feel */
    transition: transform 0.25s var(--lz-ease);
  }
  .lz-gallery-item:hover,
  .amp-gallery amp-img:hover {
    transform: scale(1.03);            /* Subtle zoom on hover/tap */
  }
  .lz-gallery-imgwrap {
    aspect-ratio: 4 / 3;               /* Consistent thumb shape */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  .lz-gallery-label {
    padding: 8px 10px;
    font-size: 0.88rem;
  }
}

/* === FEATURES TILES: Smaller & Denser on Mobile === */
/* Targets .lz-spec-cards or similar spec/feature grids – compacts for quick scanning */
/* Premium: Tighter padding, smaller fonts, glassmorphic hover lift */

@media (max-width: 767px) {
  .lz-spec-cards {
    grid-template-columns: repeat(2, 1fr); /* Force 2-up even if more exist */
    gap: 14px;
    margin: 24px 3% 0;                 /* Reduced top margin */
  }
  .spec-card {
    padding: 14px 12px;                /* 30-40% smaller padding */
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.07);
    transition: all 0.25s var(--lz-ease);
  }
  .spec-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(204,102,51,0.2);
    border-color: rgba(204,102,51,0.5);
  }
  .spec-card img {
    width: 58%;                        /* Smaller icons */
    margin-bottom: 8px;
  }
  .spec-card .spec-label {
    font-size: 0.90rem;                /* Compact text */
    margin-bottom: 3px;
  }
  .spec-card .spec-sub {
    font-size: 0.78rem;
    opacity: 0.94;
  }
}

/* === DOCUMENTS & DOWNLOADS: 2-Up Grid on Mobile === */
/* Targets .docs-tiles – switches to 2-column for balanced, scannable layout */
/* High-end: Even spacing, card hover states, image scaling */

@media (max-width: 767px) {
  .docs-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2-up grid */
    gap: 14px;
    padding: 0 14px;
    margin-bottom: 28px;               /* Section breathing room */
  }
  .docs-tiles .lz-card {
    padding: 10px 8px;                 /* Compact padding */
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transition: transform 0.22s var(--lz-ease), box-shadow 0.22s var(--lz-ease);
    display: flex;
    flex-direction: column;
    height: 100%;                      /* Equal heights in row */
  }
  .docs-tiles .lz-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(204,102,51,0.18);
  }
  .docs-tiles .lz-media {
    margin-bottom: 8px;
    text-align: center;
  }
  .docs-tiles .lz-media img {
    width: 65%;                        /* Smaller thumbnails */
    max-height: 68px;
    object-fit: contain;
    border-radius: 8px;
  }
  .docs-tiles .lz-card > div {
    font-size: 0.88rem;
    line-height: 1.38;
    text-align: center;
  }
  .docs-tiles .lz-btn {
    margin-top: auto;                  /* Button at bottom */
    font-size: 0.82rem;
    padding: 8px 12px;
  }
}

/* === Ultra-Small Screens Fallback (e.g., iPhone SE) === */
@media (max-width: 480px) {
  .lz-gallery-grid,
  .amp-gallery {
    grid-auto-columns: 82%;            /* Slightly wider for fewer items visible */
  }
  .lz-spec-cards,
  .docs-tiles {
    gap: 10px;
    padding: 10px 10px;
  }
  .spec-card,
  .docs-tiles .lz-card {
    padding: 12px 10px;
  }
}

/* === SPEC CARDS: Ultra-Premium Glassmorphism + 3D Hover Lift === */
/* Targets your .lz-spec-cards grid and .spec-card items */
/* Glass: Frosted backdrop-blur with inner sheen; 3D: Perspective tilt + deeper shadow on hover */
/* Subtle, performant—feels like premium automotive glass (e.g., Acura dashboard) */

.lz-spec-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
  margin: 2%;
  perspective: 1400px; /* Enables 3D space for children */
}
@media (max-width: 1023px) { 
  .lz-spec-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; } 
}
@media (max-width: 767px) { 
  .lz-spec-cards { 
    grid-template-columns: repeat(2, 1fr); /* 2-up mobile from prior fixes */
    gap: 14px; 
    margin: 24px 3% 0;
  } 
}

.spec-card {
  background: rgba(255, 255, 255, 0.68); /* Frosted glass base */
  backdrop-filter: blur(14px); /* Strong blur for depth */
  -webkit-backdrop-filter: blur(14px); /* Safari support */
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 18px;
  padding: 24px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d; /* Enables 3D transforms */
  cursor: pointer;
}

/* Inner Sheen Overlay: Reveals on hover for glassy reflection */
.spec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.42s ease;
  border-radius: inherit;
}

/* 3D Hover: Tilt toward cursor + lift + deeper glass glow */
.spec-card:hover {
  transform: translateY(-8px) rotateX(4deg) rotateY(2deg); /* Subtle 3D pop */
  border-color: rgba(204,102,51,0.45);
  z-index: 1; /* Layer above siblings */
}
.spec-card:hover::before {
  opacity: 1; /* Sheen fade-in */
}


/* Text: Premium typography with hover accent */
.spec-card .spec-label {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f1320;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
  transition: color 0.38s ease;
}
.spec-card:hover .spec-label {
  color: #cc6633; /* Orange accent shift */
}
.spec-card .spec-sub {
  font-size: 0.86rem;
  color: #2c3344;
  opacity: 0.92;
  line-height: 1.32;
  transition: opacity 0.38s ease;
}
.spec-card:hover .spec-sub {
  opacity: 1;
}

/* Mobile: Tamer 3D (no tilt, just lift) + denser */
@media (max-width: 767px) {
  .spec-card {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .spec-card:hover {
    transform: translateY(-5px); /* Lift only—no tilt on touch */
  }
  .spec-card img {
    width: 56%;
  }
  .spec-card .spec-label {
    font-size: 0.96rem;
  }
  .spec-card .spec-sub {
    font-size: 0.80rem;
  }
}

/* Reveal Animation (for .lz-reveal class) */
.lz-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: revealFade 0.68s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes revealFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* === SPEC CARDS: Refined Ultra-Premium Glass (Subtler Evolution) === */
/* Builds on prior glassmorphism: Softer blur, minimal tilt, elegant inner light */
/* High-end: Like luxury watch crystal—clean, reflective, understated depth */
/* No overkill: Reduced 3D tilt, no pulses; focus on hover lift + sheen */

.lz-spec-cards {
  perspective: 1600px; /* Gentler 3D space */
}

.spec-card {
  background: rgba(255, 255, 255, 0.74); /* Slightly more opaque for clarity */
  backdrop-filter: blur(12px); /* Softer blur for premium frost */
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 20px; /* Smoother corners */
  padding: 26px 22px;
  box-shadow: 
    0 6px 24px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.24) inset;
  transition: 
    transform 0.42s cubic-bezier(0.23, 1, 0.32, 1), /* Ease-out for natural lift */
    box-shadow 0.42s ease,
    border-color 0.42s ease;
  transform-style: preserve-3d;
}

/* Subtle Sheen: Faint highlight, no full overlay */
.spec-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.28) 0%, transparent 100%);
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.48s ease;
  border-radius: 20px 20px 0 0;
}
.spec-card:hover::before {
  opacity: 0.9; /* Gentle brighten */
}

/* Hover: Pure lift + soft glow (minimal tilt for elegance) */
.spec-card:hover {
  transform: translateY(-7px) rotateX(2deg); /* Barely-there 3D */
  box-shadow: 
    0 18px 42px rgba(0,0,0,0.09),
    0 0 0 1px rgba(204,102,51,0.28) inset;
  border-color: rgba(204,102,51,0.32);
}

/* Icon: Soft hover breathe */
.spec-card img {
  width: 60%;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.08));
  transition: transform 0.42s ease;
}
.spec-card:hover img {
  transform: scale(1.06);
}

/* Text: Clean, with faint accent shift */
.spec-card .spec-label {
  font-size: 1.05rem;
  font-weight: 650;
  color: #0f1320;
  letter-spacing: -0.015em;
  transition: color 0.42s ease;
}
.spec-card:hover .spec-label {
  color: #b5582e; /* Warmer orange */
}
.spec-card .spec-sub {
  font-size: 0.88rem;
  color: #334155;
  font-weight: 500;
}

/* Mobile: Even subtler */
@media (max-width: 767px) {
  .spec-card {
    padding: 18px 16px;
    border-radius: 18px;
    backdrop-filter: blur(10px);
  }
  .spec-card:hover {
    transform: translateY(-4px);
  }
  .spec-card::before {
    opacity: 0.5;
  }
  .spec-card:hover::before {
    opacity: 0.75;
  }
}

/* Staggered Reveal: Smoother entry */
.lz-spec-cards .lz-reveal {
  animation-delay: calc(0.1s * var(--i, 0)) !important; /* Use inline --i if needed */
}

/* === LZ-SWAPPER: Ultra-Premium Demo Transitions with Safe Zoom === */
/* Targets .lz-swapper and .lz-swap panels */
/* Zoom: Subtle scale (1.02-1.06) on active; fade-cross for smoothness */
/* Layout-Safe: Absolute positioning with flex containment; no height jumps */
/* Premium: Eased cubic-bezier for cinematic feel; optional glass overlay */

.lz-swapper {
  position: relative;
  width: 100%;
  max-height: 62vh;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden; /* Contain zooms */
  border-radius: var(--lz-r-xl);
  box-shadow: var(--lz-shadow-card);
  background: var(--lz-bg-card);
  padding: 0; /* No internal padding shifts */
}

.lz-swap {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  transform: scale(0.98); /* Start slightly small */
  transition: 
    opacity 0.52s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.62s cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 0.62s; /* Delay visibility toggle */
  backface-visibility: hidden; /* Anti-alias zoom */
  will-change: opacity, transform; /* GPU hint */
}

.lz-swap.lz-swap--active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1); /* Full size */
  transition: 
    opacity 0.52s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.62s cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 0s;
  z-index: 2; /* Above inactive */
}

/* Optional Entering Zoom Burst (uncomment for more pop) */
/*
.lz-swap.lz-swap--active {
  transform: scale(1.04);
  animation: zoomIn 0.72s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes zoomIn {
  0% { transform: scale(0.96); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
*/

/* Demo Content: Fill exactly, no overflow shifts */
.lz-swap .demo,
.lz-swap .lz-full-hero,
.lz-swap .lz-compare,
.lz-swap video,
.lz-swap iframe,
.lz-swap canvas,
.lz-swap svg {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Or 'cover' if cropping OK */
  border-radius: inherit;
  transition: inherit; /* Sync with panel */
}

/* Control Row: Sticky bottom, no layout push */
.lz-swap .controlRow {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(8px);
  padding: 12px;
  text-align: center;
  z-index: 3;
  transition: background 0.42s ease;
}
.lz-swap.lz-swap--active .controlRow {
  background: rgba(255,255,255,0.88);
}

/* High-End Polish: Glass edge on active */
.lz-swap.lz-swap--active {
  box-shadow: 0 0 0 1px rgba(204,102,51,0.22) inset;
}

/* Mobile: Tamer zoom (scale 1.02 max) */
@media (max-width: 767px) {
  .lz-swap {
    transform: scale(0.99);
  }
  .lz-swap.lz-swap--active {
    transform: scale(1);
  }
  .lz-swapper {
    min-height: 340px;
    max-height: 68vh;
  }
}


/* ============================
   PIXI HERO OVERLAY (Doors)
   ============================ */

#canvasContainer_Doors.lz-pixi-container{
  position: relative;
  width: 100%;
  max-width: 800px;          /* match your intended hero render size */
  aspect-ratio: 1 / 1;       /* keeps perfect square; remove if you want free height */
  overflow: hidden;
  border-radius: var(--lz-r-xl, 16px);
  background: #fff;
}

/* image + canvas are layers */
#canvasContainer_Doors.lz-pixi-container > img,
#canvasContainer_Doors.lz-pixi-container > canvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* fallback image under canvas */
#canvasContainer_Doors.lz-pixi-container > img{
  z-index: 1;
  object-fit: contain;
}

/* canvas above image, starts hidden and fades in */
#canvasContainer_Doors.lz-pixi-container > canvas{
  z-index: 2;
  opacity: 1;
  transition: opacity 350ms ease;
}

/* when JS marks ready, fade canvas in */
#canvasContainer_Doors.lz-pixi-container.is-ready > canvas{
  opacity: 1;
}

/* Lightbox must NOT block clicks when hidden */
#lz-lightbox{
  position: fixed;
  inset: 0;
  z-index: 999999;
}

/* Hidden state: invisible + does NOT capture mouse */
#lz-lightbox[aria-hidden="true"]{
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Visible state: interactive */
#lz-lightbox[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Backdrop + panel layering */
#lz-lightbox .lz-lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 1;
}

#lz-lightbox .lz-lightbox-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Make sure controls are above panel content */
#lz-lightbox .lz-lightbox-close,
#lz-lightbox .lz-lightbox-prev,
#lz-lightbox .lz-lightbox-next{
  z-index: 3;
}

/* Specs Table section */
.lz-specs-table .lz-specs-table__wrap {
  overflow-x: auto;
}

.lz-table.lz-table--specs {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.lz-table.lz-table--specs th,
.lz-table.lz-table--specs td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  vertical-align: top;
}

.lz-table.lz-table--specs tr:last-child th,
.lz-table.lz-table--specs tr:last-child td {
  border-bottom: none;
}

.lz-table.lz-table--specs th {
  width: 240px;
  font-weight: 700;
  text-align: left;
  background: rgba(0,0,0,0.02);
}

@media (max-width: 720px) {
  .lz-table.lz-table--specs th {
    width: 45%;
  }
}

/* =========================
   Product Contact Section
   ========================= */
.lz-contact .lz-card {
  /* keep your card look, just ensure it doesn't look like a giant panel */
  border: 1px solid rgba(17, 24, 39, 0.10);
  border-radius: 14px;
}

/* Kill any "banner" look on the title inside this card */
.lz-contact .lz-h3 {
  margin: 0 0 10px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Intro text rhythm */
.lz-contact .lz-prose p {
  margin: 0 0 14px;
  opacity: 0.88;
}

/* Form layout */
.lz-contact .lz-form {
  margin-top: 10px;
}

/* Make your inline grid behave like a real form grid */
.lz-contact .lz-grid.lz-cols-12 {
  gap: 14px !important; /* override inline gap if needed */
}

/* Labels */
.lz-contact .lz-label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 6px;
  color: rgba(17, 24, 39, 0.9);
}

/* Inputs */
.lz-contact .lz-input,
.lz-contact .lz-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: rgba(17, 24, 39, 0.95);
  line-height: 1.2;
  font-size: 0.98rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}

/* Better textarea feel */
.lz-contact .lz-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Focus state (high-end, not neon) */
.lz-contact .lz-input:focus,
.lz-contact .lz-textarea:focus {
  outline: none;
  border-color: rgba(17, 24, 39, 0.35);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

/* Placeholder */
.lz-contact .lz-input::placeholder,
.lz-contact .lz-textarea::placeholder {
  color: rgba(17, 24, 39, 0.45);
}

/* Alerts */
.lz-contact .lz-alert {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(17, 24, 39, 0.10);
  margin: 12px 0 14px;
  font-weight: 600;
}

.lz-contact .lz-alert--success {
  background: rgba(0, 180, 90, 0.08);
}

.lz-contact .lz-alert--error {
  background: rgba(220, 50, 50, 0.08);
}

/* Submit row alignment */
.lz-contact .lz-form .lz-submit-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.lz-contact .lz-form .lz-submit-note {
  opacity: 0.75;
  font-size: 0.92rem;
}


.lz-contact .orangeButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.16);
  filter: brightness(1.02);
}

.lz-contact .orangeButton:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* Mobile: force full width columns */
@media (max-width: 780px) {
  .lz-contact .lz-grid.lz-cols-12 > div {
    grid-column: span 12 !important;
  }
}



/* === FIT WITHOUT CROPPING: only the slideshow images === */
.lz-gallery .gallery-image{
  width: auto !important;
  height: auto !important;
  max-width: 95%;
  max-height: 95%;
  object-fit: contain !important;
  object-position: center;
  display: block;
}

.lz-gallery .gallery-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* ==========================================
   Product grid: cards match tallest in row
   (no clipping, no fixed heights)
   ========================================== */

/* Ensure the grid rows stretch items */
.product-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;                 /* adjust if you already have gap */
  align-items: stretch;      /* key: stretch items to row height */
}

/* Each LI should stretch to fill the grid row height */
.product-card{
  height: 100%;
}

/* Make the clickable area and inner wrapper fill the card */
.product-card__link{
  display: block;
  height: 100%;
}

.product-card__inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Media stays natural height; body can grow */
.product-card__media{
  flex: 0 0 auto;
}

/* Body takes remaining height (so shorter ones stretch) */
.product-card__body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  /* IMPORTANT: do NOT clip */
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}







.lz-configurations__text{
  max-width: 980px;
  margin: 0 auto 16px;
  text-align: center;
}

.lz-configurations__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.lz-configurations__link{
  text-decoration:none;
  color:inherit;
}

.lz-configurations__tile{
  width:220px;
  padding:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:14px;
  text-align:center;
}

.lz-configurations__tile img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

.lz-configurations__label{
  margin-top:8px;
  font-weight:600;
}

.lz-configurations__text{
  max-width: 980px;
  margin: 0 auto 18px;
  text-align: center;
}

.lz-configurations__stack{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.lz-configurations__block{
  width:100%;
}

.lz-configurations__img{
  width:100%;
  height:auto;
  display:block;
}

.lz-configurations__caption{
  margin-top:8px;
  text-align:center;
  font-weight:600;
}

.lz-configurations__blockLink{
  text-decoration:none;
  color:inherit;
  display:block;
}