/* ========================================
   HERO SLIDER FINAL FIX - OVERRIDE ALL
   ========================================
   ไฟล์นี้โหลดทีหลังสุด เพื่อ override CSS ทั้งหมด
   แก้ปัญหาภาพล้นขอบบน-ล่าง
   ======================================== */

/* === HIDE CATEGORY SECTION === */
.category-section,
#category-section {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* === NUCLEAR FIX: WHITE BACKGROUND EVERYWHERE === */
.top-hero-row,
.hero-section,
.hero-section-wrapper,
#main-hero-slider,
.main-hero-slider-container,
#main-hero-slider.swiper,
.main-hero-slider-container.swiper,
#main-hero-slider .swiper,
.main-hero-slider-container .swiper,
#main-hero-slider .swiper-wrapper,
.main-hero-slider-container .swiper-wrapper,
#main-hero-slider .swiper-slide,
.main-hero-slider-container .swiper-slide {
    background: #fff !important;
    background-color: #fff !important;
}

/* === PARENT CONTAINERS - FULL WIDTH CENTERED === */
.top-hero-row,
.hero-section,
.hero-section-wrapper,
.full-width-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* === CONTAINER === */
#main-hero-slider,
.main-hero-slider-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    background-color: #fff !important;
}

/* MOBILE/TABLET: White background everywhere - NUCLEAR */
@media (max-width: 991px) {
    .top-hero-row,
    .hero-section,
    .hero-section-wrapper,
    #main-hero-slider,
    .main-hero-slider-container,
    #main-hero-slider.swiper,
    .main-hero-slider-container.swiper,
    #main-hero-slider .swiper,
    .main-hero-slider-container .swiper,
    #main-hero-slider .swiper-wrapper,
    .main-hero-slider-container .swiper-wrapper,
    #main-hero-slider .swiper-slide,
    .main-hero-slider-container .swiper-slide,
    #main-hero-slider .swiper-slide a,
    .main-hero-slider-container .swiper-slide a {
        background: #fff !important;
        background-color: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Hero section - no gap */
    .top-hero-row,
    .hero-section,
    .hero-section-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    
    /* Hero slider fills entire row */
    #main-hero-slider,
    .main-hero-slider-container {
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
    }
    
    /* Slides no padding - image fills completely */
    #main-hero-slider .swiper-slide,
    .main-hero-slider-container .swiper-slide {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }
    
    /* Images contain in slide */
    #main-hero-slider .swiper-slide img,
    .main-hero-slider-container .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Navigation arrows - centered vertically */
    #main-hero-slider .swiper-button-prev,
    #main-hero-slider .swiper-button-next,
    .main-hero-slider-container .swiper-button-prev,
    .main-hero-slider-container .swiper-button-next {
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 32px !important;
        height: 32px !important;
        background: rgba(255,255,255,0.85) !important;
        border-radius: 50% !important;
        color: #333 !important;
        z-index: 10 !important;
    }
    
    #main-hero-slider .swiper-button-prev::after,
    #main-hero-slider .swiper-button-next::after,
    .main-hero-slider-container .swiper-button-prev::after,
    .main-hero-slider-container .swiper-button-next::after {
        font-size: 14px !important;
    }
    
    #main-hero-slider .swiper-button-prev,
    .main-hero-slider-container .swiper-button-prev {
        left: 8px !important;
    }
    
    #main-hero-slider .swiper-button-next,
    .main-hero-slider-container .swiper-button-next {
        right: 8px !important;
    }
    
    /* Hide empty slides */
    #main-hero-slider .swiper-slide:empty,
    .main-hero-slider-container .swiper-slide:empty {
        display: none !important;
    }
}

/* === SLIDES - NO PADDING === */
#main-hero-slider .swiper-wrapper,
.main-hero-slider-container .swiper-wrapper {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

#main-hero-slider .swiper-slide,
.main-hero-slider-container .swiper-slide {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    background-color: #fff !important;
}

/* === IMAGES WITH CONTAIN === */
#main-hero-slider .swiper-slide img,
.main-hero-slider-container .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    background: #fff !important;
    background-color: #fff !important;
    border-radius: 0 !important;
}

/* === OVERRIDE ANY HOVER EFFECTS === */
#main-hero-slider .swiper-slide:hover img,
.main-hero-slider-container .swiper-slide:hover img {
    transform: none !important;
}

/* === LINK CONTAINERS === */
#main-hero-slider .swiper-slide a,
.main-hero-slider-container .swiper-slide a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    #main-hero-slider,
    .main-hero-slider-container {
        height: clamp(350px, 75vw, 700px) !important;
    }
    
    #main-hero-slider .swiper-slide,
    .main-hero-slider-container .swiper-slide {
        padding: 0 !important;
    }
}

@media (max-width: 992px) {
    #main-hero-slider,
    .main-hero-slider-container {
        height: auto !important;
    }
    
    #main-hero-slider .swiper-slide,
    .main-hero-slider-container .swiper-slide {
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    #main-hero-slider,
    .main-hero-slider-container {
        height: auto !important;
    }
    
    #main-hero-slider .swiper-slide,
    .main-hero-slider-container .swiper-slide {
        padding: 0 !important;
    }
}

@media (max-width: 480px) {
    #main-hero-slider,
    .main-hero-slider-container {
        height: auto !important;
    }
    
    #main-hero-slider .swiper-slide,
    .main-hero-slider-container .swiper-slide {
        padding: 0 !important;
    }
}

/* ========================================
   MOBILE LAYOUT FIX - PRODUCTS & ADS
   ======================================== */

/* === MOBILE: PRODUCT CARDS - 2 PER ROW (better appearance) === */
@media (max-width: 768px) {
    /* Product grids - 2 columns */
    .product-grid,
    .products-grid,
    .home-product-grid,
    .products-list,
    .best-selling-grid,
    .best-selling-clean-grid,
    [data-section-type] .product-grid,
    .homepage-section .product-grid,
    .section-content .product-grid,
    div[class*="product-grid"],
    div[id*="products-grid"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 8px !important;
    }
    
    /* Product cards fit in grid */
    .product-card,
    .product-card-new,
    .card.product-card,
    .best-selling-grid .card,
    .best-selling-clean-grid .product-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Compact product card content */
    .product-card .card-body,
    .product-card-new .card-body {
        padding: 6px !important;
    }
    
    .product-card .product-title,
    .product-card .card-title,
    .product-card-new .product-title {
        font-size: 11px !important;
        line-height: 1.2 !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .product-card .product-price,
    .product-card-new .product-price {
        font-size: 13px !important;
    }
}

/* === MOBILE: HORIZONTAL ADS/LOGO STRIP - 5 PER ROW === */
@media (max-width: 768px) {
    /* Logo strip / vendor logos - 5 columns */
    .logo-strip-section .vendor-logos-grid,
    .logo-strip-section .logo-strip-items-container,
    .vendor-logos-grid,
    .logo-strip-items-container,
    .vendor-support-container .row,
    .logo-strip-section .row {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 4px !important;
        padding: 4px !important;
        overflow: hidden !important;
    }
    
    /* Each logo/ad item */
    .logo-strip-item,
    .vendor-logo-item,
    .vendor-logos-grid > *,
    .logo-strip-items-container > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 2px !important;
    }
    
    .logo-strip-item img,
    .vendor-logo-item img,
    .vendor-logos-grid img {
        width: 100% !important;
        height: auto !important;
        max-height: 50px !important;
        object-fit: contain !important;
    }
}

/* === VERY SMALL MOBILE: 2 products per row === */
@media (max-width: 480px) {
    /* Products 2 per row */
    .product-grid,
    .products-grid,
    .home-product-grid,
    .products-list,
    .best-selling-grid,
    .best-selling-clean-grid,
    div[class*="product-grid"],
    div[id*="products-grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    
    /* Logos still 5 per row */
    .logo-strip-section .vendor-logos-grid,
    .vendor-logos-grid,
    .logo-strip-items-container {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 3px !important;
    }
    
    /* Card styling */
    .product-card .card-body,
    .product-card-new .card-body {
        padding: 6px !important;
    }
    
    .product-card .product-title,
    .product-card-new .product-title {
        font-size: 11px !important;
    }
    
    .product-card .product-price,
    .product-card-new .product-price {
        font-size: 13px !important;
    }
}

/* ========================================
   CRITICAL FIX: PRODUCT CARD - 4:3 COMPACT STYLE
   Uses actual class names from main-app-script.js template
   ======================================== */
@media (max-width: 768px) {
    /* ===== SWIPER WRAPPER - CRITICAL: align-items flex-start ===== */
    .homepage-section .swiper-wrapper,
    .section-content .swiper-wrapper,
    [data-section-type] .swiper-wrapper,
    .product-section .swiper-wrapper,
    .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important; /* CRITICAL: prevent stretch */
    }
    
    /* ===== SWIPER SLIDE - height auto ===== */
    .homepage-section .swiper-slide,
    .section-content .swiper-slide,
    [data-section-type] .swiper-slide,
    .product-section .swiper-slide,
    .swiper-slide {
        width: calc(50% - 8px) !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;
        height: auto !important;
        display: flex !important;
    }
    
    /* ===== PRODUCT CARD - ADVICE STYLE ===== */
    .product-card-new {
        width: 100% !important;
        background: #fff !important;
        border-radius: 12px !important;
        border: 1px solid #e0e0e0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ===== IMAGE CONTAINER - 1:1 SQUARE ===== */
    .product-image-container-new {
        width: 100% !important;
        height: 0 !important;
        padding-top: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        background: #fff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        flex-shrink: 0 !important;
    }
    
    /* ===== PRODUCT IMAGE - CENTER & FILL ===== */
    .product-image-new,
    .product-image-container-new img.card-img-top {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 85% !important;
        height: 85% !important;
        object-fit: contain !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    /* ===== BRAND LOGO - TOP RIGHT ===== */
    .brand-logo-badge-new {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        max-width: 50px !important;
        max-height: 25px !important;
        z-index: 20 !important;
        display: block !important;
    }
    
    /* ===== BADGES ===== */
    .product-badges-sidebar {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        z-index: 15 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    .right-badges-column {
        position: absolute !important;
        top: 35px !important;
        right: 8px !important;
        z-index: 15 !important;
    }
    .feature-badge {
        font-size: 9px !important;
        padding: 3px 6px !important;
        border-radius: 4px !important;
        font-weight: 600 !important;
    }
    
    /* ===== CARD BODY ===== */
    .card-body-new {
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
    }
    
    /* ===== BRAND NAME ===== */
    .brand-line-new {
        font-size: 11px !important;
        color: #0066cc !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        text-transform: uppercase !important;
    }
    
    /* ===== PRODUCT TITLE ===== */
    .product-title-new,
    .card-body-new .card-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        color: #222 !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        min-height: 35px !important;
    }
    
    /* ===== DESCRIPTION - HIDE ===== */
    .product-desc-new,
    .card-body-new .card-text {
        display: none !important;
    }
    
    /* ===== PRICE SECTION ===== */
    .price-section-new {
        margin-top: auto !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
    }
    
    .price-block {
        display: block !important;
    }
    
    .card-price-original {
        font-size: 12px !important;
        color: #999 !important;
        text-decoration: line-through !important;
        margin-bottom: 2px !important;
        display: block !important;
    }
    
    .price-col,
    .card-price,
    .card-price-online {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #000 !important;
        display: block !important;
    }
    
    /* ===== BUY BUTTON - ADVICE STYLE ===== */
    .buy-now-btn-new {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 12px 16px !important;
        background: linear-gradient(135deg, #00a8e8, #0077cc) !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 25px !important;
        text-decoration: none !important;
        border: none !important;
        box-shadow: 0 2px 6px rgba(0,119,204,0.3) !important;
        margin-top: auto !important;
    }
    
    /* ===== HIDE UNNECESSARY ===== */
    .meta-col,
    .meta-line,
    .view-count-footer,
    .stat-footer-new,
    .promo-strip-new {
        display: none !important;
    }
}