/* Content Width and Margin Fixes */
/* Ensures comfortable reading width and proper spacing */

/* Main content containers */
.container,
.product-detail-page .container,
.products-section,
section {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* Hero sections */
.hero {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* Product content sections */
.product-content-sections,
.tab-content {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Text content - optimal reading width */
.content-text,
.content-section p,
.content-section ol,
.content-section ul {
    max-width: 900px !important;
    line-height: 1.8 !important;
}

/* Explore By Need - Fix header disappearing */
#productsSection {
    position: relative !important;
    z-index: 1 !important;
}

header {
    position: relative !important;
    z-index: 1000 !important;
}

/* Expand button container */
.expand-button-container {
    position: relative !important;
    z-index: 2 !important;
}

/* Products grid - proper spacing */
.products-grid {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
}

/* Category cards */
.categories-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* Product cards - comfortable spacing */
.product-card {
    margin-bottom: 20px !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .container,
    .product-detail-page .container,
    .products-section,
    section,
    .hero {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

@media (max-width: 768px) {
    .container,
    .product-detail-page .container,
    .products-section,
    section,
    .hero {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .content-text,
    .content-section p {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .container,
    .product-detail-page .container,
    .products-section,
    section,
    .hero {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


/* Ensure header stays visible */
body {
    position: relative !important;
}

/* Fix for "Show More" button not hiding header */
.view-more-container {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

/* Product detail page specific fixes */
.product-hero {
    max-width: 1400px !important;
    margin: 0 auto 40px auto !important;
    padding: 0 40px !important;
}

.product-tabs-nav {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
}

/* Related products section */
.related-products {
    max-width: 1400px !important;
    margin: 60px auto 0 auto !important;
    padding: 0 40px !important;
}

/* Breadcrumb */
.breadcrumb-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 15px 40px !important;
}

/* Search container */
.search-container {
    max-width: 800px !important;
    margin: 0 auto 30px auto !important;
}

/* Section titles */
.section-title,
h2 {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Consistent text formatting */
p {
    line-height: 1.7 !important;
    margin-bottom: 1em !important;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em !important;
    margin-bottom: 0.75em !important;
    line-height: 1.3 !important;
}

/* Lists */
ol, ul {
    margin-bottom: 1em !important;
    padding-left: 2em !important;
}

li {
    margin-bottom: 0.5em !important;
    line-height: 1.6 !important;
}

