/* === Carousel === */
.carousel { position: relative; width: 100%; overflow: hidden; background: transparent; }
.carousel-container { display: flex; transition: transform 0.5s ease; touch-action: pan-y; }
.carousel-slide {
    flex: 0 0 100%;
    aspect-ratio: 3 / 1;
    max-height: 550px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-user-drag: none;
}
.carousel-slide[href="#"] { cursor: default; pointer-events: none; }
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 14px;
    z-index: 5;
    pointer-events: none;
}
.dot {
    width: 15px;
    height: 15px;
    background: rgba(200,200,200,0.8);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dot.active { background: #1a5f9e; transform: scale(1.2); box-shadow: 0 2px 6px rgba(26,95,158,0.4); }

/* === Index-specific sections === */
.section-padding { padding: 60px 0; }
.badge-new { background: #10b981; color: white; font-size: 10px; padding: 2px 8px; border-radius: 20px; margin-left: 6px; white-space: nowrap; }

/* Index page product title uses lighter weight */
.product-info h3 { font-weight: 400; }
.product-info h3 a { transition: 0.2s; }
.product-info h3 a:hover { color: #1a5f9e; }

/* === Footer (index-specific) === */
.main-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-bottom: 8px; }
.main-links a { color: #cbd5e6; text-decoration: none; font-weight: 500; font-size: 14px; }
.main-links a:hover { color: white; }
.copyright { margin-bottom: 8px; font-size: 13px; }
.friend-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.friend-links a { color: #94a3b8; text-decoration: none; font-size: 13px; }
.friend-links a:hover { color: white; }

/* === Responsive - index-specific === */
@media (max-width: 768px) {
    .product-info { padding: 12px; }
    .product-desc { font-size: 0.75rem; }
    .section-padding { padding: 28px 0; }
    .carousel-slide { aspect-ratio: 3 / 1; max-height: none; }
    .dot { width: 13px; height: 13px; }
    .lang-nav-link { font-size: 12px; padding: 6px 12px; }
}
@media (max-width: 480px) {
    .product-info h3 { font-size: 0.8rem; }
    .badge-new { font-size: 8px; }
    .dot { width: 12px; height: 12px; }
}