/* --- Base Styles (apply to all devices, or as default mobile styles) --- */
/*
   This section would contain your global CSS rules that are common
   across all screen sizes, or act as the 'mobile-first' baseline.
   Properties defined here can be overridden by specific media queries.
*/
.navigation {
    display: grid;
    grid-template-columns: auto;
    margin: auto;
}

.navigation a {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #c1dfc3;
    color: #ff5206;
    font-size: 0.9rem;
}

.nav-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.nav-btns input {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: #c1dfc3;
    color: #ff5206;
    margin: auto;
    font-size: 0.7rem;
}

.search-box {
    width: 150px;
    background-color: #c1dfc3;
    color: #ff5206;
}

#te {
    width: 120px;
    font-size: 0.7rem;
}

.product-grid-3,
.product-grid-half,
.product-grid-2 {
    display: none; /* Hidden on all mobile breakpoints */
}

/* Base styles for new-p-heading and new-product-img span,
   as they are consistent across your mobile queries. */
.new-p-heading {
    display: inline-flex;
}

.new-product-img span {
    padding: 3px 3px;
    font-weight: 600;
    border-radius: 6px;
    font-size: 0.7rem;
    overflow: hidden;
}

#wwtt {
    font-size: 0.7rem;
}

#f-l-es img {
    height: 40px;
    object-fit: contain;
    object-position: center;
}

.column h6 {
    font-size: 0.7rem;
}
.column h4 {
    font-size: 0.8rem;
}
.column h5 {
    font-size: 0.7rem;
}
.column p {
    margin: 0;
    font-size: 0.7rem;
}

/* --- Mobile Styles (up to 768px) --- */
@media screen and (max-width: 768px) {
    /* Navigation specific adjustments */
    .navigation a,
    .nav-btns,
    .nav-btns input {
        grid-row: 1 / span 2; /* Consistent row span */
    }

    #main {
        overflow: hidden;
        grid-template-columns: 1fr;
        font-size: 1.7rem; /* Consider this a max font-size for larger tablets */
        padding: 50px; /* Adjust as needed, might be too much for smaller screens */
    }

    .main-text h1 {
        font-size: 1.9rem;
        color: #333333;
        font-weight: 800;
    }

    .main-text h1 font {
        background-color: #dcffde;
        padding: 2px 15px 2px 10px;
        border-radius: 20px;
    }

    .main-img input {
        width: 100%; /* Make it fluid */
        max-width: 350px; /* Limit max size */
        margin-left: auto; /* Center it */
        margin-right: auto;
        display: block; /* Ensure margin auto works */
        overflow: hidden;
    }

    .new-p-heading {
        font-size: 0.8rem;
    }

    .new-p-heading h3 {
        font-size: 0.8rem;
    }

    .new-product-box-wrapper {
        margin-top: 0;
        height: 300px;
        display: block;
    }

    .new-product-container {
        overflow: hidden;
        margin: 10px;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Consider 2 columns for smaller screen portions within this range */
        grid-gap: 0;
        font-size: 0.8rem;
    }

    .new-product-box {
        display: grid;
        max-width: 100%;
        width: 100%;
        height: 370px; /* May need to be 'auto' or a min-height for flexible content */
        margin-top: 0;
        border-radius: 5px;
        background-color: rgba(193, 223, 195, 0.1);
        padding: 1px;
    }

    .new-product-img {
        width: 100%;
        height: 200px;
        padding: 10px;
        display: flex;
        margin: auto;
        position: relative;
        overflow: hidden;
    }

    .new-product-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 5px 2px;
        margin-top: -120px; /* **Review this negative margin; it can cause overlap.** */
    }

    .footer-container {
        overflow: hidden;
        max-width: 750px; /* Applies to wider tablets */
        padding: 10px;
        width: 90%;
        font-size: 0.8rem;
        margin: 0 auto;
        padding: 50px 0;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footer-link-box strong {
        font-size: 1rem;
    }

    #content-wrapper .column #slider {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 500px; /* Max width for wider tablets */
        overflow: hidden;
        margin: 0 auto; /* Center the slider */
    }

    #content-wrapper .column #slider img {
        height: 50px;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .column #featured {
        justify-content: right; /* This property might not apply to a single column layout */
        margin-left: 5px; /* Adjust as needed */
        max-width: 550px;
        overflow: hidden;
    }

    #warant {
        font-size: 10rem; /* **This font size seems excessively large for mobile; please re-evaluate.** */
    }

    .btn-dark {
        display: flex;
        /* Removed grid-template-columns: 1fr; as it's not applicable here */
        margin-top: 10px;
        width: 100%;
        max-width: 150px; /* Keep a max width if desired */
        margin-left: auto; /* Center button */
        margin-right: auto;
    }
}

/* --- Mobile Styles (up to 425px) --- */
@media screen and (max-width: 425px) {
    .onef {
        display: grid;
    }

    #main {
        font-size: 1.1rem;
        padding: 15px;
    }

    .main-text h1 {
        font-size: 1.2rem;
    }

    .main-img input {
        max-width: 350px; /* Inherits width: 100% from 768px breakpoint */
    }

    .new-p-heading {
        font-size: 0.9rem;
    }

    .new-p-heading h3 {
        font-size: 0.8rem;
    }

    .new-product-box-wrapper {
        height: 270px;
    }

    .new-product-container {
        grid-template-columns: 1fr 1fr; /* Two columns for phone screens */
        padding: 0;
    }

    .new-product-box {
        height: 350px;
    }

    .new-product-img {
        height: 200px;
    }

    .footer-container {
        display: grid;
        grid-template-columns: auto; /* Stacks items vertically */
        grid-gap: 10px;
        max-width: 350px;
        padding: 50px 10px;
    }

    #content-wrapper .column #slider {
        max-width: 310px;
    }

    #content-wrapper .column .arrow {
        display: none; /* Hide arrows for smaller screens */
    }

    .column #featured {
        max-width: 390px;
    }

    .btn-dark {
        max-width: 300px;
    }
}

/* --- Mobile Styles (up to 375px) --- */
@media screen and (max-width: 375px) {
    #main {
        font-size: 1rem;
    }

    .main-text h1 {
        font-size: 1.2rem;
    }

    .main-text h1 font {
        font-size: 1.2rem;
    }

    .main-img input {
        max-width: 300px;
    }

    .new-p-heading {
        font-size: 1rem;
    }

    .new-p-heading h3 {
        font-size: 1.5rem;
    }

    .new-product-box-wrapper {
        height: 280px;
    }

    .new-product-img {
        height: 220px;
    }

    .footer-container {
        max-width: 100%; /* Allow full width with padding */
        padding: 50px 10px;
    }

    .footer-container strong {
        font-size: 0.9rem;
    }

    #content-wrapper .column #slider {
        max-width: 360px;
    }

    .column #featured {
        margin-left: 0; /* Remove left margin for better centering */
        max-width: 100%; /* Allow full width */
    }

    .btn-dark {
        max-width: 300px; /* Keep max width */
    }
}

/* --- Mobile Styles (up to 320px) --- */
@media screen and (max-width: 320px) {
    #main {
        font-size: 1.5rem; /* **This jump in font size from 1rem to 1.5rem on smallest screens needs review.** */
        padding: 10px; /* Reduce padding for very small screens */
    }

    .main-text h1 {
        font-size: 2rem; /* **This jump in font size from 1.2rem to 2rem on smallest screens needs review.** */
    }

    .main-img input {
        max-width: 250px;
    }

    .new-product-box-wrapper {
        height: 250px;
    }

    .new-product-box {
        height: 300px;
    }

    .footer-container {
        padding: 40px 10px;
    }

    #content-wrapper .column #slider {
        max-width: 300px;
    }
}