/* Global Fixes for Horizontal Overflow */

/* Base HTML and Body styles */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Ensure all elements respect their containers */
*,
*::before,
*::after {
    box-sizing: border-box;
    max-width: 100%;
}

/* Fix for images and media */
img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Grid and Flex container fixes */
.container,
.container-fluid,
.row,
.column,
.grid,
.flex-container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix for tables */
table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Ensure all pages have consistent overflow control */
body > * {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix for code blocks and preformatted text */
pre,
code {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
}

/* Fix for long words and URLs */
p, h1, h2, h3, h4, h5, h6, li, td, th, dt, dd, .text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure form elements don't cause overflow */
input,
textarea,
select,
button {
    max-width: 100%;
}

/* Fix for absolutely positioned elements */
.position-absolute,
.position-fixed,
.position-sticky {
    max-width: 100vw;
    left: 0;
    right: 0;
}

/* Additional safety for common layout components */
.section,
.main-content,
.content-wrapper,
.wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix for products grid */
.products-grid,
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Ensure the app container doesn't cause overflow */
#app,
.app-container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Fix for full-width sections */
.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Ensure the global player doesn't cause overflow */
.global-player {
    max-width: 100%;
    overflow: hidden;
}

/* Fix for modals and overlays */
.modal,
.overlay,
.popup {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix for sliders and carousels */
.slider,
.carousel {
    max-width: 100%;
    overflow: hidden;
}

/* Fix for navigation menus */
.nav,
.navbar,
.menu {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Fix for product cards */
.product-card {
    max-width: 100%;
    overflow: hidden;
}

/* Ensure footer doesn't cause overflow */
footer,
.site-footer {
    max-width: 100%;
    overflow: hidden;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        position: relative;
    }
    
    /* Ensure all containers are properly contained */
    .container,
    .container-fluid,
    .row,
    .col,
    [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Fix for mobile navigation */
    .mobile-nav,
    .hamburger-menu {
        max-width: 100vw;
    }
}

/* Print styles */
@media print {
    html, body {
        overflow-x: visible !important;
        width: 100%;
    }
    
    .no-print,
    .global-player,
    .site-header,
    .site-footer {
        display: none !important;
    }
}