/* style.css */
:root {
    /* Color Palette - Light Mode (Default) */
    --primary-color: #0056b3; /* Blue */
    --secondary-color: #ffffff; /* White */
    --accent-color: #e0f7ff; /* Light blue accent */
    --text-color: #333333; /* Dark Text */
    --text-color-light: #f8f9fa; /* Light Text */
    --link-hover-color: #003d80; /* Darker blue */
    --footer-bg-light: var(--primary-color); /* Footer BG Blue */
    --footer-text-light: var(--secondary-color); /* Footer Text White */
    --header-bg-light: var(--secondary-color); /* Header BG White */
    --header-text-light: var(--text-color); /* Header Text Dark */
    --body-bg-light: var(--secondary-color); /* Body BG White */
    --card-bg-light: var(--secondary-color); /* Card BG White */
    --preview-bg-light: var(--accent-color); /* Preview BG Light Blue */
    --border-color-light: #eeeeee; /* Light border */
    --shadow-color-light: rgba(0, 0, 0, 0.08); /* Subtle shadow */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --muted-color: #6c757d;
    --button-text-light: var(--secondary-color);
    --bubble-bg-light: var(--primary-color);
    --bubble-text-light: var(--secondary-color);
    --bubble-hover-bg-light: var(--link-hover-color);
    --bubble-active-bg-light: var(--link-hover-color); /* Active same as hover */
    --bubble-active-text-light: var(--secondary-color);

    /* Default to light mode variables */
    --header-bg: var(--header-bg-light);
    --header-text: var(--header-text-light);
    --body-bg: var(--body-bg-light);
    --card-bg: var(--card-bg-light);
    --preview-bg: var(--preview-bg-light);
    --border-color: var(--border-color-light);
    --shadow-color: var(--shadow-color-light);
    --footer-bg: var(--footer-bg-light);
    --footer-text: var(--footer-text-light);
    --button-text: var(--button-text-light);
    --bubble-bg: var(--bubble-bg-light);
    --bubble-text: var(--bubble-text-light);
    --bubble-hover-bg: var(--bubble-hover-bg-light);
    --bubble-active-bg: var(--bubble-active-bg-light);
    --bubble-active-text: var(--bubble-active-text-light);

    /* Other variables */
    --header-height: 125px; /* Desktop Header Height */
    --grid-gap: 1.5rem;
    --section-padding: 3rem;
    --section-gap: 2.5rem;
    --title-line-height: 1.4em;
    --title-lines-to-show: 2;
    --title-reserved-height: calc(var(--title-line-height) * var(--title-lines-to-show));
}

/* Dark Mode Variable Overrides */
html.dark-mode {
    /* ... (Keep all dark mode variable overrides) ... */
    --primary-color: #64b5f6;
    --secondary-color: #121212;
    --accent-color: #1e2a38;
    --text-color: #e0e0e0;
    --text-color-light: #121212;
    --link-hover-color: #90caf9;
    --footer-bg-dark: #1f1f1f;
    --footer-text-dark: #aaaaaa;
    --header-bg-dark: #1f1f1f;
    --header-text-dark: #e0e0e0;
    --body-bg-dark: #121212;
    --card-bg-dark: #2a2a2a;
    --preview-bg-dark: #1e2a38;
    --border-color-dark: #444444;
    --shadow-color-dark: rgba(255, 255, 255, 0.06);
    --success-color: #4caf50;
    --danger-color: #f44336;
    --muted-color: #9e9e9e;
    --button-text-dark: var(--secondary-color);
    --bubble-bg-dark: #e0e0e0;
    --bubble-text-dark: #121212;
    --bubble-hover-bg-dark: #ffffff;
    --bubble-active-bg-dark: #ffffff;
    --bubble-active-text-dark: #003d80;

    /* Apply dark mode overrides */
    --header-bg: var(--header-bg-dark);
    --header-text: var(--header-text-dark);
    --body-bg: var(--body-bg-dark);
    --card-bg: var(--card-bg-dark);
    --preview-bg: var(--preview-bg-dark);
    --border-color: var(--border-color-dark);
    --shadow-color: var(--shadow-color-dark);
    --footer-bg: var(--footer-bg-dark);
    --footer-text: var(--footer-text-dark);
    --button-text: var(--button-text-dark);
    --bubble-bg: var(--bubble-bg-dark);
    --bubble-text: var(--bubble-text-dark);
    --bubble-hover-bg: var(--bubble-hover-bg-dark);
    --bubble-active-bg: var(--bubble-active-bg-dark);
    --bubble-active-text: var(--bubble-active-text-dark);
}


/* Base body styles */
body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: var(--body-bg); color: var(--text-color); display: flex; flex-direction: column; min-height: 100vh; transition: background-color 0.3s ease, color 0.3s ease; }

/* Header */
header { background-color: var(--header-bg); color: var(--header-text); padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px var(--shadow-color); height: var(--header-height); width: 100%; box-sizing: border-box; position: sticky; top: 0; z-index: 1000; transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease; }
.header-controls { display: flex; align-items: center; gap: 15px; }
header .logo-link { display: inline-block; height: calc(var(--header-height) - 25px); line-height: calc(var(--header-height) - 25px); transition: height 0.3s ease; flex-shrink: 0; margin-right: auto; }
header .logo-image { height: 100%; width: auto; vertical-align: middle; max-width: 150px; }

/* Navigation List Styling */
nav#main-nav ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 10px; }
nav#main-nav ul li { margin: 0; flex-shrink: 0; }

/* --- Animated Bubble Navigation Links (Applied Everywhere Now) --- */
nav ul li a.bubble-nav-link { display: inline-block; padding: 8px 18px; background-color: var(--bubble-bg); color: var(--bubble-text); border-radius: 20px; text-decoration: none; font-size: 1em; font-weight: 500; text-align: center; border: 1px solid transparent; transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease; box-shadow: 0 1px 2px var(--shadow-color); white-space: nowrap; }
nav ul li a.bubble-nav-link:hover { transform: scale(1.08) translateY(-1px); background-color: var(--bubble-hover-bg); color: var(--bubble-text); box-shadow: 0 4px 8px var(--shadow-color); }
nav ul li a.bubble-nav-link.active { background-color: var(--bubble-active-bg); color: var(--bubble-active-text, var(--bubble-text)); font-weight: bold; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); transform: scale(1.02); }

/* Theme Toggle Button Style */
#theme-toggle { background: none; border: 1px solid var(--header-text); color: var(--header-text); font-size: 1.2rem; cursor: pointer; padding: 5px 8px; border-radius: 50%; line-height: 1; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; flex-shrink: 0; }
#theme-toggle:hover { background-color: var(--accent-color); color: var(--text-color-light); border-color: transparent; transform: scale(1.1); }
html.dark-mode #theme-toggle:hover { color: var(--text-color); }

/* Locate Us Button Styling */
header .locate-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 15px; background-color: var(--bubble-bg); color: var(--bubble-text); border-radius: 20px; text-decoration: none; font-size: 0.9em; font-weight: 500; text-align: center; border: 1px solid transparent; transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease; box-shadow: 0 1px 2px var(--shadow-color); white-space: nowrap; flex-shrink: 0; }
header .locate-btn span:first-child { font-size: 1.1em; line-height: 1; }
header .locate-btn:hover { transform: scale(1.08) translateY(-1px); background-color: var(--bubble-hover-bg); color: var(--bubble-text); box-shadow: 0 4px 8px var(--shadow-color); }
.locate-text {}

/* --- Mobile Menu Styles (Default Hidden) --- */
#mobile-menu-toggle.mobile-only { display: none; } /* Hidden on desktop */
.mobile-nav-dropdown { display: none; } /* Hidden on desktop */
.nav-item-desktop-only { display: list-item; /* Default display for desktop LI */ }
header .locate-btn.nav-item-desktop-only { display: inline-flex; } /* Default display for desktop button */

/* Main Content Area */
main { flex-grow: 1; width: 100%; padding-bottom: var(--section-gap); }

/* General Section Styling */
section { padding: var(--section-padding) 0; border-top: 1px solid var(--border-color); transition: background-color 0.3s ease, border-color 0.3s ease; }
main > section:first-of-type { border-top: none; }
.content-section { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; width: 90%; box-sizing: border-box; opacity: 0; transform: translateY(30px); animation: fadeIn 0.8s ease-out forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
section h2 { text-align: center; border-bottom: 2px solid var(--primary-color); display: inline-block; padding-bottom: 0.5rem; margin-bottom: 3rem; font-size: 2em; width: 100%; box-sizing: border-box; }

/* Footer */
footer { background-color: var(--footer-bg); color: var(--footer-text); text-align: center; padding: 2rem 1rem; margin-top: auto; border-top: 1px solid var(--border-color); font-size: 0.9em; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
footer p { margin: 0.5em 0; }
footer a { color: var(--footer-text); text-decoration: underline; transition: color 0.3s ease; }
footer a:hover { color: var(--secondary-color); }
html.dark-mode footer a { color: var(--primary-color); }
html.dark-mode footer a:hover { color: var(--link-hover-color); }

/* Home Page Preview Section Styles - Fixed Gaps */
.preview-section {
    background-color: var(--preview-bg);
    padding: var(--section-padding) 0;
    margin-top: var(--section-gap); /* Apply top margin */
    margin-bottom: var(--section-gap); /* Apply bottom margin */
    border-radius: 8px;
    border: none;
    transition: background-color 0.3s ease;
    border-top: none !important;
}
#welcome-home + .preview-section { /* Ensure gap after welcome */
    margin-top: var(--section-gap);
}
.preview-section:last-of-type { /* Remove bottom margin from last preview section */
     margin-bottom: 0;
}
/* REMOVED conflicting ID overrides for margin/border/radius */

.preview-section h2 { color: var(--primary-color); margin-top: 0; }
.preview-link-container { text-align: center; margin-top: 2.5rem; }
.contact-preview-details p { text-align: center; line-height: 1.6; font-size: 1.1em; color: var(--text-color); transition: color 0.3s ease;}
.contact-preview-details a { color: var(--primary-color); transition: color 0.3s ease;}
.product-grid-subset { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--grid-gap); max-width: 1200px; margin: 0 auto; padding: 0 2rem; box-sizing: border-box; }
#about-preview p, #contact-preview > p { max-width: 700px; margin-left: auto; margin-right: auto; }
#about-preview, #contact-preview { text-align: center; }

/* Products Page Specific Styles */
#search-container { margin-bottom: 2rem; text-align: center; }
#search-input { padding: 0.8rem; width: 60%; max-width: 400px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1em; background-color: var(--card-bg); color: var(--text-color); transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease; }
#search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--accent-color); }
#product-grid { display: flex; flex-wrap: wrap; gap: var(--grid-gap); justify-content: flex-start; }
#product-grid.filtered-state { justify-content: center; }

/* Product Item styles */
.product-item { border: 1px solid var(--border-color); border-radius: 6px; padding: 0.8rem; background-color: var(--card-bg); box-shadow: 0 2px 4px var(--shadow-color); transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease, border-color 0.3s ease; box-sizing: border-box; flex-grow: 0; flex-shrink: 0; flex-basis: calc(20% - var(--grid-gap) * 4 / 5); }
.product-item:hover { transform: translateY(-5px); box-shadow: 0 6px 12px var(--shadow-color); }
.product-item-content-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; height: 100%; }
.product-item-content-link:hover h3 { color: var(--link-hover-color); }
html.dark-mode .product-item-content-link:hover h3 { color: var(--link-hover-color); }
.product-item img { max-width: 100%; height: 160px; object-fit: contain; margin-bottom: 1rem; background-color: transparent; border-radius: 4px; display: block; margin-left: auto; margin-right: auto; }
.product-item h3 { font-size: 1.0em; margin: 0 0 0.5rem 0; color: var(--text-color); transition: color 0.2s ease; font-weight: 600; height: var(--title-reserved-height); line-height: var(--title-line-height); overflow: hidden; display: block; width: 100%; text-align: center; }
.product-item .product-id-display { font-size: 0.8em; color: var(--muted-color); margin-bottom: 0.5rem; }
.product-item .price { font-weight: bold; color: var(--primary-color); margin-bottom: 0.5rem; font-size: 1.1em; }
.stock-info { font-size: 0.85em; font-weight: 500; margin-bottom: 0.4rem; padding: 2px 6px; border-radius: 4px; display: inline-block; width: fit-content; margin-left: auto; margin-right: auto; transition: background-color 0.3s ease, color 0.3s ease; margin-top: auto; padding-bottom: 0.5rem; }
.stock-info.in-stock { color: var(--success-color); background-color: rgba(40, 167, 69, 0.1); }
.stock-info.out-of-stock { color: var(--danger-color); background-color: rgba(220, 53, 69, 0.1); }
html.dark-mode .stock-info.in-stock { background-color: rgba(76, 175, 80, 0.2); }
html.dark-mode .stock-info.out-of-stock { background-color: rgba(244, 67, 54, 0.2); }
.stock-info.unknown-stock { color: var(--muted-color); font-style: italic; }
.product-item .description { display: none; }

/* Product Detail Page Styles */
/* ... Keep existing detail page styles ... */
#product-detail-container { display: flex; gap: 2.5rem; align-items: flex-start; }
.product-detail-image-container { flex: 0 0 40%; max-width: 450px; align-self: flex-start;}
#product-detail-main-image { width: 100%; height: auto; max-height: 400px; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 8px var(--shadow-color); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; display: block; background-color: var(--card-bg); border: 1px solid var(--border-color); margin-bottom: 1rem; }
#product-detail-main-image:hover { transform: scale(1.02); box-shadow: 0 6px 12px var(--shadow-color); }
.product-detail-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.product-detail-thumbnails img { width: 60px; height: 60px; object-fit: contain; border: 2px solid var(--border-color); border-radius: 4px; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; background-color: var(--card-bg); opacity: 0.7; }
.product-detail-thumbnails img:hover { opacity: 1; border-color: var(--primary-color); transform: scale(1.05); }
.product-detail-thumbnails img.active-thumb { border-color: var(--primary-color); opacity: 1; box-shadow: 0 0 5px var(--primary-color); }
.product-detail-info { flex: 1 1 auto; }
.product-detail-info h1 { font-size: 2.2em; color: var(--primary-color); margin-bottom: 0.8rem; border-bottom: none; }
.product-detail-info .product-id-display { font-size: 0.9em; color: var(--muted-color); margin-bottom: 1rem; }
.product-detail-info .price { font-size: 1.8em; font-weight: bold; color: var(--primary-color); margin-bottom: 0.8rem; }
.product-detail-info .stock-info { font-size: 1.1em; margin-bottom: 1.5rem; margin-left: 0; margin-right: 0; width: fit-content; }
.product-detail-info .description { font-size: 1em; line-height: 1.6; margin-top: 1rem; margin-bottom: 1.5rem; color: var(--text-color); white-space: pre-line; }
.product-detail-info h2 { margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1.4em; border-bottom: 1px solid var(--border-color);}

/* Image Modal Styles */
/* ... Keep existing modal styles ... */
.modal { display: none; position: fixed; z-index: 1001; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.9); transition: background-color 0.3s ease; }
html.dark-mode .modal { background-color: rgba(10, 10, 10, 0.92); }
.modal-content { margin: auto; display: block; max-width: 85%; max-height: 85vh; animation-name: zoom; animation-duration: 0.4s; }
#modal-caption { margin: 15px auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: auto; min-height: 30px; animation-name: zoom; animation-duration: 0.4s; }
@keyframes zoom { from {transform: scale(0.5)} to {transform: scale(1)} }
.modal-close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }
.modal-close:hover, .modal-close:focus { color: #bbb; text-decoration: none; cursor: pointer; }

/* Contact Page Specific Styles */
/* ... Keep existing contact page styles ... */
#contact-form { max-width: 600px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--preview-bg); transition: background-color 0.3s ease, border-color 0.3s ease; box-shadow: 0 3px 6px var(--shadow-color); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: var(--primary-color); }
.form-group input, .form-group textarea { width: 100%; padding: 0.8rem; border: 1px solid var(--border-color); border-radius: 4px; box-sizing: border-box; font-size: 1em; background-color: var(--body-bg); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--accent-color); }
.contact-details { text-align: center; margin-top: 2rem; padding: 1.5rem; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; transition: background-color 0.3s ease, border-color 0.3s ease; }
.contact-details h3 { color: var(--primary-color); margin-bottom: 1rem; border-bottom: none; }
.contact-details p { margin: 0.5em 0; line-height: 1.6; color: var(--text-color); transition: color 0.3s ease;}
.contact-details a { color: var(--primary-color); transition: color 0.3s ease;}
html.dark-mode .contact-details p { color: var(--text-color); }
html.dark-mode .contact-details a { color: var(--primary-color); }

/* About Page Specific Styles */
/* ... Keep existing about page styles ... */
.about-content { line-height: 1.7; font-size: 1.1em; }
.about-content h2 { border-bottom: 2px solid var(--primary-color); padding-bottom: 0.5rem; margin-bottom: 1.5rem; }

/* General Button Styles */
/* ... Keep existing general button styles ... */
.btn { display: inline-block; background-color: var(--primary-color); color: var(--button-text); padding: 0.7rem 1.5rem; border: none; border-radius: 4px; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; font-size: 1em; font-weight: 500; box-shadow: 0 1px 3px var(--shadow-color); }
.btn:hover { background-color: var(--link-hover-color); transform: translateY(-1px); box-shadow: 0 3px 6px var(--shadow-color); }

/* Pagination Styles */
/* ... Keep existing pagination styles ... */
.pagination { display: flex; justify-content: center; align-items: center; padding: 2rem 0 1rem 0; gap: 8px; margin-top: 2.5rem; flex-wrap: wrap; width: 100%; }
.pagination button, .pagination a { display: inline-block; padding: 7px 13px; margin: 2px; border: 1px solid var(--border-color); background-color: var(--card-bg); color: var(--primary-color); text-decoration: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-size: 1em; line-height: 1.3; }
.pagination button:disabled { color: var(--muted-color); border-color: var(--border-color); background-color: transparent; cursor: not-allowed; opacity: 0.6; }
.pagination a:hover, .pagination button:not(:disabled):hover { background-color: var(--accent-color); border-color: var(--primary-color); color: var(--primary-color); }
.pagination a.active { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--secondary-color); font-weight: bold; cursor: default; }
.pagination span.ellipsis { padding: 8px 5px; color: var(--muted-color); }
html.dark-mode .pagination button, html.dark-mode .pagination a { border-color: var(--border-color-dark); background-color: var(--card-bg-dark); color: var(--primary-color); }
html.dark-mode .pagination button:disabled { color: var(--muted-color); border-color: var(--border-color-dark); background-color: transparent; }
html.dark-mode .pagination a:hover, html.dark-mode .pagination button:not(:disabled):hover { background-color: var(--accent-color); border-color: var(--primary-color); color: var(--link-hover-color); }
html.dark-mode .pagination a.active { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--secondary-color); }


/* --- Mobile Optimizations --- UPDATED --- */

@media (max-width: 767px) { /* Mobile breakpoint */
    :root {
        --header-height: 70px;
        --section-padding: 2rem;
        --section-gap: 1.5rem;
        --grid-gap: 1rem;
    }
    header { padding: 0 1rem; min-height: var(--header-height); height: auto; }
    .header-controls { gap: 10px; flex-grow: 1; justify-content: flex-end; }
    header .logo-link { height: calc(var(--header-height) - 20px); line-height: calc(var(--header-height) - 20px); margin-right: auto;}
    header .logo-image { max-width: 100px; /* Smaller logo */ }

    /* Mobile Menu Implementation */
    .nav-item-desktop-only { /* Hide desktop LIs and Locate button */
        display: none !important; /* Use important to override potential inline-flex */
    }
    #mobile-menu-toggle.mobile-only { /* Show hamburger */
        display: inline-block;
        font-size: 1.6rem;
        padding: 0 5px;
        margin-left: 5px;
    }
    /* Adjust visible items */
    #main-nav ul li:nth-child(-n+2) { /* Select first two */
         display: list-item; /* Ensure Home/Products are visible */
    }
     #main-nav ul li:nth-child(-n+2) a.bubble-nav-link {
         padding: 5px 10px;
         font-size: 0.85em;
     }
    #theme-toggle { font-size: 1.1rem; padding: 4px 7px; }

    /* Mobile Dropdown Styles */
    .mobile-nav-dropdown { display: none; position: absolute; top: var(--header-height); right: 0.5rem; background-color: var(--card-bg); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px var(--shadow-color); z-index: 999; min-width: 180px; padding: 0.5rem 0; transition: background-color 0.3s ease, border-color 0.3s ease; }
    .mobile-nav-dropdown.dropdown-open { display: block; }
    .mobile-nav-dropdown a { display: flex; align-items: center; gap: 8px; padding: 12px 20px; text-decoration: none; color: var(--text-color); background-color: transparent; border: none; box-shadow: none; white-space: nowrap; font-size: 1em; transition: background-color 0.2s ease, color 0.2s ease; }
    .mobile-nav-dropdown a.locate-btn { background-color: transparent; color: var(--text-color); box-shadow: none; padding: 12px 20px; font-size: 1em; border-radius: 0; width: 100%; box-sizing: border-box; text-align: left; justify-content: flex-start; display: flex; gap: 8px; }
    .mobile-nav-dropdown a.locate-btn span:first-child { font-size: 1.1em; }
    .mobile-nav-dropdown a.locate-btn .locate-text { display: inline; }
    .mobile-nav-dropdown a:hover, .mobile-nav-dropdown .locate-btn:hover { background-color: var(--accent-color); color: var(--primary-color); }
    html.dark-mode .mobile-nav-dropdown a { color: var(--text-color); }
    html.dark-mode .mobile-nav-dropdown .locate-btn { color: var(--text-color); }
    html.dark-mode .mobile-nav-dropdown a:hover, html.dark-mode .mobile-nav-dropdown .locate-btn:hover { color: var(--link-hover-color); }

    .content-section { padding-left: 1rem; padding-right: 1rem; width: calc(100% - 2rem); }
    section h2 { font-size: 1.6em; margin-bottom: 2rem; }
    h1 { font-size: 1.8em; }

    /* Product List Items (Force 2 columns) */
    .product-item { flex-basis: calc(50% - var(--grid-gap) / 2); }
    /* Featured products grid (Force 2 columns) */
    #product-preview-grid {
        display: flex; /* Change preview to flex */
        flex-wrap: wrap;
        gap: var(--grid-gap);
        justify-content: center; /* Center preview items */
        padding: 0; /* Remove grid padding if any */
    }
     #product-preview-grid .product-item { /* Apply flex basis to items */
        flex-basis: calc(50% - var(--grid-gap) / 2);
        /* Ensure preview items don't have conflicting grid styles */
        grid-template-columns: none;
    }

    .product-item img { height: 110px; }
    .product-item h3 { font-size: 0.9em; height: var(--title-reserved-height); line-height: 1.3em; }
    .product-item .price { font-size: 1em; }
    .stock-info { font-size: 0.8em; }

    .pagination { gap: 4px; margin-top: 1.5rem; padding: 1.5rem 0 0.5rem 0; }
    .pagination button, .pagination a { padding: 5px 9px; font-size: 0.8em; margin: 1px; }
}

@media (max-width: 480px) { /* Very Small Mobile */
     :root {
         --header-height: 65px;
     }
     header { padding: 0 0.8rem;}
     .header-controls { gap: 6px; }
     header .logo-link { height: calc(var(--header-height) - 15px); line-height: calc(var(--header-height) - 15px); }
     /* Optionally hide Products link too */
     /* #main-nav ul li:nth-child(n+2) { display: none; } */

     #theme-toggle { font-size: 1.0rem; padding: 3px 5px; }
     #mobile-menu-toggle { font-size: 1.5rem; }
     .content-section { padding-left: 0.5rem; padding-right: 0.5rem; width: calc(100% - 1rem); }

     /* Product List Items (Still 2 columns, could switch to 1) */
      .product-item { flex-basis: calc(50% - var(--grid-gap) / 2); }
     /* #product-preview-grid .product-item { flex-basis: calc(50% - var(--grid-gap) / 2); } */
     /* If 1 column needed: */
     /* .product-item { flex-basis: 100%; } */
     /* #product-preview-grid .product-item { flex-basis: 100%; } */

}