/** Shopify CDN: Minification failed

Line 133:15 Expected identifier but found whitespace
Line 133:16 Unexpected "100px"

**/
/* ======================================================= */
/* 1. CHART AND TABLE STYLING */
/* Fixes responsiveness, table cell size, and makes the first column sticky. */
/* ======================================================= */

.table-responsive-scroll {
    overflow-x: auto !important; 
    -webkit-overflow-scrolling: touch; 
}

.deficiency-chart td, 
.deficiency-chart th {
    min-width: 120px !important; 
    width: 120px !important;
    padding: 8px 8px;
}

/* STICKY COLUMN RULE */
.deficiency-chart th:first-child,
.deficiency-chart td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 10 !important; 
    background-color: #0F223F !important;
    color: white !important;
}

.nutrient-deficiency {
    border-spacing: 7px;
}

/* ======================================================= */
/* 2. BANNER HEIGHT & IMAGE CENTERING */
/* Defines custom theme settings and forces image centering/fit. */
/* ======================================================= */

/* Targets the 25% screen height option */
.object-wrapper.pt-one-quarter-screen-height {
    padding-top: 25vh !important;
    height: 25vh !important; 
    min-height: 180px !important;
    overflow: hidden !important; 
}

/* Targets the 300px fixed height option */
.object-wrapper.pt-300 {
    padding-top: 0 !important; 
    height: 300px !important;
    min-height: 300px !important; 
    overflow: hidden !important; 
}

/* Forces image to cover and center inside the custom heights */
#shopify-section-main-article .object-wrapper img {
    object-fit: cover !important;
    object-position: center !important; 
    height: 100% !important;
    width: 100% !important;
}

/* ======================================================= */
/* 3. BODY TITLE (H1) MOBILE SIZE ADJUSTMENT */
/* Ensures the sole H1 title is smaller on mobile screens. */
/* ======================================================= */

@media screen and (max-width: 768px) {
    /* Targets the Body Title (H1) for mobile size reduction */
    #shopify-section-main-article h1.heading-feature {
        /* This will override the 36px inline style on small screens */
        font-size: 28px !important; 
        margin-bottom: 20px !important;
    }
}

/* Custom styles for the prominent search bar in main-blog.liquid */
.site-search-wrapper {
    /* Ensures the search bar container is centered horizontally */
    display: flex;
    justify-content: center;
}

.site-search-wrapper .search-input {
    /* --- Base (Mobile) Styles --- */
    
    /* Forces border style and color (Black border for light background) */
    border: 1px solid #000000;
    
    /* Set Dimensions & Alignment */
    height: 40px; 
    text-align: center;
    font-size: 1.0rem; /* Mobile default size */

    /* Aesthetics */
    background-color: transparent; /* Inherits page background (light) */
    color: inherit; /* Text inherits page text color (dark/black) */
}

.site-search-wrapper .search-input::placeholder {
    /* Makes placeholder text visible and slightly transparent */
    color: inherit; 
    opacity: 0.7; 
}

/* --- Responsive Sizing Override (Desktop) --- */
@media screen and (min-width: 768px) {
    .site-search-wrapper .search-input {
        /* Bumps up text size for desktop visibility */
        font-size: 1.1rem; 
    }
}


/* Style for the blog post cards */
.card__surface {
    background-color: #000000 !important;
    border: none !important;

    
    /* Make the card a flex container to manage inner height/spacing */
    display: flex; 
    flex-direction: column;
}

/* Truncates the article excerpt text inside the card */
/*.card__surface .rte {
    /* Existing rules to hide overflow */
    max-height: 100px; /* Adjust this value to limit the visible height */
    overflow: hidden;

    /* --- ADD THE FADE-OUT EFFECT HERE --- */
    
    /* Standard property for modern browsers */
    /*mask-image: linear-gradient(to bottom, black 50%, transparent 100%);/
    
    /* Vendor prefix for wider compatibility (especially older Safari) */
    /*-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);/
}

/* --- RESPONSIVE SIZING OVERRIDE (DESKTOP) --- */
@media screen and (min-width: 768px) {
    /* Search Bar Font Size */
    .site-search-wrapper .search-input {
        font-size: 1.3rem !important;
    }

}
/* FIX: Prevents blog cards from expanding excessively on mobile screens */
.grid > li {
    /* Ensures the card itself never exceeds the width of its container */
    max-width: 100% !important;
    
    /* Explicitly allow the browser to shrink the card */
    min-width: 0 !important; 
    
    /* Ensure the card takes up only its assigned column space */
    width: auto !important; 
}

/* FIX: Removes default border and accent-color shadow/ring from cards on Search Results Page */
.template-search .card,
.template-search .card__surface {
    /* Removes the standard border */
    border: none !important;
    
    /* Removes any aggressive theme box-shadow (likely the green outline) */
    box-shadow: none !important; 
    
    /* Forces the black background (if it wasn't sticking) */
    background-color: #000000 !important;
}