/* =========================================
   HOMEPAGE SPECIFIC STYLES
   ========================================= */

/* --- HERO SECTION --- */
.hero-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    height: 300px; /* Fixed height to match images */
}

.hero-left {
    flex: 2;
    border-radius: 8px;
    overflow: hidden;
}

.hero-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-banner {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- FLASH SALE SECTION --- */
.flash-sale-wrapper {
    margin-bottom: 30px;
}

.flash-sale-box {
    background: linear-gradient(to right, #ff9900, #ff5500);
    padding: 10px 15px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
}

.fs-title {
    font-size: 24px;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
}

.countdown {
    background: #fff;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
}

/* --- SECTION HEADERS (Suggestions, News) --- */
.section-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: #fff; 
    padding: 15px; 
    border-radius: 8px 8px 0 0; 
    border-bottom: 1px solid #eee; 
    margin-top: 20px;
}

.section-title { 
    font-size: 20px; 
    font-weight: 700; 
    color: #333; 
    text-transform: uppercase; 
}

/* --- PRODUCT GRID (HOMEPAGE) --- */
.product-grid-home { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px; 
    background: #fff; 
    padding: 10px; 
    border-radius: 0 0 8px 8px;
    border: 1px solid #eee;
    border-top: none;
}

.product-card { 
    border: 1px solid #eee; 
    padding: 10px; 
    border-radius: 8px; 
    transition: 0.3s; 
    background: #fff; 
    position: relative;
    display: block; /* Ensures anchor behaves like box */
}

.product-card:hover { 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    transform: translateY(-2px); 
    z-index: 2;
    border-color: #c92127; /* Highlight border on hover */
}

.pc-img { 
    width: 100%; 
    aspect-ratio: 1/1; 
    object-fit: contain; 
    margin-bottom: 10px; 
}

.pc-title { 
    font-size: 14px; 
    color: #333; 
    display: -webkit-box; 
    line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    height: 38px; /* Fixed height for 2 lines */
    margin-bottom: 5px; 
    line-height: 1.35;
}

.pc-price-group { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}

.pc-price-sale { 
    color: #d0021b; 
    font-weight: bold; 
    font-size: 16px; 
}

.pc-price-reg { 
    color: #888; 
    text-decoration: line-through; 
    font-size: 13px; 
}

.discount-badge { 
    position: absolute; 
    top: 5px; 
    left: 5px; 
    background: #d0021b; 
    color: #fff; 
    padding: 2px 6px; 
    border-radius: 3px; 
    font-size: 11px; 
    font-weight: bold; 
}

/* --- NEWS ITEMS --- */
.news-item {
    transition: transform 0.2s;
}

.news-item:hover {
    transform: translateY(-2px);
}

.news-item:hover h4 {
    color: #d0021b;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .product-grid-home { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
    .hero-section { flex-direction: column; height: auto; }
    .hero-left, .hero-right { width: 100%; height: auto; }
    .hero-banner { height: 150px; }
    
    .product-grid-home { grid-template-columns: repeat(2, 1fr); }
    
    .fs-title { font-size: 18px; }
    .section-title { font-size: 16px; }
}

/* =========================================
   MISSING SLIDER STYLES (ADD THIS BACK)
   ========================================= */

.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.slides-container {
    display: flex; /* Keeps slides side-by-side */
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%; /* Ensures each slide takes full width */
    height: 100%;
    flex-shrink: 0;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider Buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: 0.3s;
}
.slider-btn:hover { background-color: #d0021b; }
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

/* Slider Dots */
.slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}
.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}
.dot.active {
    background-color: #d0021b;
    transform: scale(1.2);
}