/* MTO Windows & Doors: 3D interactive window component (pairs with /assets/js/win3d.js).
   <div class="w3d" data-type="double-hung|slider|slider-3|casement|awning|picture|special|patio"></div>
   Sized by its container's width; square by default (override with --w3d-ratio, e.g. 4 / 3).
   Palette: white vinyl, sky glass #A7D3F5 to #1D4FA3, navy #0F2A5C hardware, slate #6B7480 and #E6E9EE shading. */

.w3d {
  --o: 0; --rx: 0; --ry: 0; --lz: 0;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--w3d-ratio, 1 / 1);
  container-type: inline-size;
  border-radius: 16px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  outline: none;
}
.w3d:active { cursor: grabbing; }
.w3d[data-type="picture"], .w3d[data-type="special"] { cursor: pointer; }
.w3d:focus-visible { outline: 3px solid #1D4FA3; outline-offset: 4px; }

.w3d-unit {
  position: absolute;
  left: 50%; top: 50%;
  width: 100cqw; height: 100cqw;
  margin: -50cqw 0 0 -50cqw;
  perspective: 125cqw;
  pointer-events: none;
}
.w3d-layer {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--lz) * 1cqw)) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg));
  will-change: transform;
}
.w3d-p { position: absolute; box-sizing: border-box; }
.w3d-g { transform-style: preserve-3d; }
.w3d-face, .w3d-ring { overflow: visible; }

/* ---------- vinyl and trim profiles (outer edge to inner edge) ---------- */
.w3d-casing { --pf: #CBD2DA 0, #E6E9EE 2.5%, #FFFFFF 9%, #FFFFFF 36%, #E9EDF1 38%, #FFFFFF 42%, #FCFDFD 84%, #EEF1F4 93%, #DCE1E7 100%; }
.w3d-frame  { --pf: #DDE2E8 0, #FFFFFF 22%, #F8F9FB 64%, #E6E9EE 88%, #CFD6DD 100%; }
.w3d-sash   { --pf: #C3CAD3 0, #E6E9EE 4%, #FFFFFF 10%, #FFFFFF 54%, #EEF1F4 66%, #FFFFFF 74%, #EEF1F4 88%, #C9D0D8 100%; }
.w3d-bead   { --pf: #E6E9EE 0, #FFFFFF 18%, #F6F8FA 62%, #E1E6EB 86%, #C7CED7 100%; }
/* bottom rails catch the light on their inner bevel */
.w3d-casing .w3d-bb, .w3d-frame .w3d-bb { --pb: #E3E7EC 0, #FFFFFF 30%, #F4F6F9 100%; }
.w3d-sash .w3d-bb, .w3d-bead .w3d-bb { --pf: #C3CAD3 0, #E6E9EE 4%, #FFFFFF 12%, #FBFCFD 60%, #F1F4F7 82%, #FFFFFF 94%, #E6E9EE 100%; }

.w3d-bar { position: absolute; }
.w3d-bt { background: linear-gradient(to bottom, var(--pf)); }
.w3d-bl { background: linear-gradient(to right, var(--pf)); }
.w3d-br { background: linear-gradient(rgba(15,42,92,.035), rgba(15,42,92,.035)), linear-gradient(to left, var(--pf)); }
.w3d-bb { background: linear-gradient(rgba(15,42,92,.05), rgba(15,42,92,.05)), linear-gradient(to top, var(--pf)); }
.w3d-frame.w3d-ring .w3d-bb { background: linear-gradient(to top, #E6E9EE 0, #FFFFFF 26%, #F7F9FB 70%, #E9EDF1 100%); }
.w3d--patio .w3d-frame .w3d-bb { background: linear-gradient(to bottom, #DCE1E7, #EEF1F4 40%, #C9D0D8); }

/* ---------- depth surfaces (gradient runs front to back) ---------- */
.w3d-tt { --dir: to bottom; }
.w3d-tb { --dir: to top; }
.w3d-tl { --dir: to right; }
.w3d-tr { --dir: to left; }
.w3d-tube { background: linear-gradient(var(--dir), var(--df)); }

.w3d-ret.w3d-tt { --df: #E2E7EC 0, #D3D9E0 100%; }
.w3d-ret.w3d-tl { --df: #F6F8FA 0, #E9EDF1 60%, #DCE1E7 100%; }
.w3d-ret.w3d-tr { --df: #EDF0F3 0, #E1E5EA 60%, #D3D9E0 100%; }
.w3d-sill { --df: #FFFFFF 0, #FBFCFD 55%, #E9EDF1 100%; }
.w3d-thresh { --df: #EEF1F4 0, #E6E9EE 50%, #D5DBE2 100%; }

.w3d-track.w3d-tt { --df: #E9EDF1 0, #DDE2E8 30%, #C7CED7 32%, #E3E7EC 35%, #DDE2E8 62%, #C7CED7 64%, #DFE4E9 67%, #CDD4DC 100%; }
.w3d-track.w3d-tl,
.w3d-track.w3d-tr { --df: #FFFFFF 0, #F2F4F7 28%, #CBD2DA 30%, #F7F9FB 33%, #EEF1F4 62%, #CBD2DA 64%, #F4F6F9 67%, #DFE4E9 100%; }
.w3d-track.w3d-tr { --df: #F4F6F9 0, #E9EDF1 28%, #C4CBD4 30%, #EEF1F4 33%, #E6E9EE 62%, #C4CBD4 64%, #EBEEF2 67%, #D5DBE2 100%; }
.w3d-framesill { --df: #FFFFFF 0, #F4F6F9 45%, #E6E9EE 47%, #F7F9FB 50%, #DDE2E8 100%; }
.w3d-doorsill { --df: #E6E9EE 0, #CBD2DA 22%, #EEF1F4 26%, #D5DBE2 55%, #EEF1F4 59%, #C3CAD3 100%; }

.w3d-edge { background: linear-gradient(var(--dir2), var(--ef)); }
.w3d-et { --dir2: to top; }      /* local top is the back */
.w3d-eb { --dir2: to bottom; }
.w3d-el { --dir2: to left; }
.w3d-er { --dir2: to right; }
.w3d-sashedge { --ef: #F7F9FB 0, #E6E9EE 70%, #D5DBE2 100%; }
.w3d-sashedge.w3d-eb, .w3d-sashedge.w3d-er { --ef: #E9EDF1 0, #D9DFE5 70%, #C9D0D8 100%; }
.w3d-trimedge { --ef: #EEF1F4 0, #DDE2E8 100%; }
.w3d-trimedge.w3d-er { --ef: #DCE1E7 0, #C3CAD3 100%; }
.w3d-trimedge.w3d-el { --ef: #F4F6F9 0, #E6E9EE 100%; }

/* ---------- glass ---------- */
.w3d-glass { overflow: hidden; }
.w3d-gtint {
  position: absolute; inset: 0;
  background:
    linear-gradient(158deg, rgba(255,255,255,.24) 0, rgba(255,255,255,.07) 30%, rgba(255,255,255,.02) 52%),
    linear-gradient(to bottom, rgba(255,255,255,.07), rgba(167,211,245,.08) 45%, rgba(29,79,163,.10));
  box-shadow:
    inset 0 1.1cqw 1.8cqw -0.7cqw rgba(15,42,92,.30),
    inset 0.5cqw 0 1cqw -0.6cqw rgba(15,42,92,.12),
    inset 0 0 0 0.11cqw rgba(15,42,92,.28);
}
.w3d-spacer {
  position: absolute; inset: 0.34cqw;
  border: 0.28cqw solid rgba(107,116,128,.55);
  border-radius: 0.1cqw;
}
.w3d-glare {
  position: absolute;
  background:
    linear-gradient(117deg,
      rgba(255,255,255,0) 41.2%,
      rgba(255,255,255,.34) 43.4%,
      rgba(255,255,255,.44) 44.8%,
      rgba(255,255,255,.10) 47.6%,
      rgba(255,255,255,0) 48.6%,
      rgba(255,255,255,0) 49.8%,
      rgba(255,255,255,.36) 50.4%,
      rgba(255,255,255,.30) 51.2%,
      rgba(255,255,255,0) 51.9%,
      rgba(255,255,255,0) 60%,
      rgba(255,255,255,.12) 62%,
      rgba(255,255,255,0) 64%);
  will-change: transform;
}

/* ---------- the view outside ---------- */
.w3d-scene { overflow: hidden; background: #A7D3F5; }
.w3d-sky {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translate3d(calc(var(--ry) * 0.30cqw), calc(var(--rx) * -0.26cqw), 0);
  will-change: transform;
}

/* ---------- light and shadow ---------- */
.w3d-ao {
  box-shadow:
    inset 0 1.6cqw 2.4cqw -0.8cqw rgba(15,42,92,.24),
    inset 1cqw 0 1.8cqw -1cqw rgba(15,42,92,.10),
    inset -1cqw 0 1.8cqw -1cqw rgba(15,42,92,.14);
}
.w3d-wallshadow { background: rgba(15,42,92,.2); filter: blur(2.2cqw); border-radius: 1.2cqw; }
.w3d-contact { background: radial-gradient(closest-side, rgba(15,42,92,.20), rgba(15,42,92,0)); filter: blur(0.6cqw); }
.w3d-castup { background: linear-gradient(to top, rgba(15,42,92,.24), rgba(15,42,92,0)); }
.w3d-castside { background: linear-gradient(to right, rgba(15,42,92,.20), rgba(15,42,92,0)); }
.w3d-castside-l { background: linear-gradient(to left, rgba(15,42,92,.20), rgba(15,42,92,0)); }
.w3d-screen {
  background:
    repeating-linear-gradient(0deg, rgba(15,42,92,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(15,42,92,.07) 0 1px, transparent 1px 3px);
  opacity: .55;
}

/* ---------- stool, apron, floor ---------- */
.w3d-stool-top {
  background:
    radial-gradient(60% 120% at 46% 100%, rgba(255,255,255,1), rgba(255,255,255,0)),
    linear-gradient(to bottom, #E3E8ED 0, #F6F8FA 30%, #FFFFFF 80%, #EEF1F4 100%);
}
.w3d-stool-front { background: linear-gradient(to bottom, #E6E9EE 0, #FFFFFF 12%, #FFFFFF 34%, #EEF1F4 72%, #D5DBE2 100%); box-shadow: 0 0 0 0.1cqw rgba(107,116,128,.26); }
.w3d-stool-end { background: linear-gradient(to left, #EEF1F4, #DDE2E8); }
.w3d-stool-end-r { background: linear-gradient(to right, #E3E7EC, #D2D8DF); }
.w3d-apron {
  background:
    linear-gradient(to bottom, rgba(15,42,92,.18) 0, rgba(15,42,92,.05) 22%, rgba(15,42,92,0) 40%),
    linear-gradient(to bottom, #FFFFFF 0, #FFFFFF 46%, #E9EDF1 48%, #FFFFFF 52%, #F4F6F9 100%);
  box-shadow: 0 0 0 0.08cqw rgba(107,116,128,.16), 0 0.5cqw 1cqw -0.4cqw rgba(15,42,92,.2);
}
.w3d-floor {
  background:
    radial-gradient(42% 70% at 50% 0, rgba(255,255,255,.95), rgba(255,255,255,0) 100%),
    radial-gradient(56% 100% at 50% 0, rgba(214,220,227,.9), rgba(230,233,238,0) 100%);
}

/* ---------- hardware ---------- */
.w3d-hw { border-radius: 0.5cqw; }
.w3d-keeper {
  background: linear-gradient(to bottom, #FFFFFF, #E6E9EE 55%, #CBD2DA);
  box-shadow: inset 0 0 0 0.09cqw rgba(107,116,128,.55), 0 0.2cqw 0.4cqw rgba(15,42,92,.22);
  border-radius: 0.35cqw;
}
.w3d-lockbase {
  background: linear-gradient(to bottom, #FFFFFF, #EEF1F4 50%, #D5DBE2);
  box-shadow: inset 0 0 0 0.09cqw rgba(107,116,128,.5), 0 0.25cqw 0.5cqw rgba(15,42,92,.25);
  border-radius: 0.85cqw;
}
.w3d-lever {
  background: linear-gradient(to bottom, #3A5B97, #0F2A5C 70%);
  box-shadow: 0 0.25cqw 0.45cqw rgba(15,42,92,.35);
  border-radius: 0.65cqw;
}
.w3d-lever.w3d-v { background: linear-gradient(to right, #3A5B97, #0F2A5C 70%); }
.w3d-lift {
  background: linear-gradient(to bottom, #FFFFFF, #EEF1F4 45%, #CDD4DC);
  box-shadow: inset 0 0 0 0.09cqw rgba(107,116,128,.5), 0 0.3cqw 0.5cqw rgba(15,42,92,.28);
  border-radius: 0.65cqw;
}
.w3d-latch {
  background: linear-gradient(to bottom, #FFFFFF, #E6E9EE);
  box-shadow: inset 0 0 0 0.08cqw rgba(107,116,128,.45);
  border-radius: 0.3cqw;
}
.w3d-pull {
  background: linear-gradient(to right, #FFFFFF, #EEF1F4 45%, #CDD4DC);
  box-shadow: inset 0 0 0 0.09cqw rgba(107,116,128,.45), 0.25cqw 0.2cqw 0.5cqw rgba(15,42,92,.25);
  border-radius: 0.6cqw;
}
.w3d-crankbase {
  background: linear-gradient(to bottom, #FFFFFF, #E6E9EE 60%, #CDD4DC);
  box-shadow: inset 0 0 0 0.09cqw rgba(107,116,128,.5), 0 0.25cqw 0.5cqw rgba(15,42,92,.25);
  border-radius: 0.95cqw;
}
.w3d-crank {
  background: linear-gradient(to bottom, #3A5B97, #0F2A5C 75%);
  border-radius: 0.55cqw;
  box-shadow: 0 0.3cqw 0.5cqw rgba(15,42,92,.35);
}
.w3d-crank::after {
  content: ""; position: absolute; right: -0.5cqw; top: 50%;
  width: 1.9cqw; height: 1.9cqw; margin-top: -0.95cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4A6BA6, #0F2A5C 70%);
}
.w3d-plate {
  background: linear-gradient(to right, #FFFFFF, #E6E9EE 60%, #CDD4DC);
  box-shadow: inset 0 0 0 0.09cqw rgba(107,116,128,.5), 0 0.2cqw 0.4cqw rgba(15,42,92,.2);
  border-radius: 0.8cqw;
}
.w3d-handle {
  background: linear-gradient(to right, #4466A2, #1D3D78 40%, #0F2A5C);
  border-radius: 0.6cqw;
  box-shadow: 0.5cqw 0.6cqw 0.9cqw rgba(15,42,92,.3);
}
.w3d-handle-side { background: #0F2A5C; border-radius: 0.4cqw; }

/* ---------- arch-top (special shape) ---------- */
.w3d-archcasing { border-style: solid; border-color: #FFFFFF #EEF1F4 transparent #F7F9FB; }
.w3d-archgroove { position: absolute; border: 0.22cqw solid #E9EDF1; border-bottom: 0; }
.w3d-archslice { border-style: solid; border-bottom-width: 0 !important; }
.w3d-archedge { border-width: 0.6cqw; border-color: #E3E7EC; }
.w3d-archret { border-width: 0.8cqw; }
.w3d-archtrack { border-width: 0.8cqw; }
.w3d-archframe { border-style: solid; border-color: #FFFFFF #EEF1F4 #E6E9EE #F8FAFC; box-shadow: inset 0 0 0 0.1cqw rgba(107,116,128,.25); }
.w3d-archbead {
  border: 1.6cqw solid; border-color: #FFFFFF #EEF1F4 #E9EDF1 #F7F9FB;
  box-shadow: inset 0 0 0 0.12cqw rgba(15,42,92,.22), inset 0 1cqw 1.6cqw -0.8cqw rgba(15,42,92,.25);
}
.w3d--special .w3d-ao { box-shadow: inset 0 1.6cqw 2.4cqw -0.8cqw rgba(15,42,92,.20); }

/* ---------- four-pane mode (data-panes="4" on a double-hung) ---------- */
.w3d--panes { cursor: default; }
.w3d-muntin {
  background: linear-gradient(to right, #DCE2E8 0, #FFFFFF 22%, #FFFFFF 60%, #E6E9EE 85%, #C9D0D8 100%);
  box-shadow: 0.35cqw 0.25cqw 0.6cqw rgba(15,42,92,.22);
}
.w3d-pane {
  pointer-events: auto;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.w3d-pane::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 48%, rgba(255,255,255,.7), rgba(255,255,255,0) 100%),
    linear-gradient(to bottom, rgba(255,255,255,.34), rgba(167,211,245,.3));
  box-shadow: inset 0 0 0 0.5cqw #FFFFFF, inset 0 0 0 1.05cqw rgba(29,79,163,.55), inset 0 0 4cqw rgba(255,255,255,.85);
  opacity: 0;
  transition: opacity .35s ease;
}
.w3d-pane:hover::before { opacity: .45; }
.w3d-pane.is-lit::before { opacity: 1; }
.w3d-pnum {
  position: absolute; left: 50%; top: 50%;
  width: 7.2cqw; height: 7.2cqw; margin: -3.6cqw 0 0 -3.6cqw;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1D4FA3;
  box-shadow: inset 0 0 0 0.5cqw #1D4FA3, 0 0.6cqw 1.4cqw rgba(15,42,92,.28);
  font-family: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 800; font-size: 3.6cqw; line-height: 1;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s ease, color .3s ease;
}
.w3d-pane:hover .w3d-pnum { transform: scale(1.06); }
.w3d-pane.is-lit .w3d-pnum { background: #1D4FA3; color: #FFFFFF; box-shadow: inset 0 0 0 0.5cqw #FFFFFF, 0 0.8cqw 1.8cqw rgba(15,42,92,.35); transform: scale(1.1); }
.w3d-pane:focus-visible { outline: 0.6cqw solid #0F2A5C; outline-offset: -0.6cqw; }
@media (prefers-reduced-motion: reduce) {
  .w3d-pane::before, .w3d-pnum { transition: none; }
}

/* fit inside the home page style-card slot: use the slot's empty margin */
@media (min-width: 560px) { .jcard-art > .w3d { width: 112%; margin: 0 -6% -12%; } }