/* =========================================
   2. DESKTOP STYLES (Min-Width 769px)
   ========================================= */

@media (min-width: 769px) {
    /* Header Layout */
    header,footer, .wp-block-template-part{
        
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        max-width: none !important;

    }
	
	footer.wp-block-template-part,
footer .wp-block-group.is-layout-constrained {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
	
	footer .alignwide, 
footer .alignfull {
    width: 100% !important;
    max-width: 100% !important;
}
	
	
    body, .site-header {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
    }

 /* Best Sellers Heading */
    h3#best-sellers-6588b93b-febe-47eb-ad21-211bc6c2325a {
        padding-left: 60px !important;
    }
	

    /* Body Layout - Desktop Only */
    body {
        margin: auto !important;
        align-content: center !important;
    }

    .wc-block-product-template.wc-block-product-template {
        background: none;
        padding-right: 86px !important;
        padding-left: 86px !important;
    }

    /* Best Sellers Heading */
    .best-sellers-6588b93b-febe-47eb-ad21-211bc6c2325a {
        padding-left: 80px !important;
    }


    /* Quality Materials Section Padding */
    .wp-container-core-columns-is-layout-88db6036 {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }

    /* Text Column Padding */
    .wp-block-column.is-vertically-aligned-center.is-layout-flow.wp-block-column-is-layout-flow {
        padding-left: 32px !important;
        padding-right: 0px !important;
    }
    
    /* Specific Element Padding */
    .wp-elements-0ecb61d5ac449e88468d3f994e5692a6 {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}

/* Large Desktop Specifics */
@media (min-width: 992px) {
    .wp-block-columns {
        overflow: visible;
    }


}

/* =========================================
   3. MOBILE STYLES (Max-Width 768px)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Remove Desktop Body Margin */
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden; /* Prevents side scrolling */
    }

    /* 2. Full Width Blocks */
    .wp-site-blocks .alignfull,
    .wp-site-blocks > .wp-block-group.has-background,
    .wp-site-blocks > .wp-block-cover,
    .is-root-container .wp-block[data-align="full"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 3. Constrained Items - Tighter spacing */
    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    /* 4. Tighter Container Padding (Reduced from 12px) */
    .wp-container-core-group-is-layout-0aa85f17,
    .wp-container-core-group-is-layout-2136cc8f,
    .wp-block-group,
    .wp-block-gallery {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }



    header figure {
        margin-right: 4px;
        margin-left: 4px;
    }

    header .wp-block-site-logo img {
        max-width: 160px !important; /* Slightly smaller logo to save space */
        height: auto;
    }
	
.wp-block-template-part {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        max-width: none !important;
    }
	
    /* Navigation styling */
    header nav {
        display: flex !important;
        justify-content: center !important; /* Fixed syntax error */
    }

    header nav a {
        color: black !important;
        text-decoration: none;
        display: inline-block;
        margin: 0 6px !important;
        font-size: 14px !important;
    }

    /* 6. Footer Layout */
    footer.wp-block-template-part {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    /* 7. Column & Layout Fixes */
    .wp-block-columns {
        padding-right: 0px !important;
        padding-left: 0px !important;
        gap: 0px !important; /* Remove gap between columns */
    }

    .wp-block-column {
        padding-right: 8px !important;
        padding-left: 8px !important;
        margin-bottom: 0px !important;
    }

    /* Stacking columns on mobile */
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        padding: 8px 8px !important; /* Reduced from 10px */
    }

    /* 8. CRITICAL FIX: Pullquote Height */
    /* Changed height from 100vh to auto to stop huge vertical gaps */
    .wp-block-pullquote {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        height: auto !important; 
        min-height: auto !important;
        padding: 8px 8px !important; /* Add some breathing room top/bottom, tight sides */
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Fix padding override */
    [style*="padding-left:64px"] { padding-left: 8px !important; }
    [style*="padding-right:64px"] { padding-right: 8px !important; }

    /* Button adjustments */
    .wp-block-buttons.is-layout-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 8px; /* Control space between stacked buttons */
    }
    
    .wp-block-button.has-custom-width,
    .wp-block-button__link {
        width: 100% !important;
        display: block;
        text-align: center;
        margin-bottom: 0 !important;
    }
    
    .has-text-align-center {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    
    /* Specific element padding */
    p.wp-elements-0ecb61d5ac449e88468d3f994e5692a6,
    .my-mobile-quote {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}