/* GUMBIT EPDM Compare — scoped */
#gb-epdm-compare, #gb-epdm-compare *{box-sizing:border-box}

#gb-epdm-compare{
  --bg:#191A1E;
  --line:rgba(255,255,255,.14);
  --text:#fff;
  --muted:rgba(255,255,255,.7);
  --accent:#8FCD09;
  --sun:#efb40d;

  max-width:1100px;
  margin:0 auto;
  padding:16px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
}

#gb-epdm-compare .gb-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

#gb-epdm-compare .gb-head{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
#gb-epdm-compare .gb-head h2{margin:0;font-size:22px}
#gb-epdm-compare .gb-head p{margin:6px 0 0;font-size:13px;color:var(--muted)}

#gb-epdm-compare .gb-body{padding:16px 18px}

#gb-epdm-compare .ba-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  user-select:none;
  touch-action:pan-y;
}

#gb-epdm-compare .ba-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}

#gb-epdm-compare .ba-before{
  clip-path:inset(0 50% 0 0);
  will-change:clip-path;
}

#gb-epdm-compare .ba-divider{
  position:absolute;
  top:0;bottom:0;
  left:50%;
  pointer-events:none;
  z-index:2;
}
#gb-epdm-compare .ba-divider::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:-1px;
  width:2px;
  background:var(--accent);
}

#gb-epdm-compare .ba-handle{
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-50%,-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(47,45,56,.92);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  z-index:3;
}

#gb-epdm-compare .ba-sun{
  width:26px;
  height:26px;
  color:var(--sun);
  transform:scale(1.2);
  transform-origin:50% 50%;
  filter:drop-shadow(0 0 6px rgba(239,180,13,.45));
}

#gb-epdm-compare .ba-sun-uv{
  font:800 6.5px/1 system-ui;
  fill:rgba(0,0,0,.75);
  letter-spacing:.4px;
}

@media (prefers-reduced-motion:no-preference){
  #gb-epdm-compare .ba-sun-rays{
    transform-origin:12px 12px;
    animation:gbSunSpin 6s linear infinite;
  }
  @keyframes gbSunSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
}

#gb-epdm-compare .ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
}

@media(max-width:640px){
  #gb-epdm-compare .ba-stage{aspect-ratio:4/3}
}