/**
 * 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,
    .grid.grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* Product cards */
    .products-grid > a,
    .products-grid > div {
        width: 100% !important;
    }
    
    /* Product images */
    .products-grid img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        object-fit: contain !important;
    }
    
    /* Product text */
    .products-grid h3 {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
    
    .products-grid button {
        font-size: 0.75rem !important;
        padding: 0.5rem !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;
}

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */
.flex {
    display: flex !important;
}

.items-center {
    align-items: center !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* ============================================
   SPACING UTILITIES
   ============================================ */
.h-10 {
    height: 2.5rem !important;
}

.w-10 {
    width: 2.5rem !important;
}

.px-3 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* ============================================
   COLOR UTILITIES
   ============================================ */
.text-gray-600 {
    color: #4b5563 !important;
}

.hover\:bg-gray-50:hover {
    background-color: #f9fafb !important;
}

.text-\[\#064b67\] {
    color: #064b67 !important;
}

.border-\[\#064b67\] {
    border-color: #064b67 !important;
}

.bg-\[\#064b67\]\/20 {
    background-color: rgba(6, 75, 103, 0.2) !important;
}

/* ============================================
   ROUNDED UTILITIES
   ============================================ */
.rounded-md {
    border-radius: 0.375rem !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

/* ============================================
   TRANSITION UTILITIES
   ============================================ */
.transition-all {
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms !important;
}

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

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


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

/* Fix for cement.html and other category pages */
.md\:col-span-3 .grid {
    display: grid !important;
}

/* Mobile - 2 columns */
@media (max-width: 767px) {
    .md\:col-span-3 .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
}

/* Tablet - 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .md\:col-span-3 .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* Desktop - 4-5 columns */
@media (min-width: 1024px) {
    .md\:col-span-3 .grid.grid-cols-3 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (min-width: 1280px) {
    .md\:col-span-3 .grid.grid-cols-3 {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

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

/* Product card images - proper 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;
}

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

/* Mobile product card adjustments */
@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 span[class*="text-[#064B67]"] {
        font-size: 0.875rem !important;
    }
    
    .md\:col-span-3 .grid button {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================
   BREADCRUMB & HEADER SECTION FIX
   ============================================ */
@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;
    }
    
    .max-w-screen-2xl .flex.flex-col.md\:flex-row .text-sm {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   FILTER SIDEBAR FIX
   ============================================ */
@media (max-width: 767px) {
    .md\:col-span-1 {
        display: none !important;
    }
    
    .md\:col-span-3 {
        grid-column: span 1 !important;
    }
}

@media (min-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-4 {
        display: grid !important;
        grid-template-columns: 1fr 3fr !important;
        gap: 2rem !important;
    }
}

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

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

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

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