body{
  margin:0;
  font-family:Segoe UI,Roboto,sans-serif;
  background:#0f1115;
  color:#eaeaea
}
a{text-decoration:none;color:inherit}

.container{
  max-width: 950px;
  
  padding:10px 20px
}

/* === GALLERY SIDE === */
.review-gallery-side{
  display:block;
  grid-template-columns:1fr 220px;
  gap:20px;
  margin-bottom:40px;
max-width: 950px;
}

.main-image-side{
  position:relative;
}
.main-image-side img{
  width:100%;
  border-radius:4px
}

/* Thumbnail column */
.thumb-column-wrap{
  position:relative;
}

.thumb-column{
  display:flex;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  height:100%;
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:thin;
}

.thumb-column img{
  width:100%;
  cursor:pointer;
  border-radius:10px;
  opacity:.75
}
.thumb-column img.active-thumb{
  opacity:1;
  outline:2px solid #ff3c38
}

/* WebKit scrollbar */
.thumb-column::-webkit-scrollbar{
  width:6px;
}
.thumb-column::-webkit-scrollbar-thumb{
  background:#2a2f40;
  border-radius:10px;
}
.thumb-column::-webkit-scrollbar-track{
  background:transparent;
}

/* Fade at top */
.thumb-column-wrap::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:30px;
  pointer-events:none;
  background:linear-gradient(to bottom,#0f1115,transparent);
  z-index:2;
}

/* === VIDEO HEIGHT LOGIC === */
body.no-video .thumb-column-wrap{
  height:120px;
}
body.has-video .thumb-column-wrap{
  height:120px;
}



@media (min-width:1600px){
  body.no-video .thumb-column-wrap{ height:680px; }
  body.has-video .thumb-column-wrap{ height:580px; }
}

@media (max-width:1024px){
  body.no-video .thumb-column-wrap{ height:470px; }
  body.has-video .thumb-column-wrap{ height:400px; }
}
@media (min-width:2500px){
  body.no-video .thumb-column-wrap{ height:470px; }
  body.has-video .thumb-column-wrap{ height:400px; }
}
/* === SPECS === */
.spec-box{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:40px 0
}
.spec-item{
  background:#151822;
  padding:14px 16px;
  border-radius:14px;
  font-size:14px
}

/* === CONTENT === */
.review-content{
  max-width:900px
}
.rev-section-title{
  font-size:26px;
  margin:50px 0 16px
}
.rev-paragraph{
  font-size:17px;
  line-height:1.7;
  color:#ddd
}

.overview-flex{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:24px;
  align-items:flex-start
}
.overview-img{
  width:100%;
  border-radius:16px
}

.para-images{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0
}
.para-images img{
  width:220px;
  border-radius:12px;
  cursor:pointer
}

/* === IMAGE MODAL === */
.img-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  z-index:9999;
  justify-content:center;
  align-items:center
}
.img-modal img{
  max-width:90%;
  max-height:90%;
  border-radius:12px
}
.img-modal span{
  position:absolute;
  top:20px;
  right:30px;
  font-size:40px;
  cursor:pointer
}

.img-modal-content{
  max-width:90%;
  max-height:90%;
  border-radius:12px;
  z-index:2;
}

/* === LOADER === */
.img-loader{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(2px);
  z-index:5
}

.spinner{
  width:42px;
  height:42px;
  border:4px solid rgba(255,255,255,.7);
  border-top-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite
}

@keyframes spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* === RESPONSIVE === */
@media(max-width:900px){
  .review-gallery-side{
    grid-template-columns:1fr
  }
  .overview-flex{
    grid-template-columns:1fr
  }
}