/* ============================================================
   زوايا — عارض الشبابيك 3D
   ============================================================ */
.win-board.w3d{background:#141210;aspect-ratio:4/4.7;width:min(100%,calc((100svh - 140px) * .85));isolation:isolate}
.w3d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;outline:none}
.w3d.zoomed .w3d-canvas{touch-action:none}
.w3d-canvas:active{cursor:grabbing}
.w3d-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.w3d-dot{position:absolute;left:0;top:0;pointer-events:auto;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--ink);
  font:700 12px/26px var(--en);text-align:center;box-shadow:0 0 0 4px rgba(198,164,106,.25),0 6px 16px rgba(0,0,0,.45);transition:box-shadow .3s,background .3s}
.w3d-dot:hover{background:#e0c48e;box-shadow:0 0 0 7px rgba(198,164,106,.3),0 6px 16px rgba(0,0,0,.45)}
.w3d-tag{position:absolute;left:0;top:0;font-size:11px;color:rgba(246,242,234,.75);background:rgba(20,18,16,.7);padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid rgba(246,242,234,.12)}
.w3d-tag.big{font-size:13px;font-weight:700;color:var(--gold);border-color:rgba(198,164,106,.4)}

.w3d-top{position:absolute;z-index:3;top:14px;left:50%;transform:translateX(-50%)}
.w3d-seg{display:flex;padding:4px;border-radius:999px;background:rgba(20,18,16,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(246,242,234,.12)}
.w3d-seg button{height:34px;padding:0 16px;border-radius:999px;font-size:13px;color:rgba(246,242,234,.7);transition:background .3s,color .3s;white-space:nowrap}
.w3d-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:700}
.w3d[data-sys="compare"] .w3d-top{display:none}

.w3d-zoom{position:absolute;z-index:3;left:14px;bottom:14px;display:flex;flex-direction:column;gap:6px}
.w3d-zoom button{width:40px;height:40px;border-radius:12px;background:rgba(20,18,16,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(246,242,234,.12);display:grid;place-items:center;color:var(--paper);transition:background .3s}
.w3d-zoom button:hover{background:rgba(198,164,106,.9);color:var(--ink)}
.w3d-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.w3d-open{position:absolute;z-index:3;right:14px;bottom:14px;height:40px;padding:0 18px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.4);display:none}
.w3d.is-slide[data-view="model"] .w3d-open{display:block}
.w3d-hint{position:absolute;z-index:3;left:50%;bottom:20px;transform:translateX(-50%);font-size:12px;color:rgba(246,242,234,.8);background:rgba(20,18,16,.6);padding:6px 14px;border-radius:999px;pointer-events:none;white-space:nowrap;transition:opacity .6s}
.w3d-hint.off,.w3d.zoomed .w3d-hint{opacity:0}
.w3d.is-slide[data-view="model"] .w3d-hint{bottom:66px}

.w3d-load{position:absolute;inset:0;z-index:4;display:grid;place-items:center;align-content:center;gap:12px;color:rgba(246,242,234,.6);font-size:13px;background:#141210;transition:opacity .6s,visibility .6s}
.w3d-load i{width:30px;height:30px;border-radius:50%;border:2px solid rgba(246,242,234,.15);border-top-color:var(--gold);animation:spin 1s linear infinite}
.w3d.ready .w3d-load{opacity:0;visibility:hidden}
@keyframes spin{to{transform:rotate(360deg)}}

/* شرح الجزء المحدد */
.w3d-cap{position:absolute;z-index:3;right:14px;left:68px;bottom:14px;display:grid;grid-template-columns:26px 1fr;column-gap:10px;align-items:center;
  padding:10px 14px;border-radius:16px;background:rgba(20,18,16,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(198,164,106,.3);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .4s,transform .5s var(--ease)}
.w3d-cap.on{opacity:1;transform:none}
.w3d-cap i{grid-row:span 2;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--ink);font:700 12px/26px var(--en);font-style:normal;text-align:center}
.w3d-cap b{font-size:14px;color:var(--paper)}
.w3d-cap span{font-size:12.5px;color:rgba(246,242,234,.65);line-height:1.5}
.w3d.is-slide[data-view="model"] .w3d-cap{bottom:64px}

/* قائمة الأجزاء */
.win-parts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:20px 0 22px}
.windows .win-detail .win-parts li{padding:0}
.windows .win-detail .win-parts li::before{display:none}
.win-parts button{display:flex;gap:10px;align-items:center;width:100%;text-align:right;padding:7px 8px;border-radius:12px;transition:background .3s}
.win-parts button:hover,.win-parts button.on{background:rgba(246,242,234,.06)}
.win-parts i{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(198,164,106,.6);color:var(--gold);font:500 12px/24px var(--en);font-style:normal;text-align:center;transition:background .3s,color .3s}
.win-parts button.on i{background:var(--gold);color:var(--ink)}
.win-parts b{font-size:15px;font-weight:500;color:var(--paper)}
.win-parts span{font-size:13px;color:rgba(246,242,234,.55);line-height:1.6}
.win-colors{margin-bottom:24px}
.win-colors label{display:block;font-size:13px;color:rgba(246,242,234,.6);margin-bottom:10px}
.win-colors b{color:var(--paper);font-weight:500}
.win-sw{display:flex;gap:9px;flex-wrap:wrap}
.win-sw button{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(246,242,234,.2) inset;border:2px solid transparent;transition:transform .25s,border-color .25s}
.win-sw button[aria-pressed="true"]{border-color:var(--gold);transform:scale(1.12)}
.windows .win-detail{min-height:0}

@media (max-width:820px){
  .win-board.w3d{width:100%;aspect-ratio:auto;height:68svh;min-height:440px}
  .w3d-seg button{height:32px;padding:0 13px;font-size:12px}
  .win-parts{gap:2px;margin:12px 0}
  .win-parts button{padding:6px 4px}
  .win-parts b{font-size:14px}
  .w3d-cap{left:62px;right:10px;bottom:10px}
}
.w3d.ready.loading .w3d-load{opacity:1;visibility:visible;background:rgba(20,18,16,.55)}
.win-board.w3d{width:min(100%,calc((100svh - 120px) * .95))}
@media (min-width:1600px){.windows{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.win-board.w3d{width:min(100%,calc((100svh - 110px) * 1.05))}}
.w3d.no-model [data-view="model"]{display:none}