/* --- Component: Features Grid --- */
.camera-features {
    padding: 50px 0 20px;
    background: #f9f9f9;
    color: #333;
    font-family: 'Poppins', sans-serif;
}
.camera-features .container {
    
    margin: 0 auto;
    padding: 0 15px;
}
.feature-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.3s;
}
.img-wrap img {
    width: 100%;
    display: block;
    object-fit: cover;
}
.info { padding: 20px; }
.info h3 { font-size: 18px; margin-bottom: 10px; font-weight: bold; }
.info p { font-size: 14px; color: #666; line-height: 1.5; }

.row-top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}
.row-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.feature-card.mini .info h3 { font-size: 15px; }

@media (max-width: 992px) {
    .row-bottom { grid-template-columns: repeat(2, 1fr); }
    .row-top { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .row-top, .row-bottom { grid-template-columns: 1fr; }
}

/* --- Component: Pro Block Slider --- */
.pro-block-section { width: 100%; margin: 0 auto; background: #000; font-family: 'Poppins', sans-serif; overflow: hidden; }
.top-nav-bar { display: flex; background: #111; border-bottom: 1px solid #222; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.top-nav-bar::-webkit-scrollbar { display: none; }
.nav-btn { flex: 1; min-width: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; height: 35px; color: #666; font-size: 18px; font-weight: 550; cursor: pointer; white-space: normal; line-height: 1.2; position: relative; }
.nav-btn.active { color: #fff; background: #1a1a1a; }
.nav-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #ff3b30; }
.image-stage-wrapper { position: relative; width: 100%; aspect-ratio: 1446 / 600; overflow: hidden; }
.image-stage { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.image-stage::-webkit-scrollbar { display: none; }
.img-panel { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; }
.img-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 768px) {
    .nav-btn { flex: 0 0 35%; font-size: 12px; }
    .image-stage-wrapper { aspect-ratio: 4 / 3; }
}

/* --- Component: Specs Table --- */
.specs-section { background: #fff; padding: 20px 0px; font-family: 'Poppins', sans-serif; }
.specs-title { text-align: center; font-size: 30px; font-weight: 700; margin-bottom: 20px; }
.specs-container { display: flex; gap: 20px; margin: 0px; }
.specs-column { flex: 1; min-width: 0; }
.specs-table { width: 100%; border-collapse: separate; border-spacing: 0; box-shadow: 0 0 0 1px #d1d1d1; border-radius: 12px; background: #fff; overflow: hidden; }
.specs-table td { padding: 14px 20px; border-bottom: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; font-size: 16px; line-height: 1.5; }
.specs-table td:last-child { border-right: none; }
.specs-table tr:last-child td { border-bottom: none; }
@media (max-width: 992px) {
    .specs-container { flex-direction: column; gap: 20px; }
    .specs-title { font-size: 22px; }
}