/**
 * COMPREHENSIVE FIXES FOR INDEX.HTML
 * Fixes cart button, pagination, carousel images, and mobile responsiveness
 */

/* ============================================
   CART BUTTON FIX
   ============================================ */
button[aria-label="Cart"],
.cart-button {
    display: flex !important;
    align-items: center !important;
    justify-center !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 1px solid #064b67 !important;
}

button[aria-label="Cart"]:hover {
    background-color: rgba(6, 75, 103, 0.2) !important;
}

button[aria-label="Cart"] svg {
    width: 24px !important;
    height: 24px !important;
}

/* Mobile cart button */
@media (max-width: 640px) {
    button[aria-label="Cart"] {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
    }
    
    button[aria-label="Cart"] span {
        display: none !important;
    }
}

/* Desktop cart button */
@media (min-width: 641px) {
    button[aria-label="Cart"] {
        padding: 0.5rem 0.75rem !important;
    }
}

/* ============================================
   PAGINATION BUTTONS FIX
   ============================================ */
.pagination button,
button[aria-label*="page"],
button[aria-label*="Page"] {
    padding: 0.25rem 0.75rem !important;
    color: #4b5563 !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

.pagination button:hover:not(:disabled),
button[aria-label*="page"]:hover:not(:disabled) {
    background-color: #f9fafb !important;
}

.pagination button:disabled,
button[aria-label*="page"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #f3f4f6 !important;
}

.pagination button.active,
button[aria-label*="page"].active {
    background-color: #064b67 !important;
    color: white !important;
    border-color: #064b67 !important;
}

/* Pagination container */
.pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin: 2rem 0 !important;
}

/* ============================================
   HERO CAROUSEL IMAGE FIX
   ============================================ */
.hero-container {
    position: relative !important;
    width: 100% !important;
    background: #f3f4f6 !important;
}

/* Ensure carousel container has height */
.hero-container > div {
    position: relative !important;
    width: 100% !important;
}

/* Desktop */
@media (min-width: 1024px) {
    .hero-container > div {
        height: 600px !important;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-container > div {
        height: 400px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hero-container > div {
        height: 240px !important;
    }
}

/* Fix the wrapper div that contains all slides */
.hero-container .relative > .absolute.inset-0:first-child {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* Carousel slides */
.hero-container .absolute.inset-0 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Carousel images */
.hero-container .absolute.inset-0 img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Ensure first slide is visible by default */
.hero-container .relative > .absolute.inset-0:first-child > a:first-child,
.hero-container .relative > .absolute.inset-0:first-child > div:first-child {
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* ============================================
   MOBILE RESPONSIVENESS FIXES
   ============================================ */
@media (max-width: 1023px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Container padding */
    .max-w-screen-4xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Logo size */
    nav img[alt*="Logo"],
    header img[alt*="Logo"] {
        height: 32px !important;
        max-height: 32px !important;
    }
    
    /* Hide desktop elements */
    .hidden.lg\:flex,
    .hidden.lg\:block,
    .hidden.md\:flex,
    .hidden.md\:block {
        display: none !important;
    }
    
    /* Show mobile elements */
    .lg\:hidden,
    .md\:hidden {
        display: flex !important;
    }
    
    /* Mobile buttons */
    button[aria-label="Open search"],
    button[aria-label="Toggle menu"] {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
    }
}

/* ============================================
   PRODUCT GRID MOBILE FIX
   ============================================ */
@media (max-width: 767px) {
    .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
}

/* ============================================
   TOUCH-FRIENDLY BUTTONS
   ============================================ */
@media (max-width: 1023px) {
    button, a.button, .btn {
        min-width: 44px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
    
    /* Add to cart buttons */
    button:contains("Add to cart"),
    button[class*="border-orange"] {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* ============================================
   NAVIGATION FIXES
   ============================================ */
@media (max-width: 1023px) {
    /* Top banner */
    nav .bg-\[\#FFBF00\] {
        padding: 0.5rem 1rem !important;
    }
    
    /* Navigation bar */
    nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        background: #f3f4f6 !important;
    }
    
    /* Search bar - hide on mobile */
    section[role="search"] {
        display: none !important;
    }
}

/* Desktop search */
@media (min-width: 1024px) {
    section[role="search"] {
        display: block !important;
    }
}

/* ============================================
   CATEGORY ICONS MOBILE
   ============================================ */
@media (max-width: 767px) {
    .grid.grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1rem !important;
    }
    
    .grid.grid-cols-4 img {
        width: 64px !important;
        height: 64px !important;
    }
    
    .grid.grid-cols-4 span {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   FOOTER MOBILE
   ============================================ */
@media (max-width: 767px) {
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.transition-opacity {
    transition-property: opacity !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

.duration-500 {
    transition-duration: 500ms !important;
}

.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}



/* ============================================
   CATEGORY PAGE PRODUCT GRID
   ============================================ */

/* Product card — always vertical flex */
.md\:col-span-3 .grid > a {
    display: flex !important;
    flex-direction: column !important;
}

/* Image aspect ratio */
.md\:col-span-3 .grid .aspect-square {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 100% !important;
    overflow: hidden !important;
}

.md\:col-span-3 .grid .aspect-square img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Card text section */
.md\:col-span-3 .grid .p-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

@media (max-width: 767px) {
    .md\:col-span-3 .grid .p-3 { padding: 0.5rem !important; }
    .md\:col-span-3 .grid h3 { font-size: 0.75rem !important; line-height: 1.2 !important; }
    .md\:col-span-3 .grid button { padding: 0.5rem 0.25rem !important; font-size: 0.75rem !important; }
}

/* ============================================
   BREADCRUMB & HEADER SECTION
   ============================================ */

@media (max-width: 767px) {
    .max-w-screen-2xl .flex.flex-col.md\:flex-row { padding: 1rem !important; }
    .max-w-screen-2xl .flex.flex-col.md\:flex-row h1 { font-size: 1.5rem !important; }
}

/* ============================================
   FILTER SIDEBAR — always beside products
   (layout is now inline flex on the HTML, so just ensure sidebar width)
   ============================================ */

[style*="flex:0 0 220px"] {
    flex: 0 0 220px !important;
    min-width: 0 !important;
}

[style*="flex:1"] {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Hide sidebar only on very small phones */
@media (max-width: 479px) {
    [style*="flex:0 0 220px"] {
        display: none !important;
    }
}

/* ============================================
   CATEGORY PAGE LAYOUT
   ============================================ */

.max-w-screen-2xl.mx-auto.px-4 {
    width: 100% !important;
    max-width: 1536px !important;
}

.grid.grid-cols-1.md\:grid-cols-4 { width: 100% !important; }

@media (max-width: 767px) {
    .max-w-screen-2xl.mx-auto.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ============================================
   HIDE ALL PRICES SITE-WIDE
   ============================================ */

span.text-\[#064B67\].font-medium.py-2,
.text-\[#064B67\].font-medium.py-2 {
    display: none !important;
}

.product-price,
.price-amount {
    display: none !important;
}

.flex.items-center.justify-between:empty {
    display: none !important;
}

/* ============================================
   PRODUCT LISTING CARDS — VERTICAL LAYOUT
   ============================================ */

/* Card div: vertical flex column, image on top, name + button below */
.rounded-md.border.border-blue-100 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #fff;
}

.rounded-md.border.border-blue-100 .relative.aspect-square,
.rounded-md.border.border-blue-100 .aspect-square {
    width: 100% !important;
    flex-shrink: 0 !important;
}

.rounded-md.border.border-blue-100 .p-3 {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
}

/* ============================================
   REQUEST QUOTATION BUTTON — GREEN, FULL WIDTH
   ============================================ */

.rounded-md.border.border-blue-100 a[href*="wa.me"],
.flex.flex-col.space-y-2 > a[href*="wa.me"] {
    display: block !important;
    width: 100% !important;
    background-color: #16a34a !important;
    color: #ffffff !important;
    border: 1px solid #16a34a !important;
    border-radius: 4px !important;
    padding: 7px 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 0.75rem !important;
}

.rounded-md.border.border-blue-100 a[href*="wa.me"]:hover,
.flex.flex-col.space-y-2 > a[href*="wa.me"]:hover {
    background-color: #15803d !important;
    color: #ffffff !important;
    text-decoration: none !important;
}


/* ============================================
   HOMEPAGE FEATURED PRODUCTS GRID FIX
   Forces left-to-right grid regardless of other rules
   ============================================ */

section.w-full.py-8 > div {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
}

@media (min-width: 640px) {
    section.w-full.py-8 > div {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    section.w-full.py-8 > div {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 1280px) {
    section.w-full.py-8 > div {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* Cards inside the grid must not stretch to full width */
section.w-full.py-8 > div > div {
    width: auto !important;
    min-width: 0 !important;
}