/* --- CSS Custom Properties (Variables) --- */
:root {
    /* --- Light Theme Palette (Gold/Light Gray) --- */
    --primary-bg-color: #F4F4F5;       /* Light Grey Background */
    --secondary-bg-color: #FFFFFF;     /* White for Cards/Modals */
    --accent-color: #E5C100;           /* Rich Gold/Yellow from logo */
    --accent-color-dark: #C7A800;      /* Darker Gold for Hovers */
    --accent-color-light: rgba(229, 193, 0, 0.1); /* Transparent Gold */
    --text-color: #1a1a1a;             /* Dark Grey for Text */
    --text-color-light: #6b6b6b;       /* Lighter Grey for subtle text */
    --text-on-accent: #100C02;         /* Dark text for high contrast on gold buttons */
    --border-color: rgba(0, 0, 0, 0.1);/* Subtle dark border */
    --danger-color: #e53e3e;           /* Red for favorites */
    --shadow-color: rgba(0, 0, 0, 0.08);
    --dark-footer-bg: #1c1403;

    /* --- Structural & Typographic --- */
    --border-radius: 16px;
    --border-radius-small: 10px;
    --box-shadow: 0 4px 12px var(--shadow-color);
    --box-shadow-lg: 0 8px 25px var(--shadow-color);
    --transition-duration: 0.3s;
    --easing: cubic-bezier(0.25, 0.8, 0.25, 1);
    --gradient-primary: linear-gradient(135deg, var(--accent-color-dark), var(--accent-color));
    --bottom-nav-height: 70px;
    --header-height: 70px;
    --font-family-headings: 'Montserrat', sans-serif;
    --font-family-body: 'Lato', sans-serif;
    --install-banner-height: 60px;
}

/* --- General & Base Styles --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-family-body);
    color: var(--text-color);
    background-color: var(--primary-bg-color);
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 32" fill="%23000000" fill-opacity="0.03"%3E%3Cpath d="M6 18h4l3-6c1.2-2.4 2.5-3.5 5-3.5h18c2.5 0 4 1.2 5 3.5l3 6h5c1 0 2 1 2 2v4h-3a5 5 0 1 1-10 0H19a5 5 0 1 1-10 0H6v-4c0-1 1-2 2-2zM16.5 26a3.5 3.5 0 1 0 0 .01zm31 0a3.5 3.5 0 1 0 0 .01zM22 14h20v2H22z"/%3E%3C/svg%3E');
    background-size: 80px;
    min-height: 100vh;
    padding-bottom: var(--bottom-nav-height);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    transition: padding-bottom 0.3s var(--easing);
}
body.install-banner-visible {
    padding-bottom: calc(var(--bottom-nav-height) + var(--install-banner-height));
}
*:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; border-radius: var(--border-radius-small); }
::selection { background-color: var(--accent-color); color: var(--text-on-accent); }
.animate-on-scroll { opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; }
.animate-on-scroll.fade-in { transform: translateY(20px); }
.animate-on-scroll.slide-up { transform: translateY(40px); }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* --- Header & Search --- */
header {
    background-color: var(--secondary-bg-color);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    position: sticky;
    top: 0;
    height: var(--header-height);
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-container { display: flex; align-items: center; gap: 12px; }
.logo { width: auto; height: 50px; object-fit: contain; }
.header-title { font-family: var(--font-family-headings); font-size: 1.2rem; font-weight: 700; color: var(--text-color); }
.header-icons { display: flex; align-items: center; gap: 5px; }
.header-icons button { background: none; border: none; cursor: pointer; color: var(--text-color); font-size: 1.4rem; padding: 10px; border-radius: 50%; transition: all var(--transition-duration); }
.header-icons button:hover, .header-icons button:focus-visible { background-color: var(--accent-color-light); color: var(--accent-color); }
.header-icons .desktop-icon { display: none; }
.search-container { padding: 0.8rem 1rem; position: sticky; top: var(--header-height); z-index: 999; background-color: rgba(244, 244, 245, 0.9); }
#search-box { width: 100%; padding: 14px 16px 14px 45px; border: 1px solid var(--border-color); border-radius: var(--border-radius); background-color: var(--secondary-bg-color); color: var(--text-color); font-size: 1rem; outline: none; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: border-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease; }
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-color-light); font-size: 1.2rem; }
#search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary-bg-color); z-index: 1020; display: none; flex-direction: column; transform: translateY(-100%); transition: transform 0.4s var(--easing); }
#search-overlay.visible { display: flex; transform: translateY(0); }
.search-overlay-header { display: flex; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.search-overlay-input-wrapper { flex-grow: 1; position: relative; }
#search-overlay-box { width: 100%; padding: 14px 16px 14px 45px; font-size: 1.1rem; background-color: var(--secondary-bg-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); }
#search-overlay-box:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-color-light); }
.close-search-btn { font-size: 2.5rem; background: none; border: none; color: var(--text-color-light); cursor: pointer; padding: 0 1rem; }
#search-suggestions { position: static; display: none; background: none; border: none; box-shadow: none; flex-grow: 1; overflow-y: auto; }
#search-suggestions ul { list-style: none; padding: 0.5rem 0; }
#search-suggestions li { padding: 1rem 1.5rem; cursor: pointer; transition: background-color 0.2s ease; border-bottom: 1px solid var(--border-color); }
#search-suggestions li:hover { background-color: var(--accent-color-light); color: var(--accent-color); }
#search-suggestions li strong { color: var(--accent-color); }
.search-results-message { text-align: center; margin: -1rem 1rem 1.5rem; padding: 0.5rem 1rem; background-color: var(--accent-color-light); border-radius: var(--border-radius-small); font-weight: 500; }

/* --- Banner & Filters --- */
.banner-container { padding: 0 1rem; margin-bottom: 2rem; }
.banner-container img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: opacity 0.4s ease; }
.brand-filter-container { padding: 0.5rem 1rem; display: flex; overflow-x: auto; gap: 0.8rem; margin-bottom: 2rem; scrollbar-width: none; -ms-overflow-style: none; }
.brand-filter-container::-webkit-scrollbar { display: none; }
.brand-filter-item { background-color: var(--secondary-bg-color); border: 1px solid var(--border-color); border-radius: 25px; padding: 0.6rem 1.3rem; cursor: pointer; font-size: 0.9rem; font-weight: 500; color: var(--text-color-light); white-space: nowrap; transition: all var(--transition-duration) var(--easing); }
.brand-filter-item:hover { background-color: var(--accent-color-light); border-color: var(--accent-color); color: var(--accent-color); }
.brand-filter-item.active { background: var(--gradient-primary); color: var(--text-on-accent); border-color: transparent; font-weight: 700; }


/* =======================================================
   --- Product List (REVAMPED) ---
   ======================================================= */
.section-padding { padding: 1.5rem 0; }
.section-title { font-family: var(--font-family-headings); font-size: 1.8rem; font-weight: 700; color: var(--text-color); margin-bottom: 1.5rem; text-align: center; }
.product-list { display: grid; grid-template-columns: repeat(2, 1fr); padding: 0 1rem; gap: 1rem; }
.product-card {
    background: var(--secondary-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    text-decoration: none;
    transition: transform var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
    border: 1px solid var(--border-color);
}
.product-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px var(--shadow-color); }
.product-image-container {
    position: relative;
    aspect-ratio: 16 / 10; /* Responsive height */
    background-color: #eee;
}
.product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--easing); }
.product-card:hover img { transform: scale(1.05); }
.product-info {
    padding: 1rem;
    flex-grow: 1;
    /* Add these two lines */
    display: flex;
    flex-direction: column;
}.product-info h3 { font-family: var(--font-family-headings); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; }
.product-details { display: flex; flex-wrap: wrap; gap: 6px; }
.product-details span { background-color: #f0f0f0; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; color: var(--text-color-light); }
.favorite-icon {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 2;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    background: none;
    border: none;
    padding: 6px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.call-icon {
    background: var(--gradient-primary);
    color: var(--text-on-accent);
    padding: 0.8rem 0;
    text-align: center;
    border-radius: var(--border-radius-small);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto; /* This pushes the button to the bottom of the card */
    transition: all var(--transition-duration) var(--easing);
}
.call-icon:hover {
    background: var(--accent-color-dark);
    box-shadow: 0 4px 15px rgba(229, 193, 0, 0.2);
    transform: translateY(-2px);
}
.favorite-icon.active { color: var(--danger-color); }
/* --- End of Revamped Product List Section --- */


/* --- FAB, Bottom Nav, Footer --- */
.fab-container { position: fixed; bottom: 90px; right: 20px; z-index: 998; display: flex; flex-direction: column; gap: 15px; }
.fab-option {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #FFFFFF;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s var(--easing);
}
.fab-option:hover { transform: scale(1.1); }
.fab-option[href*="instagram.com"] {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.fab-option[href*="wa.me"] { background-color: #25D366; }
.fab-option[href*="tel:"] { background-color: #34B7F1; }

.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-height);
    border-top: 1px solid var(--border-color);
    background-color: var(--secondary-bg-color);
    display: flex;
    z-index: 1000;
}
.nav-item { display: flex; align-items: center; justify-content: center; color: var(--text-color); font-size: 1rem; font-weight: 600; flex: 1; background: none; border: none; cursor: pointer; gap: 8px; }
.nav-item:first-child { border-right: 1px solid var(--border-color); }
.nav-item:hover { color: var(--accent-color-dark); }
footer { background-color: var(--dark-footer-bg); color: #e0e0e0; padding: 3rem 1rem 1rem; border-top: 3px solid var(--accent-color); }
.footer-container { display: flex; flex-direction: column; gap: 2.5rem; max-width: 1200px; margin: 0 auto; }
.footer-column h3 { font-family: var(--font-family-headings); font-size: 1.3rem; color: var(--accent-color); margin-bottom: 1rem; }
.footer-logo { max-width: 200px; margin-bottom: 1rem; filter: brightness(1.1); }
.footer-column a { color: #f5f5f5; text-decoration: none; transition: color 0.2s; }
.footer-column a:hover { color: var(--accent-color); }
.branch { margin-bottom: 1.5rem; }
.branch h4 { color: #ffffff; margin-bottom: 0.3rem; font-size: 1rem; }
.branch p { line-height: 1.5; color: #b0b0b0; }
.branch a { font-weight: bold; color: var(--accent-color-dark); }
.social-icons { display: flex; gap: 1rem; margin-top: 1rem; }
.social-icons a { font-size: 1.5rem; color: #b0b0b0; }
.social-icons a:hover { color: var(--accent-color); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2.5rem; padding-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; max-width: 1200px; margin: 2.5rem auto 0; color: #a0a0a0; }
.powered-by a { display: inline-flex; align-items: center; }
.powered-by img { height: 20px; vertical-align: middle; margin-left: 5px; }

/* --- Splash Screen --- */
#welcome-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-footer-bg); z-index: 1010; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.8s ease, visibility 0.8s ease; visibility: visible; opacity: 1; }
#welcome-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#welcome-content { display: flex; flex-direction: column; align-items: center; text-align: center; flex-grow: 1; justify-content: center; }
#welcome-logo { max-width: 230px; }
#welcome-line-3 { font-size: 1.6rem; color: #ffffff; font-weight: 700; margin: 0; }
#welcome-line-1 { font-size: 1rem; color: #a0a0a0; }
#welcome-footer { position: absolute; bottom: 80px; color: #a0a0a0; font-size: 0.8rem; }
#welcome-progress-container { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 70%; max-width: 300px; height: 6px; background-color: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; }
#welcome-progress-bar { width: 0%; height: 100%; background-color: var(--accent-color); transition: width 2.25s linear; }
#loader-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 1005; display: flex; justify-content: center; align-items: center; transition: opacity 0.4s ease-out; }
#loader { border: 4px solid var(--accent-color-light); border-top: 4px solid var(--accent-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }

/* --- Modals --- */
.modal { display: none; position: fixed; z-index: 1003; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(5px); animation: fadeIn 0.3s ease forwards; }
.modal.closing { animation: fadeOut 0.3s ease forwards; }
.modal-content { position: relative; background-color: var(--secondary-bg-color); margin: 8vh auto; border-radius: var(--border-radius); width: 90%; max-width: 500px; box-shadow: var(--box-shadow-lg); overflow: hidden; border: 1px solid var(--border-color); animation: slideInFromTop 0.4s var(--easing) forwards; display: flex; flex-direction: column; max-height: 85vh; }
.modal.closing .modal-content { animation: slideOutToTop 0.4s var(--easing) forwards; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border-color); }
.modal-header h2 { font-size: 1.4rem; color: var(--text-color); }
.close { color: var(--text-color-light); font-size: 32px; background: none; border: none; cursor: pointer; transition: color 0.2s ease; }
.close:hover { color: var(--text-color); }
.modal-body { padding: 1.5rem 1.8rem; overflow-y: auto; flex-grow: 1; }
.modal-footer { padding: 1rem 1.8rem; text-align: right; background-color: #f8f8f8; border-top: 1px solid var(--border-color); }
.modal-footer button.btn-primary { padding: 12px 25px; background: var(--gradient-primary); color: var(--text-on-accent); border: none; border-radius: var(--border-radius-small); cursor: pointer; font-weight: 600; font-size: 1rem; transition: all var(--transition-duration) var(--easing); }
.modal-footer button.btn-primary:hover { transform: translateY(-1px); }
#filterModal .modal-body label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-color); }
#filterModal .modal-body select { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius-small); margin-bottom: 1.2rem; font-size: 1rem; background-color: #f8f8f8; }
#sortModal .modal-body button { display: block; width: 100%; padding: 14px 18px; margin-bottom: 8px; border: 1px solid var(--border-color); background-color: #f8f8f8; color: var(--text-color); font-size: 1rem; text-align: left; cursor: pointer; border-radius: var(--border-radius-small); font-weight: 500; }
#sortModal .modal-body button.active { font-weight: 700; color: var(--accent-color); background-color: var(--accent-color-light); border-color: var(--accent-color); }
#locationModal .modal-body .location-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; margin-bottom: 12px; border: 1px solid var(--border-color); background-color: #f8f8f8; color: var(--text-color); font-size: 1.05rem; }
#favoritesModal .modal-body { padding: 1rem 0; }
.favorites-list { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 0 1.5rem; }
.favorites-list .product-card { box-shadow: none; border: 1px solid var(--border-color); flex-direction: row; align-items: center; padding: 0.8rem; gap: 1rem; background-color: #fcfcfc; }
.favorites-list .product-image-container { height: 60px; width: 60px; flex-shrink: 0; border-radius: var(--border-radius-small); aspect-ratio: 1 / 1; }
.favorites-list .product-info { padding: 0; }
.favorites-list h3 { font-size: 1rem; }
.favorites-list .delete-icon { font-size: 1.2rem; color: var(--text-color-light); background-color: #f0f0f0; border-radius: 50%; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s ease; margin-left: auto; flex-shrink: 0; }
.favorites-list .delete-icon:hover { background-color: var(--danger-color); color: white; transform: scale(1.1); }

/* --- Install App Banner --- */
#install-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--dark-footer-bg); color: #fff; padding: 0 1rem; display: none; align-items: center; justify-content: space-between; z-index: 1001; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255,255,255,0.1); height: var(--install-banner-height); transition: transform 0.4s var(--easing); transform: translateY(100%); }
#install-banner.visible { display: flex; transform: translateY(0); }
#install-banner p { margin: 0; flex-grow: 1; margin-right: 1rem; font-weight: 500; font-size: 0.9rem; color: #ccc; }
#install-banner .install-controls { display: inline-flex; align-items: center; gap: 0.35rem; }
#install-banner .install-button { background: var(--accent-color); color: var(--text-on-accent); border: none; border-radius: var(--border-radius-small); padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
#install-banner .close-install-banner { background: none; border: none; color: #ccc; font-size: 1.4rem; cursor: pointer; padding: 0 0.4rem; }

/* --- Responsive & Mobile-Specific --- */
@media (max-width: 767px) {
    .header-title { font-size: 1.1rem; }
    #sortModal .modal-content, #filterModal .modal-content { position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; width: 100%; max-width: 100%; max-height: 80vh; border-radius: var(--border-radius) var(--border-radius) 0 0; animation: slideUpFromBottom 0.4s var(--easing) forwards; }
    #sortModal.closing .modal-content, #filterModal.closing .modal-content { animation: slideDownToBottom 0.4s var(--easing) forwards; }
}

@media (min-width: 768px) {
    .product-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); padding: 0 1.5rem; gap: 1.5rem; }
    .banner-container { padding: 0 1.5rem; }
    .banner-container img { height: 300px; }
}

@media (min-width: 992px) {
    body { padding-bottom: 0; }
    .bottom-nav, #install-banner { display: none; }
    #search-box { cursor: text; pointer-events: auto; }
    #search-box[readonly] { pointer-events: none; }
    header { padding: 0 2rem; }
    .header-icons .desktop-icon { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; background-color: var(--primary-bg-color); padding: 8px 16px; border-radius: 25px; border: 1px solid var(--border-color); }
    .header-icons .desktop-icon i { font-size: 1rem; }
    .product-list { padding: 0 2rem; }
    .fab-container { bottom: 20px; right: 30px; } 
    .footer-container { flex-direction: row; justify-content: space-between; gap: 2rem; align-items: flex-start; }
    .footer-column { flex: 1; } .footer-column.about { flex: 1.5; }
    .footer-bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1200px) {
    header, .search-container, .brand-filter-container, .banner-container, .section-padding, footer { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
    .product-list { max-width: 1200px; margin: 0 auto; }
}

/* Keyframes */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideInFromTop { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideOutToTop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
@keyframes slideUpFromBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideDownToBottom { from { transform: translateY(0); } to { transform: translateY(100%); } }