:root {
    --ko-primary: #007aff;
    --ko-primary-rgb: 0, 122, 255;
    --ko-accent: #ffc107;
    --ko-danger: #dc3545; 
    --ko-success: #28a745; 
    --ko-info: #17a2b8; 
    --ko-purple: #6f42c1; 
    
    --bg-light: #f8f9fa;
    --bg-card-light: #ffffff;
    --text-main-light: #212529;
    --text-secondary-light: #6c757d;
    --border-color-light: #e9ecef;
    
    --bg-dark: #0A0A1F; 
    --bg-card-dark: #1A1A3F; 
    --text-main-dark: #e2e8f0;
    --text-secondary-dark: #94a3b8;
    --border-color-dark: #334155;

    --shadow: 0 10px 30px rgba(0,0,0,0.07);
    --border-radius: 12px;
}
body.light-mode {
    --bg-main: var(--bg-light); --bg-card: var(--bg-card-light); --text-main: var(--text-main-light);
    --text-secondary: var(--text-secondary-light); --border-color: var(--border-color-light);
}
body.dark-mode {
    --bg-main: var(--bg-dark); --bg-card: var(--bg-card-dark); --text-main: var(--text-main-dark);
    --text-secondary: var(--text-secondary-dark); --border-color: var(--border-color-dark);
}

/* === MODIFIED: "Natural" Section Header === */
.section-header-jumia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--ko-primary);
    padding-bottom: 10px;
    margin-bottom: 20px; 
}
body.dark-mode .section-header-jumia {
    border-bottom: 2px solid var(--ko-accent);
}
.section-header-jumia h2 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-main);
}
body.dark-mode .section-header-jumia h2 {
    color: var(--text-main-dark);
}
.section-header-jumia .see-all-link {
    text-decoration: none;
    color: var(--ko-primary);
    font-weight: 600;
    font-size: 0.9em;
}
body.dark-mode .section-header-jumia .see-all-link {
    color: var(--ko-accent);
}

/* === MODIFIED: "Natural" Carousel Section === */
.carousel-section {
    margin-top: 25px;
    overflow: hidden;
    /* When expanded, it should just be a normal grid */
}
.carousel-section.expanded-section {
    overflow: visible;
}

.carousel-section .deals-carousel-wrapper {
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
}
.carousel-section .deals-carousel-wrapper::-webkit-scrollbar { display: none; }

.collection-section {
    margin-top: 25px;
    margin-bottom: 25px;
}
.image-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.image-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: var(--border-radius);
    padding: 10px 5px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    text-align: center;
    font-size: 0.9em;
    box-shadow: none;
    border: none;
    transition: transform 0.2s ease;
    position: relative; 
    overflow: visible;
}
.image-category-card:hover {
    transform: translateY(-5px);
}
.image-category-card .category-emoji {
    font-size: 2.5em;
    margin-bottom: 8px;
    line-height: 1; 
}
.image-category-card h3 {
    margin: 0;
    font-size: 1em;
    position: relative;
    z-index: 2; 
}
@media (min-width: 768px) {
    .image-category-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}
.image-category-section { display: none; }
.cta-wrapper { display: none; }


/* --- === CSS FOR "SEE MORE" BUTTON === --- */
.see-more-btn {
    color: var(--ko-primary);
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    white-space: nowrap; 
    border: 1px solid var(--ko-primary);
    background-color: var(--bg-card);
    cursor: pointer;
}
body.dark-mode .see-more-btn {
     background-color: var(--bg-card-dark);
     border-color: var(--ko-accent);
     color: var(--ko-accent);
}
.see-more-btn:hover { background-color: var(--border-color); }
.see-more-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background-color: var(--border-color);
}

/* === MODIFIED: "See More" Grid Fix === */
.deals-carousel-wrapper.expanded {
    overflow-x: hidden;
    padding: 0;
}
.deals-carousel-wrapper.expanded .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: wrap;
    gap: 15px; /* Added gap */
}
@media (min-width: 768px) {
    .deals-carousel-wrapper.expanded .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1400px) {
     .deals-carousel-wrapper.expanded .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     }
}
/* --- === END "SEE MORE" CSS === --- */


/* --- ALL YOUR ORIGINAL STYLES --- */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    margin: 0; 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    line-height: 1.6; 
    overflow-x: hidden;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.sticky-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background-color: rgba(var(--bg-card-rgb, 30, 41, 59), 0.8);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}
body.light-mode .sticky-header { --bg-card-rgb: 255, 255, 255; }
body.dark-mode .sticky-header { --bg-card-rgb: 30, 41, 59; }

/* === MODIFIED: Header Layout & Size === */
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px; /* REDUCED from 70px */
}
.site-title {
    text-decoration: none;
    color: var(--text-main);
    font-size: 1.5em;
    font-weight: 700;
}
.site-title span { color: var(--ko-accent); }

.hamburger-menu {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-main);
    display: block;
    order: 1; /* 1. Hamburger */
}

.site-title {
    order: 2; /* 2. Title */
}

.mobile-profile-icon {
    display: block;
    order: 3; /* 3. Profile Icon */
    color: var(--text-secondary);
    font-size: 24px;
    text-decoration: none;
}
.desktop-nav { display: none; } 
.header-icons { display: none; }

@media (min-width: 1024px) {
    .hamburger-menu { display: none; }
    .mobile-profile-icon { display: none; }

    .site-title {
        order: 1;
        flex-grow: 0;
        text-align: left;
    }
    .desktop-nav {
        display: flex;
        order: 2;
        align-items: center;
        gap: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
        flex-grow: 1;
        justify-content: center;
    }
    .desktop-nav a {
        text-decoration: none;
        color: var(--text-secondary);
        font-weight: 500;
    }
    .header-icons {
        display: flex;
        order: 3;
        align-items: center;
        gap: 20px;
    }
    .header-icons a {
        color: var(--text-secondary);
        font-size: 22px;
        text-decoration: none;
    }
}

@media (max-width: 1023px) {
    .site-title {
        flex-grow: 1;
        text-align: center;
    }
}
/* === END HEADER MODIFICATIONS === */


.page-container {
    padding-top: 80px; /* REDUCED from 90px, +20px from header height */
    padding-bottom: 20px;
}
.search-container { display: flex; margin-bottom: 25px; }
#search-input { width: 100%; padding: 12px 20px; font-size: 1em; border: 1px solid var(--border-color); border-right: none; border-radius: 25px 0 0 25px; background-color: var(--bg-card); color: var(--text-main); }
#search-btn { padding: 12px 22px; border: 1px solid var(--ko-primary); background-color: var(--ko-primary); color: white; cursor: pointer; border-radius: 0 25px 25px 0; }
.mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1090; opacity: 0; visibility: hidden; }
.mobile-nav-overlay.active { opacity: 1; visibility: visible; }
.mobile-nav { position: fixed; top: 0; left: -280px; width: 280px; height: 100%; background-color: var(--bg-card); z-index: 1100; transition: transform 0.3s ease; display: flex; flex-direction: column; }
.mobile-nav.active { transform: translateX(280px); }
.mobile-nav-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); font-size: 1.2em; font-weight: bold; }
.mobile-nav a { display: flex; align-items: center; padding: 16px 20px; color: var(--text-main); text-decoration: none; border-bottom: 1px solid var(--border-color); }
.mobile-nav a i { margin-right: 15px; color: var(--ko-primary); }
.mobile-nav-footer { padding: 15px; }
.mobile-nav .post-button { background-color: var(--ko-accent); color: #212529; font-weight: bold; border-radius: 25px; text-align: center; display: block; padding: 12px; text-decoration: none; }
.section-title { border-bottom: 2px solid var(--ko-primary); padding-bottom: 10px; margin-bottom: 20px; font-size: 1.4em; }

/* === MODIFIED FOR MASONRY === */
.product-grid {
    margin: 0 auto;
}
.product-card-link {
    text-decoration: none;
    color: inherit;
}
.gutter-sizer {
    width: 4%; /* 4% gap between columns */
}
#product-grid > .product-card-link {
    width: 48%; /* 48% + 4% + 48% = 100% */
    margin-bottom: 15px; /* Vertical gap */
}
/* === END MASONRY MODIFICATIONS === */

.product-card { background: var(--bg-card); border-radius: var(--border-radius); overflow: hidden; display: flex; flex-direction: column; height: 100%; box-shadow: var(--shadow); position: relative; transition: all 0.3s ease-out; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.15); }
.product-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.3s ease-out; }
.product-card:hover img { transform: scale(1.05); }
.product-card h3 { margin: 10px 15px; font-size: 0.95rem; flex-grow: 1; }
.product-card .price { margin: 0 15px 15px; font-size: 1.1rem; font-weight: bold; color: var(--ko-primary); }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.category-item { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-card); border-radius: var(--border-radius); padding: 15px 5px; text-decoration: none; color: var(--text-main); }
.category-item i { font-size: 24px; color: var(--ko-primary); margin-bottom: 8px; }
.category-item span { font-size: 0.8em; font-weight: 600; }

.product-card.skeleton-card {
    background-color: #e0e0e0;
    background-image: linear-gradient(90deg, #e0e0e0, #f0f0f0, #e0e0e0);
    background-size: 250px;
    animation: skeleton-shimmer 1.5s infinite linear;
}
body.dark-mode .product-card.skeleton-card {
    background-color: #334155;
    background-image: linear-gradient(90deg, #334155, #475569, #334155);
}
.skeleton-image { width: 100%; aspect-ratio: 1 / 1; background-color: #e0e0e0; }
.skeleton-text { height: 1.2rem; margin: 12px 15px 0; border-radius: 4px; background-color: #e0e0e0; }
body.dark-mode .skeleton-image, body.dark-mode .skeleton-text { background-color: #334155; }

@keyframes skeleton-shimmer { 100% { background-position: 250px; } }

.deals-grid {
    display: flex;
    gap: 15px;
}
.deals-grid .product-card { flex: 0 0 160px; width: 160px; }

@media (min-width: 768px) {
    #product-grid > .product-card-link {
        width: 32%;
    }
    .gutter-sizer {
        width: 2%;
    }
    .category-grid { grid-template-columns: repeat(6, 1fr); } 
    .deals-grid .product-card { flex: 0 0 200px; width: 200px; } 
}

.product-card .wishlist-btn { position: absolute; top: 12px; right: 12px; background-color: rgba(255, 255, 255, 0.8); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 18px; color: var(--text-main); z-index: 3; }
.stock-info {
    font-size: 0.85em;
    font-weight: bold;
    margin: -10px 15px 10px;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}
.in-stock { color: #155724; background-color: #d4edda; }
.low-stock { color: #856404; background-color: #fff3cd; }
.out-of-stock, .sold-out { color: #721c24; background-color: #f8d7da; }
.product-card.is-sold { position: relative; cursor: not-allowed; }
.product-card.is-sold img { filter: grayscale(90%); }
.product-card-sold-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(44, 62, 80, 0.7); display: flex; justify-content: center; align-items: center; z-index: 2; pointer-events: none; }
.product-card-sold-overlay span { color: #dc3545; font-size: 1.8em; font-weight: bold; border: 3px solid #dc3545; padding: 5px 15px; border-radius: 5px; transform: rotate(-15deg); background-color: rgba(255, 255, 255, 0.9); }

@media (min-width: 1400px) {
    .container { max-width: 95%; }
    #product-grid > .product-card-link {
        width: 280px;
    }
    .gutter-sizer {
        width: 15px;
    }
    .category-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } 
}
.load-more-container { text-align: center; padding: 30px 0; display: none; }
#load-more-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); padding: 12px 25px; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
#load-more-btn .loading-icon { animation: rotate 1.5s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }

/* === NEW: Chat Prompt Styles === */
#chat-prompt-container {
    position: fixed;
    bottom: 80px; /* Position above bottom nav */
    right: 25px;
    z-index: 999;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
#open-chat-button {
    background: none;
    border: none;
    color: var(--ko-primary);
    font-weight: 600;
    font-size: 0.9em;
    padding: 10px 18px;
    padding-left: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#hide-help-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5em; /* Larger 'x' */
    line-height: 1;
    padding: 10px 12px;
    padding-right: 5px;
    cursor: pointer;
    opacity: 0.7;
}
#hide-help-button:hover {
    opacity: 1;
}
/* Hiding logic from scroll */
#chat-prompt-container.bottom-nav--hidden {
    transform: translateY(150px);
}
/* Hiding logic from 'x' click */
#chat-prompt-container.chat-prompt-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}
/* === END Chat Prompt Styles === */


#chat-modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; align-items: center; justify-content: center; }
.chat-modal-overlay { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; }
.chat-modal-content { position: relative; z-index: 1001; width: 90%; max-width: 420px; height: 80%; max-height: 700px; background-color: var(--bg-card); border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; }
.chat-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.chat-modal-header h3 { margin: 0; font-size: 1.2em; color: var(--text-main); }
#close-chat-button { background: none; border: none; font-size: 24px; color: var(--text-secondary); cursor: pointer; padding: 5px; }
#chat-iframe { width: 100%; height: 100%; border: none; }
#chat-modal-container.active { display: flex; }
#chat-modal-container.active .chat-modal-overlay { opacity: 1; }
#chat-modal-container.active .chat-modal-content { transform: scale(1); opacity: 1; }

/* FOOTER STYLES */
footer {
    background-color: #0f172a;
    color: #e2e8f0;
    padding: 60px 0 20px;
    margin-top: 30px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 40px;
}
.footer-column { text-align: left; }
.footer-column h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}
.footer-column h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--ko-accent);
}
.footer-column a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-column a:hover { color: #ffffff; padding-left: 5px; }
.footer-logo {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 15px;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
}
.footer-logo span { color: var(--ko-accent); }
.footer-tagline { color: #94a3b8; line-height: 1.7; margin-bottom: 20px; }
.footer-socials a {
    color: #e2e8f0;
    font-size: 22px;
    margin-right: 20px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-socials a:hover { color: var(--ko-primary); }
.footer-bottom { border-top: 1px solid #334155; padding-top: 20px; text-align: center; }
.footer-copyright { font-size: 0.9em; color: #64748b; margin: 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* PRODUCT TAGS & CARD DETAILS */
.product-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-tag {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
}
.product-tag.type-rent { background-color: var(--ko-primary); }
.product-tag.type-sale { background-color: #6c757d; }
.product-tag.condition-new { background-color: #28a745; }
.product-tag.condition-used { background-color: var(--ko-accent); color: #212529; }
.product-card h3,
.product-card .location-name,
.product-card .seller-name {
    overflow-wrap: break-word;
    word-break: break-all;
}
.product-card .location-name {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin: -10px 15px 5px;
}
.product-card .location-name i { margin-right: 5px; color: var(--ko-primary); }
.product-card .seller-name {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin: 0 15px 10px;
}
.product-card .verified-text {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--ko-primary);
    background-color: rgba(var(--ko-primary-rgb), 0.1);
    border: 1px solid rgba(var(--ko-primary-rgb), 0.2);
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-block;
    margin: 0 15px 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .deals-carousel-wrapper.center-items {
    overflow-x: hidden;
  }
  .deals-carousel-wrapper.center-items .deals-grid {
    justify-content: center;
  }
}
.price-service span {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--text-secondary);
}
.price-service span {
  font-size: 0.8em;
  font-weight: 500;
  color: var(--text-secondary);
  display: block;
  margin-top: -5px;
}
.product-card .location-name i {
    margin-right: 5px;
    width: 1.2em;
    text-align: center;
    color: var(--ko-primary);
}

/* === BOTTOM NAV STYLES === */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background-color: var(--bg-card);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 990;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.07);
    transition: transform 0.3s ease;
}
.bottom-nav--hidden {
    transform: translateY(100%);
}
.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.75em;
    gap: 4px;
}
.bottom-nav-link i {
    font-size: 1.4em;
}
.bottom-nav-link.active {
    color: var(--ko-primary);
}
.bottom-nav-link.sell-button {
    color: var(--ko-primary);
    font-weight: 600;
}
.bottom-nav-link.sell-button i {
    font-size: 1.8em;
    background-color: var(--ko-primary);
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}
body {
    padding-bottom: 80px;
}
@media (min-width: 1024px) {
    .bottom-nav {
        display: none;
    }
    body {
        padding-bottom: 0;
    }
}
@media (max-width: 1023px) {
    .sticky-header {
        display: block;
    }
    .page-container {
        padding-top: 80px; /* 60px header + 20px space */
    }
}

/* Add this to your main CSS file (e.g., shop.css)
 */

.official-store-badge {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green */
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 5px;
}

.official-store-badge i {
    margin-right: 4px;
}
/*
 * Add this to your main shop.css file
 * This adds spacing between badges
 */

.official-store-badge,
.stock-info {
    margin-bottom: 6px;
}

/* This is the badge from your screenshot */
.official-store-badge {
    background-color: #d4edda;
    color: #155724;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}
.official-store-badge i {
    margin-right: 4px;
}

/* =========================================
   NEW SHOP LAYOUT (MOBILE-FIRST)
   ========================================= */

/* --- 1. Base Mobile Layout --- */
.shop-layout {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1-column stack */
    gap: 0;
    margin-top: 20px;
    position: relative;
}

/* Mobile: Filter Toggle Button */
.filter-toggle-container {
    display: block;
    position: sticky;
    top: 70px; /* Below header */
    z-index: 90;
    background: #fff;
    padding: 10px 0;
    margin-bottom: 15px;
}

.filter-toggle-btn {
    width: 100%;
    padding: 12px;
    background: #f0f2f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

/* Mobile: Sidebar is a hidden full-screen modal */
.sidebar-filters {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2000; /* On top of everything */
    padding: 0;
    overflow-y: hidden; /* Disable scrolling on parent */
    box-sizing: border-box;
}

/* Active state (toggled by JS) */
.sidebar-filters.active {
    display: flex; 
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Mobile Header inside Sidebar */
.mobile-only {
    display: flex;
}

.sidebar-header {
    box-sizing: border-box;
    position: sticky; 
    top: 0;
    background: #fff;
    z-index: 10;
    padding: 15px 20px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    border-bottom: 1px solid #eee;
    flex-shrink: 0; /* Don't shrink header */
}

.sidebar-header h3 {
    font-size: 20px;
    margin: 0;
}

#close-filters-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    cursor: pointer;
}

/* Mobile: Scrolling Content Area */
.sidebar-content {
    box-sizing: border-box;
    flex-grow: 1; /* Takes up all available space */
    overflow-y: auto; /* Only this part scrolls */
    padding: 0 20px;
    overflow-x: hidden;
}

/* Mobile: Apply Button at bottom */
.sidebar-footer {
    box-sizing: border-box;
    position: sticky; 
    bottom: 0;
    background: #fff;
    z-index: 10;
    padding: 15px 20px;
    margin-top: 0;
    border-top: 1px solid #eee;
    flex-shrink: 0; /* Don't shrink footer */
}

/* --- Mobile: Accordion Styles --- */

/* Hide Desktop <h3> */
.filter-group h3 {
    display: none;
}

/* Show Mobile <button> */
.filter-group-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 15px 0;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.filter-group-toggle h3 {
    display: block; /* Show <h3> inside button */
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    text-align: left;
}

.filter-group-toggle .fa-chevron-down {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    padding-left: 10px;
}

.filter-group.open .filter-group-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

.filter-group .filter-options {
    display: none; /* Hide options by default */
    padding: 15px 0 15px 10px; /* Add padding when open */
    flex-direction: column;
    gap: 10px;
}

.filter-group.open .filter-options {
    display: flex; /* Show options when .open */
}

.filter-group {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.filter-group:last-child .filter-group-toggle {
    border-bottom: none;
}


/* --- TEXT WRAP FIX (APPLIES TO MOBILE) --- */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 3px 0;
    cursor: pointer;
    font-size: 14px;
    color: #444;
}
.checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #007aff;
}
.cb-text {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0; /* THIS IS THE FIX */
    white-space: normal;
    word-break: break-all; /* More aggressive */
    overflow-wrap: break-word;
    line-height: 1.4;
}
.cb-count {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 10px;
    font-size: 12px;
    color: #888;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 12px;
}

/* =========================================
   2. Desktop Layout (Overrides mobile)
   ========================================= */

@media (min-width: 1025px) {
    
    /* Show 2-column layout */
    .shop-layout {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 40px;
    }

    /* Hide mobile filter button */
    .filter-toggle-container {
        display: none;
    }

    /* --- Desktop Sidebar --- */
    .sidebar-filters {
        display: block; /* Always show */
        position: sticky;
        top: 100px;
        height: auto; /* Override mobile */
        max-height: 85vh;
        z-index: 1;
        padding: 0 10px 0 0;
        overflow-y: auto;
        border-radius: 0;
        animation: none; /* No animation */
    }

    .mobile-only,
    .sidebar-header,
    .sidebar-footer {
        display: none; /* Hide mobile header/footer */
    }

    .sidebar-content {
        overflow-y: visible; /* No special scrolling */
        padding: 0;
    }

    /* --- Desktop Accordion (Turn off) --- */

    /* Hide accordion button */
    .filter-group-toggle {
        display: none;
    }

    /* Show desktop <h3> */
    .filter-group h3 {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 12px;
        text-transform: capitalize;
    }

    /* Always show options */
    .filter-group .filter-options {
        display: flex;
        padding: 0;
    }
    
    .filter-group {
        margin-bottom: 25px;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }
    .filter-group:last-child {
        border-bottom: none;
    }
}
/* =========================================
   CRITICAL FIXES
   ========================================= */

/* 1. Global Box Sizing (Prevents padding from breaking % widths) */
* {
    box-sizing: border-box;
}

/* 2. Enforce Mobile Sidebar Hiding */
/* Use ID selector (#) for higher specificity to override any other styles */
#sidebar-filters {
    display: none !important; 
    /* Safety measures to ensure it takes 0 space if display fails */
    width: 0;
    height: 0;
    overflow: hidden;
}

/* 3. Only show when Active (Mobile Modal) */
#sidebar-filters.active {
    display: flex !important;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Container doesn't scroll, inner content does */
}

/* 4. Masonry Grid Safety */
/* Ensure the gutter doesn't cause overflow */
.gutter-sizer {
    width: 4%;
}
#product-grid > .product-card-link {
    width: 48%;
    margin-bottom: 15px;
}

/* =========================================
   DESKTOP OVERRIDES (Min-Width: 1025px)
   ========================================= */
@media (min-width: 1025px) {
    
    /* Reset the mobile hiding rules */
    #sidebar-filters {
        display: block !important;
        width: auto;
        height: auto;
        overflow-y: auto;
    }

    /* Reset the active state (not needed on desktop) */
    #sidebar-filters.active {
        display: block !important;
        animation: none;
    }

    /* Layout Grid */
    .shop-layout {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 40px;
        align-items: start; /* Prevents sidebar from stretching full height */
    }
    
    /* Desktop Masonry Sizing */
    .gutter-sizer {
        width: 2%;
    }
    #product-grid > .product-card-link {
        width: 32%;
    }
}

@media (min-width: 1400px) {
    /* Large Screen Masonry Sizing */
    .gutter-sizer {
        width: 15px; /* Fixed pixel gutter for large screens */
    }
    #product-grid > .product-card-link {
        width: 280px; /* Fixed width for consistency */
    }
}
/* =========================================
   1. BASE LAYOUT (MOBILE DEFAULT)
   ========================================= */

/* GLOBAL FIX: This prevents padding from adding extra width */
* {
    box-sizing: border-box;
}

/* THE FIX: Use 'block', NOT 'grid' on mobile. 
   This restores your original behavior. */
.shop-layout {
    display: block; 
    width: 100%;
    margin-top: 20px;
}

/* Hide sidebar completely so it takes 0px space */
.sidebar-filters {
    display: none; 
}

/* Filter Toggle Button Container */
.filter-toggle-container {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 0 5px; /* Add slight buffer */
}

/* The Active Modal State (When you click filters) */
.sidebar-filters.active {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: #fff;
    flex-direction: column;
}

/* =========================================
   2. DESKTOP LAYOUT (Min-Width: 1025px)
   ========================================= */

@media (min-width: 1025px) {
    
    /* Only turn on Grid for Desktop */
    .shop-layout {
        display: grid;
        grid-template-columns: 250px 1fr; /* Sidebar | Content */
        gap: 40px;
        align-items: start;
    }

    .filter-toggle-container {
        display: none;
    }

    .sidebar-filters {
        display: block; /* Always visible on desktop */
        position: sticky;
        top: 100px;
        height: auto;
        border: none;
        z-index: 1;
    }
    
    /* Reset the active modal styles if window is resized */
    .sidebar-filters.active {
        position: sticky;
        z-index: 1;
        width: auto;
        height: auto;
        display: block;
    }
}
.filter-toggle-container {
    position: static !important; /* Scrolls away with the page */
    top: auto !important;        /* Removes the top gap */
    z-index: 1;                  /* Standard layering */
    margin-bottom: 15px;
}
/* Helper class to hide Home elements during search/filter */
.hidden-for-results {
    display: none !important;
}

/* =========================================
   JIJI-STYLE CATEGORY GRID
   ========================================= */

.jiji-section {
    padding: 20px 10px; /* Top/Bottom padding */
    background-color: var(--bg-main);
    overflow: hidden; /* Prevents scrollbars if animations go wide */
}

.jiji-grid {
    display: grid;
    /* Force exactly 4 columns on mobile to match Jiji */
    grid-template-columns: repeat(4, 1fr); 
    /* Spacing: 15px vertical gap, 10px horizontal gap */
    gap: 15px 10px; 
    justify-items: center; /* Centers items in their grid cells */
}

.jiji-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
    /* Touch feedback */
    transition: transform 0.1s ease, opacity 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.jiji-card:active {
    transform: scale(0.92); /* Press effect */
    opacity: 0.8;
}

/* The colored square container */
.jiji-icon-box {
    width: 58px;  /* Specific size for mobile */
    height: 58px;
    border-radius: 18px; /* "Squircle" shape (Rounded Square) */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px; /* Space between box and text */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Very subtle shadow */
    position: relative;
}

/* The icon or image inside */
.jiji-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the box */
    display: block;
}

/* The "Post Ad" Plus Icon */
.jiji-icon-box i {
    font-size: 22px;
}

/* The Category Name */
.jiji-card span {
    font-size: 12px;
    color: var(--text-main);
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
    
    /* Handle long text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 2px;
}

/* --- Dark Mode Adjustments --- */
body.dark-mode .jiji-icon-box {
    opacity: 0.85; /* Dim the bright pastel colors slightly */
    border: 1px solid rgba(255,255,255,0.1);
}
body.dark-mode .jiji-card span {
    color: #e2e8f0;
}

/* --- Desktop / Tablet Overrides --- */
@media (min-width: 768px) {
    .jiji-grid {
        /* 8 columns on desktop */
        grid-template-columns: repeat(8, 1fr); 
        gap: 25px 15px;
    }

    .jiji-icon-box {
        width: 70px; /* Larger on desktop */
        height: 70px;
    }

    .jiji-card span {
        font-size: 13px;
    }
    
    .jiji-card:hover .jiji-icon-box {
        transform: translateY(-3px); /* Hover float effect */
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }
}
/* =========================================
   ACTIVE LINK STYLES
   ========================================= */

/* --- 1. Desktop Header Active State --- */
@media (min-width: 1024px) {
    .desktop-nav .nav-link {
        position: relative;
        transition: color 0.3s ease;
    }

    .desktop-nav .nav-link.active {
        color: var(--ko-primary, #007aff);
        font-weight: 700;
    }

    /* Adds a sleek underline under the active item */
    .desktop-nav .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -5px; /* Positions it slightly below the text */
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--ko-primary, #007aff);
        border-radius: 2px;
        animation: slideIn 0.3s ease-out;
    }
}

@keyframes slideIn {
    from { width: 0; opacity: 0; }
    to { width: 100%; opacity: 1; }
}

/* --- 2. Mobile Side Drawer Active State --- */
/* Highlights the row in the side menu */
.mobile-nav .nav-link.active {
    color: var(--ko-primary, #007aff);
    background-color: rgba(0, 122, 255, 0.08); /* Very light blue bg */
    border-left: 4px solid var(--ko-primary, #007aff); /* Blue accent bar on left */
    font-weight: 600;
    padding-left: 16px; /* Offset for the border */
}

.mobile-nav .nav-link.active i {
    color: var(--ko-primary, #007aff);
}

/* --- 3. Bottom Nav Active State --- */
/* Ensures the bottom tab is blue */
.bottom-nav-link.active {
    color: var(--ko-primary, #007aff);
    font-weight: 700;
}

.bottom-nav-link.active i {
    transform: scale(1.1); /* Slightly larger icon */
    transition: transform 0.2s ease;
}

/* --- Dark Mode Support (Optional) --- */
body.dark-mode .desktop-nav .nav-link.active,
body.dark-mode .bottom-nav-link.active,
body.dark-mode .mobile-nav .nav-link.active {
    color: var(--ko-accent, #ffc107);
}

body.dark-mode .desktop-nav .nav-link.active::after {
    background-color: var(--ko-accent, #ffc107);
}

body.dark-mode .mobile-nav .nav-link.active {
    background-color: rgba(255, 193, 7, 0.1);
    border-left-color: var(--ko-accent, #ffc107);
}

/* ========================================= */
/* === FAST COLLAPSIBLE FOOTER (UPDATED) === */
/* ========================================= */

footer {
    background-color: #0f172a; /* Keep your dark theme */
    color: #e2e8f0;
    border-top: 4px solid var(--ko-primary);
    margin-top: 30px;
    /* Remove padding here so the collapse works cleanly */
    padding: 0; 
    overflow: hidden;
}

/* 1. The Header (Always Visible) */
.footer-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px; /* Large click area */
    cursor: pointer;    /* Shows hand cursor */
    border-bottom: 1px solid #334155;
    background-color: #0f172a;
    position: relative;
    z-index: 10;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}

.footer-logo span {
    color: var(--ko-accent);
}

#footer-toggle-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 10px;
}

/* 2. The Hidden Content */
#footer-collapsible-content {
    /* Start completely hidden */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* The "Instant" Feel comes from this 0.3s transition */
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    background-color: #0f172a;
}

/* 3. The Content Layout (Grid) */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 25px;
}

/* 4. The "OPEN" State (Triggered by JS) */
footer.is-open #footer-collapsible-content {
    max-height: 2000px; /* Large enough to fit all content */
    opacity: 1;
}

footer.is-open #footer-toggle-btn {
    transform: rotate(180deg); /* Spin the arrow */
}

/* Footer Links Styling */
.footer-column h3 {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--ko-accent);
    display: inline-block;
    padding-bottom: 5px;
}

.footer-column a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    margin-bottom: 10px;
    transition: padding-left 0.2s ease, color 0.2s ease;
}

.footer-column a:hover {
    color: #ffffff;
    padding-left: 5px;
}

.footer-bottom {
    border-top: 1px solid #334155;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #64748b;
}

/* 5. Desktop View (Always Open) */
@media (min-width: 1024px) {
    .footer-toggle-header {
        display: none; /* Hide the toggle button */
    }
    
    #footer-collapsible-content {
        max-height: none; /* Reset height restriction */
        opacity: 1;
        overflow: visible;
    }

    .footer-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 Columns */
        padding: 50px 15px;
        max-width: 1200px;
        margin: 0 auto;
    }
}
/* Style the wrapper to ensure elements stack correctly */
.search-input-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Keeps the falling text inside the box */
}

/* The Input needs to be transparent so we see the span, but clickable */
#search-input {
    width: 100%;
    height: 100%;
    /* Ensure padding is enough so text doesn't overlap the start too much if needed */
    padding-left: 15px; 
    background-color: transparent !important; 
}

/* The Animated Text */
#dynamic-placeholder {
    position: absolute;
    top: 50%;
    left: 15px; /* Must match input padding-left */
    transform: translateY(-50%);
    color: #888; /* Placeholder color */
    font-size: 14px; /* Adjust to match your input font size */
    pointer-events: none; /* Clicks go through to the input */
    z-index: 1; /* Sits below input */
    white-space: nowrap;
}

/* The Animation */
.animate-drop-in {
    animation: dropInFade 4s ease-in-out forwards;
}

@keyframes dropInFade {
    0% {
        opacity: 0;
        transform: translate(0, -150%); /* Start High */
    }
    10% {
        opacity: 1;
        transform: translate(0, -50%); /* Drop to Center */
    }
    90% {
        opacity: 1;
        transform: translate(0, -50%); /* Stay Center */
    }
    100% {
        opacity: 0;
        transform: translate(0, 50%); /* Fall Down */
    }
}

/* Helper class to hide placeholder when user types */
.search-input-wrapper.has-text #dynamic-placeholder {
    display: none;
}
/* 1. Ensure the parent can hold the absolute dropdown */
.search-container {
    position: relative; /* Crucial for the dropdown to stick to this box */
    display: flex;      /* Keeps input and button side-by-side */
    align-items: center;
}

/* 2. Force the suggestions to float underneath */
#search-suggestions {
    position: absolute;  /* Takes it out of the flex row */
    top: 100%;           /* Pushes it exactly to the bottom edge */
    left: 0;             /* Aligns to the left edge */
    width: 100%;         /* Makes it same width as the search bar */
    z-index: 2000;       /* Ensures it floats ON TOP of the category icons below */
    background-color: var(--bg-card); /* Matches your theme */
    border: 1px solid var(--border-color);
    border-top: none;    /* Looks connected to search bar */
    border-radius: 0 0 15px 15px; /* Rounds only bottom corners */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Adds a shadow so it 'pops' */
    overflow: hidden;
    margin-top: 5px;     /* Tiny gap for visual breathing room */
}

/* Optional: Style the items inside for better touch targets */
.suggestion-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    background: var(--bg-card);
    text-align: left; /* Ensure text is left-aligned */
    color: var(--text-main);
}

.suggestion-item:hover {
    background-color: #f0f0f0; /* Hover effect */
}
/* Hide "Show Filters & Sort" bar on Desktop (screens wider than 1024px) */
@media (min-width: 1024px) {
    #toggle-filters-btn {
        display: none !important;
    }
    
    /* In case it is wrapped in a container, hide that too */
    .filter-sort-bar,
    .mobile-filter-controls {
        display: none !important;
    }
}