/**
 * RESPONSIVE CSS - Mobile-First Design Fixes
 * Framework: Tailwind CSS Breakpoints
 * sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
 */

/* ============================================
   GLOBAL RESPONSIVE UTILITIES
   ============================================ */

/* Ensure proper box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Responsive container padding */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ============================================
   TOUCH TARGET IMPROVEMENTS
   ============================================ */

/* Minimum 44x44px touch targets for all interactive elements */
@media (max-width: 1024px) {
    /* Larger checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
        width: 24px;
        height: 24px;
    }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
/* Mobile search - move outside collapsed menu */
@media (max-width: 1023px) {
    /* Ensure hamburger menu is proper size */
    .mobile-menu-button,
    #nav-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
    }

    /* Mobile navigation overlay */
    .mobile-nav {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Dropdown touch areas */
    .nav-dropdown-trigger {
        padding: 1rem !important;
        min-height: 48px;
    }

    /* Make top bar links stack better */
    .top-bar-links {
        font-size: 0.75rem;
        gap: 0.5rem;
    }
}

/* Tablet header adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .header-container {
        padding: 0.75rem 1.5rem;
    }

    .logo img {
        max-height: 40px;
    }
}

/* Mobile header */
@media (max-width: 767px) {
    .header-container {
        padding: 0.5rem 1rem;
    }

    .logo img {
        max-height: 36px;
    }

    /* Hide less important header elements on small screens */
    .header-extras {
        display: none !important;
    }
}

/* My custom css start */
.flex.justify-between.items-center.my-10.flex-wrap.gap-4 {
    display: contents;
    font-size: 14px;
}

div#product-slider {
    position: relative;
    top: 30px;
}

a#view-all-link {
    position: relative;
    top: 0px;
}
/* My custom css end */