/* ========================================
   ZEBRONICS-STYLE DESIGN - UPDATED VERSION 2
   Professional e-commerce UI implementation
   ======================================== */

/* DEBUG: Force uniform styling */
#tab-1, #tab-2, #tab-3 {
    background: transparent !important;
}

/* ========================================
   CSS VARIABLES - Zebronics Style
   ======================================== */

:root {
    --text-primary: 39, 39, 39;
    --bg-white: 255, 255, 255;
    --badge-blue: 60, 97, 158;
    --badge-red: 227, 79, 79;
    --accent-yellow: 249, 168, 37;
    --shadow: 0 5px 15px rgb(39 39 39 / 0.1);
    --rounded: 10px;
    --spacing-base: 20px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
}

/* ========================================
   SECTION CONTAINER - Full Width
   ======================================== */

.container-fluid.product {
    background: #f8f9fa !important;
    padding: 60px 0 !important;
}

.container-fluid.product .container {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 80px !important;
    padding-right: 80px !important;
}

.product-section {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 80px !important;
}

/* Section title spacing */
.product-section h2,
.product-section h3 {
    margin-bottom: 40px !important;
    padding: 0 !important;
}

/* ========================================
   GRID LAYOUT - Zebronics 5 Column Style
   ======================================== */

.product-section .row.g-4 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(320px, 1fr) !important;
    gap: 32px !important;
    row-gap: 32px !important;
    column-gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Hide scrollbar - Zebronics style */
.product-section .row.g-4::-webkit-scrollbar {
    display: none !important;
}

.product-section .row.g-4 {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}

/* Remove Bootstrap column padding */
.product-section .row.g-4 > *,
.product-section .row.g-4 > [class*="col-"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* ========================================
   PRODUCT CARD - Zebronics Clean Style
   ======================================== */

.product-section .product-item,
#tab-1 .product-item,
#tab-2 .product-item,
#tab-3 .product-item {
    background: rgb(var(--bg-white)) !important;
    border: none !important;
    border-radius: var(--rounded) !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow) !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 560px !important;
}

.product-section .product-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgb(39 39 39 / 0.15) !important;
}

.product-section .product-item.mb-4 {
    margin-bottom: 0 !important;
}

.product-section .product-item .product-item-inner {
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ========================================
   IMAGE CONTAINER - Zebronics Style
   ======================================== */

.product-section .product-item .product-item-inner .product-item-inner-item,
#tab-1 .product-item .product-item-inner .product-item-inner-item,
#tab-2 .product-item .product-item-inner .product-item-inner-item,
#tab-3 .product-item .product-item-inner .product-item-inner-item {
    position: relative !important;
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 48px !important;
    margin: 0 !important;
}

.product-section .product-item .product-item-inner .product-item-inner-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-section .product-item:hover .product-item-inner .product-item-inner-item img {
    transform: scale(1.05) !important;
}

/* Force image display */
.product-section .product-item .product-item-inner .product-item-inner-item img.img-fluid,
.product-section .product-item .product-item-inner .product-item-inner-item img.w-100,
.product-section .product-item .product-item-inner .product-item-inner-item img.rounded-top {
    width: 100% !important;
    height: 100% !important;
}

/* ========================================
   BADGE - Zebronics Style
   ======================================== */

.product-section .product-item .product-item-inner .product-item-inner-item .product-new,
.product-section .product-item .product-item-inner .product-item-inner-item .product-sale {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    padding: 6px 12px !important;
    background: rgb(var(--badge-red)) !important;
    color: rgb(var(--bg-white)) !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgb(227 79 79 / 0.3) !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

.product-section .product-item .product-item-inner .product-item-inner-item .product-new {
    background: rgb(var(--badge-blue)) !important;
    box-shadow: 0 2px 8px rgb(60 97 158 / 0.3) !important;
}

/* ========================================
   CONTENT AREA - Zebronics Left-Aligned
   ======================================== */

.product-section .product-item .text-center {
    padding: 32px !important;
    background: rgb(var(--bg-white)) !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 180px !important;
}

/* Override Bootstrap padding classes */
.product-section .product-item .text-center.p-4,
.product-section .product-item .text-center.rounded-bottom,
#tab-1 .product-item .text-center,
#tab-2 .product-item .text-center,
#tab-3 .product-item .text-center {
    padding: 32px !important;
}

/* Category - Above Title */
.product-section .product-item .text-center > a:first-child {
    font-size: 12px !important;
    color: rgb(var(--text-primary)) !important;
    opacity: 0.7 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.5px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.product-section .product-item .text-center > a:first-child:hover {
    opacity: 1 !important;
    color: rgb(var(--badge-blue)) !important;
}

/* Title - Bold Zebronics Style */
.product-section .product-item .text-center .h4,
.product-section .product-item .text-center h4,
.product-section .product-item .text-center .h4 a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgb(var(--text-primary)) !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    order: 2 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.product-section .product-item .text-center .h4 a {
    color: inherit !important;
}

.product-section .product-item .text-center .h4:hover,
.product-section .product-item .text-center .h4 a:hover {
    color: rgb(var(--badge-blue)) !important;
}

/* Price - Zebronics Style with "Sale price" */
.product-section .product-item .text-center .product-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: rgb(var(--text-primary)) !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    order: 3 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.product-section .product-item .text-center .product-price::before {
    content: '₹ ' !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-right: 2px !important;
}

/* Specifications - Feature List Style */
.product-section .product-item .text-center .text-primary,
.product-section .product-item .text-center .product-specs,
.product-section .product-item .text-center .fs-5 {
    font-size: 14px !important;
    color: rgb(var(--text-primary)) !important;
    opacity: 0.75 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    order: 4 !important;
    max-height: 46px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-align: left !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Hide deleted price if not needed */
.product-section .product-item .text-center del {
    display: none !important;
}

/* ========================================
   REMOVE BOOTSTRAP OVERRIDES
   ======================================== */

.product-section .product-item .border {
    border: none !important;
}

.product-section .product-item .rounded,
.product-section .product-item .rounded-top,
.product-section .product-item .rounded-bottom {
    border-radius: 0 !important;
}

.product-section .product-item * {
    box-sizing: border-box !important;
}

/* ========================================
   SECTION TITLE - Zebronics Style
   ======================================== */

.product-section h2,
.product-section h3 {
    color: rgb(var(--text-primary)) !important;
    font-weight: 700 !important;
    margin-bottom: 32px !important;
    padding: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ========================================
   RESPONSIVE DESIGN - Zebronics Breakpoints
   ======================================== */

/* Large Desktop - Horizontal Scroll */
@media (min-width: 1400px) {
    .product-section .row.g-4 {
        grid-auto-columns: minmax(360px, 1fr) !important;
        gap: 32px !important;
        column-gap: 32px !important;
    }

    .container-fluid.product .container {
        padding-left: 100px !important;
        padding-right: 100px !important;
    }

    .product-section .product-item .product-item-inner .product-item-inner-item {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
        padding: 44px !important;
    }

    .product-section .product-item {
        min-height: 540px !important;
    }

    .product-section .product-item .text-center,
    .product-section .product-item .text-center.p-4 {
        padding: 30px !important;
    }
}

/* Desktop - Horizontal Scroll */
@media (min-width: 1000px) and (max-width: 1399px) {
    .product-section .row.g-4 {
        grid-auto-columns: minmax(340px, 1fr) !important;
        gap: 32px !important;
        column-gap: 32px !important;
    }

    .container-fluid.product .container {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }

    .product-section .product-item .product-item-inner .product-item-inner-item {
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
        padding: 44px !important;
    }

    .product-section .product-item {
        min-height: 540px !important;
    }

    .product-section .product-item .text-center,
    .product-section .product-item .text-center.p-4 {
        padding: 30px !important;
    }
}

/* Tablet - Horizontal Scroll */
@media (min-width: 700px) and (max-width: 999px) {
    .product-section .row.g-4 {
        grid-auto-columns: minmax(280px, 1fr) !important;
        gap: 24px !important;
        column-gap: 24px !important;
    }

    .container-fluid.product .container {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }

    .product-section .product-item .product-item-inner .product-item-inner-item {
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
        padding: 32px !important;
    }

    .product-section .product-item .text-center,
    .product-section .product-item .text-center.p-4 {
        padding: 24px !important;
    }
}

/* Mobile - Horizontal Scroll */
@media (max-width: 699px) {
    .product-section .row.g-4 {
        grid-auto-columns: minmax(240px, 1fr) !important;
        gap: 20px !important;
        column-gap: 20px !important;
    }

    .container-fluid.product .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .product-section .product-item .product-item-inner .product-item-inner-item {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
        padding: 24px !important;
    }

    .product-section .product-item .text-center,
    .product-section .product-item .text-center.p-4 {
        padding: 20px !important;
    }

    .product-section .product-item .text-center .h4 {
        font-size: 14px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }

    .product-section .product-item .text-center > a:first-child {
        font-size: 11px !important;
    }

    .product-section .product-item .text-center .text-primary,
    .product-section .product-item .text-center .fs-5 {
        font-size: 12px !important;
    }

    .product-section .product-item .product-item-inner .product-item-inner-item .product-new,
    .product-section .product-item .product-item-inner .product-item-inner-item .product-sale {
        font-size: 10px !important;
        padding: 5px 10px !important;
        top: 10px !important;
        left: 10px !important;
    }
}

/* ========================================
   ZEBRONICS DESIGN SPECIFICATIONS
   ======================================== */

/*
ZEBRONICS-INSPIRED DESIGN:

Desktop (1400px+):
- Grid: 5 cards per row (Zebronics style)
- Image: 280px height
- Card Gap: 32px row, 24px column
- Container: Max 1600px, 80px padding
- Shadow: 0 5px 15px with 0.1 opacity
- Border radius: 10px
- Font: Inter family

Desktop (1000-1399px):
- Grid: 4 cards per row
- Image: 280px height
- Container: 48px padding

Tablet (700-999px):
- Grid: 3 cards per row
- Image: 240px height
- Container: 32px padding

Mobile (<700px):
- Grid: 2 cards per row
- Image: 180px height
- Container: 20px padding

Design Features:
1. Clean white cards with subtle shadow
2. Left-aligned text (Zebronics style)
3. Small rectangular badges (not circles)
4. "Sale price" label before price
5. Category in uppercase above title
6. Feature list below title
7. Smooth hover effects
8. Professional Inter font family
9. Minimalist approach
10. 10px border radius

Colors:
- Text: rgb(39, 39, 39)
- Background: White
- Badge Blue: rgb(60, 97, 158)
- Badge Red: rgb(227, 79, 79)

All cards now match Zebronics professional design!
*/

/* ========================================
   BANNER TO PRODUCT LIST UNIFIED DESIGN - WOW.JS STYLE
   ======================================== */

/* Visual connection between banner and product list */
.container-fluid.pb-5 {
    padding-bottom: 0 !important;
    position: relative;
    z-index: 2;
}

.productList.overflow-hidden {
    margin-top: -20px;
    padding-top: 40px !important;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 50%);
    position: relative;
    z-index: 1;
}

/* Custom WOW.js animation - slideInDown (banner slides down from top) */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    animation-name: slideInDown;
}

/* Custom WOW.js animation - slideInUp (product list slides up from bottom) */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    animation-name: slideInUp;
}

/* Connecting line effect */
.container-fluid.pb-5::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 40px;
    background: linear-gradient(to bottom, var(--bs-primary), transparent);
    opacity: 0;
    animation: fadeIn 0.6s ease-out 0.8s forwards;
    z-index: 3;
}

/* Banner hover effects */
.container-fluid.pb-5 .bg-primary.rounded {
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.container-fluid.pb-5 .bg-primary.rounded:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}