/* ============================= */
/* SAFE MOBILE FIX - DNH V2 */
/* ============================= */

@media (max-width: 768px) {

    /* General Spacing */
    section {
        padding: 40px 15px !important;
    }

    .container {
        width: 100% !important;
        padding: 0 15px !important;
    }

    /* Headings */
    h1 {
        font-size: 24px !important;
        line-height: 1.3;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    p {
        font-size: 14px !important;
    }

    /* Buttons */
    .btn,
    button {
        padding: 10px 15px !important;
        font-size: 14px !important;
        height: auto !important;
    }

    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Product Grid */
   
    .product-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Category Grid */
    .categories-grid,
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Forms */
    input,
    select,
    textarea {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Cart Table */
    table {
        font-size: 12px !important;
    }

}
@media (max-width: 768px) {

    .logo img {
        max-height: 40px !important;
        width: auto !important;
    }

    header {
        padding: 10px 15px !important;
        position: sticky;
        top: 0;

    }

}
@media (max-width: 768px) {

    header {
        min-height: auto !important;
    }

}
/* ============================= */
/* MOBILE HEADER FIX - SAFE */
/* ============================= */

@media (max-width: 768px) {

    /* Slim Header */
    .main-header {
        height: 60px !important;
        padding: 0 !important;
    }

    .header-flex {
        height: 60px !important;
    }

    .logo img {
        height: 35px !important;
    }

}
@media (max-width: 768px) {

    #navMenu {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #01780F;
        padding: 20px 0;

        display: none;   /* hide by default */
    }

    #navMenu.active {
        display: block;  /* show when clicked */
    }

}
@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }
}
/* ============================= */
/* CONTACT PAGE MOBILE FIX */
/* ============================= */

@media (max-width: 768px) {

    .contact-info {
        padding: 40px 15px !important;
    }

    .info-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Stack cards */
        gap: 20px !important;
    }

    .info-card {
        padding: 25px 20px !important;
        text-align: center !important;
    }

    .info-card i {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }

    .info-card h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .info-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        word-break: break-word;
    }

}
/* ============================= */
/* PRODUCT GRID MOBILE POLISH */
/* ============================= */

@media (max-width: 768px) {

    .product-card img {
        height: 160px !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

}
@media (max-width: 768px) {

    .product-card h3 {
        font-size: 15px !important;
        margin: 10px 0 5px !important;
        line-height: 1.3 !important;
    }

    .product-card .price {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-bottom: 10px !important;
    }

}
@media (max-width: 768px) {

    .weight-options {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
        justify-content: center !important;
    }

    .weight-options button {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
    }

}
@media (max-width: 768px) {

    .product-actions {
        display: flex !important;
        gap: 8px !important;
    }

    .product-actions button,
    .product-actions .btn {
        flex: 1;
        font-size: 13px !important;
        padding: 8px !important;
        border-radius: 8px !important;
    }

}