/**

 * NeuraNav - Google-style clean design

 */



:root {

    --bg-primary: #ffffff;

    --bg-secondary: #f8f9fa;

    --bg-tertiary: #f1f3f4;

    --text-primary: #202124;

    --text-secondary: #5f6368;

    --text-muted: #9aa0a6;

    --border-color: #dfe1e5;

    --primary: #0891b2;

    --primary-hover: #0e7490;

    --secondary: #0891b2;

    --success: #059669;

    --warning: #d97706;

}



[data-theme="dark"] {

    --bg-primary: #202124;

    --bg-secondary: #303134;

    --bg-tertiary: #3c4043;

    --text-primary: #e8eaed;

    --text-secondary: #bdc1c6;

    --text-muted: #9aa0a6;

    --border-color: #5f6368;

}



* { margin: 0; padding: 0; box-sizing: border-box; }



body {

    font-family: arial, sans-serif;

    background: var(--bg-primary);

    color: var(--text-primary);

    min-height: 100vh;

    font-size: 14px;

}



/* UNE BAR */

.une-bar-wrapper {

    position: sticky;

    top: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    gap: 8px;

    background: var(--bg-secondary);

    padding: 8px 12px;

    border-bottom: 1px solid var(--border-color);

}



.une-nav-controls {

    display: flex;

    align-items: center;

    gap: 2px;

}



.une-nav-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--text-secondary);

    cursor: pointer;

}



.une-nav-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.une-nav-btn.bookmarked { color: var(--warning); }

.une-nav-btn i { font-size: 14px; }



.une-address-bar {

    flex: 1;

    display: flex;

    align-items: center;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: 24px;

    padding: 0 4px 0 12px;

    height: 34px;

}



.une-address-bar:focus-within { border-color: var(--primary); box-shadow: 0 1px 6px rgba(32,33,36,0.18); }



.une-security { color: var(--success); margin-right: 8px; font-size: 14px; }



.une-input {

    flex: 1;

    border: none;

    background: transparent;

    font-size: 14px;

    color: var(--text-primary);

    padding: 6px 0;

    outline: none;

    min-width: 0;

}



.une-input::placeholder { color: var(--text-muted); }



.une-go-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 26px;

    height: 26px;

    border: none;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    cursor: pointer;

    font-size: 12px;

}



.une-go-btn:hover { background: var(--primary-hover); }



.une-right-controls { display: flex; align-items: center; gap: 4px; }



.une-text-btn {

    padding: 8px 16px;

    border-radius: 4px;

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 14px;

}



.une-text-btn:hover { background: var(--bg-tertiary); }



.une-signup-btn {

    padding: 8px 16px;

    border-radius: 4px;

    background: var(--primary);

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

}



.une-signup-btn:hover { background: var(--primary-hover); }



.une-user-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    color: var(--text-secondary);

    text-decoration: none;

}



.une-user-btn:hover { background: var(--bg-tertiary); }

.une-user-btn i { font-size: 20px; }



/* MAIN */




/* SEARCH HERO - Google style */




.brand-title {

    font-size: 56px;

    font-weight: 400;

    margin-bottom: 8px;

    color: var(--text-primary);

    letter-spacing: -1px;

}



.brand-title span {

    color: var(--secondary);

}



.brand-tagline {

    font-size: 16px;

    color: var(--text-muted);

    margin-bottom: 32px;

    letter-spacing: 0.5px;

}



.search-box {

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 584px;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: 24px;

    padding: 0 16px;

    height: 46px;

    box-shadow: none;

    transition: box-shadow 0.2s;

}



.search-box:hover,

.search-box:focus-within {

    box-shadow: 0 1px 6px rgba(32,33,36,0.18);

    border-color: transparent;

}



.search-icon {

    color: var(--text-muted);

    font-size: 16px;

    margin-right: 12px;

}



.search-box input {

    flex: 1;

    border: none;

    background: transparent;

    font-size: 16px;

    color: var(--text-primary);

    outline: none;

}



.search-box input::placeholder { color: var(--text-muted); }



/* Category Pills */

.category-pills {

    display: flex;

    gap: 10px;

    margin-top: 24px;

    flex-wrap: wrap;

    justify-content: center;

}



.pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 16px;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: 20px;

    color: var(--text-secondary);

    font-size: 13px;

    cursor: pointer;

    transition: background 0.15s, border-color 0.15s;

}



.pill:hover {

    background: var(--bg-tertiary);

    border-color: var(--text-muted);

}



.pill i { font-size: 12px; }



/* Stats Grid - hidden by default on home */

.stats-grid {

    display: none;

    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

    gap: 10px;

    max-width: 800px;

    margin: 2rem auto;

    padding: 0 1rem;

}



.stat-card {

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 1rem;

    text-align: center;

    cursor: pointer;

}



.stat-card:hover { border-color: var(--primary); }



.stat-card i { font-size: 1.5rem; margin-bottom: 6px; }

.stat-card .count { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }

.stat-card .label { color: var(--text-muted); font-size: 12px; text-transform: capitalize; margin-top: 2px; }



.cat-government i, .cat-government_alias i { color: #059669; }

.cat-water i { color: #0ea5e9; }

.cat-terrain i { color: #78716c; }

.cat-hotel i { color: #f59e0b; }

.cat-farm i { color: #84cc16; }

.cat-education i { color: #3b82f6; }

.cat-church i { color: #a855f7; }

.cat-biz i { color: #0891b2; }

.cat-park i { color: #22c55e; }

.cat-infra i { color: #64748b; }

.cat-transit i { color: #0369a1; }

.cat-airport i { color: #8b5cf6; }

.cat-health i { color: #ef4444; }

.cat-memorial i { color: #6b7280; }

.cat-forest i { color: #166534; }



/* Results */

.results-container { max-width: 800px; margin: 0 auto; padding: 1rem; width: 100%; }

.results-header { margin-bottom: 1rem; padding-left: 4px; }

.results-count { color: var(--text-muted); font-size: 13px; }

.results-list { display: flex; flex-direction: column; gap: 8px; }



.result-card {

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 1rem;

    display: flex;

    gap: 12px;

    cursor: pointer;

}



.result-card:hover { border-color: var(--primary); }



.result-icon {

    width: 40px;

    height: 40px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    flex-shrink: 0;

    background: var(--bg-tertiary);

}



.result-content { flex: 1; min-width: 0; }

.result-title { font-size: 1rem; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }

.result-une { color: var(--secondary); font-family: monospace; font-size: 13px; margin-bottom: 4px; }

.result-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-muted); font-size: 12px; }

.result-meta span { display: flex; align-items: center; gap: 4px; }



/* Loading */

.loading { text-align: center; padding: 3rem; color: var(--text-muted); }

.loading i { font-size: 1.5rem; animation: spin 1s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }



/* UNE Detail */

.une-detail { max-width: 800px; margin: 0 auto; padding: 1.5rem 1rem; width: 100%; }



.une-header {

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 1.5rem;

    margin-bottom: 1rem;

}



.une-title { font-size: 1.5rem; font-weight: 500; margin-bottom: 4px; color: var(--text-primary); }

.une-domain { font-family: monospace; font-size: 14px; color: var(--secondary); margin-bottom: 1rem; }



.une-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }

.badge { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; background: var(--bg-tertiary); color: var(--text-secondary); }



.une-actions { display: flex; gap: 8px; flex-wrap: wrap; }



.btn {

    padding: 8px 16px;

    border-radius: 4px;

    border: none;

    cursor: pointer;

    font-weight: 500;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 14px;

}



.btn-primary { background: var(--primary); color: #fff; }

.btn-primary:hover { background: var(--primary-hover); }

.btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }

.btn-outline:hover { background: var(--bg-tertiary); }

.btn-claim { background: var(--success); color: #fff; }

.btn-claim:hover { background: #047857; }



.une-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }

.une-info { display: flex; flex-direction: column; gap: 1rem; }



.info-card {

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 1rem;

}



.info-card h3 {

    font-size: 11px;

    color: var(--text-muted);

    margin-bottom: 10px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.info-row {

    display: flex;

    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid var(--border-color);

    font-size: 13px;

}



.info-row:last-child { border-bottom: none; }

.info-label { color: var(--text-muted); }

.info-value { font-weight: 500; color: var(--text-primary); }



#map {

    height: 320px;

    border-radius: 8px;

    border: 1px solid var(--border-color);

}



/* Footer */

.footer {

    text-align: center;

    padding: 16px;

    color: var(--text-muted);

    font-size: 13px;

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-color);

}



/* Responsive */

@media (max-width: 900px) { .une-grid { grid-template-columns: 1fr; } }



@media (max-width: 600px) {

    .une-bar-wrapper { gap: 4px; padding: 6px 8px; }

    .une-nav-btn { width: 28px; height: 28px; }

    .une-address-bar { height: 30px; }

    .une-text-btn, .une-signup-btn { padding: 8px 16px; border-radius: 4px; color: var(--text-secondary); text-decoration: none; font-size: 14px; }

    .brand-title { font-size: 36px; }

    .brand-tagline { font-size: 14px; }

    .search-box { height: 42px; }

    .category-pills { gap: 8px; }

    .pill { padding: 6px 12px; font-size: 12px; }

}




/* STATUS BAR */

.status-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    height: 22px;

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 12px;

    font-size: 10px;

    color: #0891b2;

    z-index: 1000;

}



.status-left,

.status-right {

    display: flex;

    align-items: center;

    gap: 8px;

}



.status-item {

    display: flex;

    align-items: center;

    gap: 4px;

}



.status-divider {

    color: var(--border-color);

}



.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

}



.status-dot.online {

    background: #0891b2;

}



.status-dot.offline {

    background: #ef4444;

}



.status-bar i {

    font-size: 9px;

}



/* Adjust footer and main for status bar */

.footer {

    margin-bottom: 22px;

}




/* STATUS BAR - Updated */

.status-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    height: 24px;

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 12px;

    font-size: 12px;

    color: #0891b2;

    z-index: 1000;

}



.status-left,

.status-center,

.status-right {

    display: flex;

    align-items: center;

    gap: 8px;

}



.status-center {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

}



.status-item {

    display: flex;

    align-items: center;

    gap: 4px;

    white-space: nowrap;

}



.status-divider {

    color: var(--border-color);

    opacity: 0.6;

}



.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

}



.status-dot.online {

    background: #0891b2;

    box-shadow: 0 0 4px #0891b2;

}



.status-dot.offline {

    background: #ef4444;

    box-shadow: 0 0 4px #ef4444;

}



.status-bar i {

    font-size: 10px;

    opacity: 0.8;

}



/* Adjust footer for status bar */

.footer {

    margin-bottom: 24px;

}



/* Hide center items on small screens */

@media (max-width: 900px) {

    .status-center {

        display: none;

    }

}



@media (max-width: 600px) {

    .status-bar {

        font-size: 11px;

        padding: 0 8px;

    }

    

    #statusMemory,

    #statusRegion {

        display: none;

    }

    

    .status-left .status-divider:nth-of-type(3),

    .status-right .status-divider:first-of-type {

        display: none;

    }

}




/* SITE FOOTER */

.site-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 24px;

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-color);

    font-size: 13px;

    color: var(--text-muted);

    margin-bottom: 24px;

}



.footer-section {

    display: flex;

    align-items: center;

}



.footer-left {

    flex: 1;

    justify-content: flex-start;

}



.footer-center {

    flex: 1;

    justify-content: center;

}



.footer-right {

    flex: 1;

    justify-content: flex-end;

}



.site-footer a {

    color: var(--text-muted);

    text-decoration: none;

    padding: 4px 0;

    transition: color 0.15s;

}



.site-footer a:hover {

    color: #0891b2;

}



.footer-divider {

    color: var(--border-color);

    margin: 0 10px;

    opacity: 0.6;

}



@media (max-width: 768px) {

    .site-footer {

        flex-direction: column;

        gap: 10px;

        padding: 14px 16px;

        text-align: center;

    }

    

    .footer-left,

    .footer-center,

    .footer-right {

        flex: none;

        justify-content: center;

    }

    

    .footer-divider {

        margin: 0 8px;

    }

}



@media (max-width: 480px) {

    .site-footer {

        font-size: 12px;

    }

    

    .footer-divider {

        margin: 0 6px;

    }

}




/* OVERRIDES - Go button teal, signup matches login */

.une-go-btn {

    background: #0891b2;

}



.une-go-btn:hover {

    background: #0e7490;

}



.une-signup-btn {

    padding: 8px 16px;

    border-radius: 4px;

    background: transparent;

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 14px;

    font-weight: normal;

}



.une-signup-btn:hover {

    background: var(--bg-tertiary);

    color: var(--text-primary);

}




/* FIX: Sign Up button styling */

.une-primary-btn {

    padding: 8px 16px;

    border-radius: 4px;

    background: var(--primary);

    color: #fff !important;

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    border: none;

    cursor: pointer;

    transition: background 0.2s;

}

.une-primary-btn:hover {

    background: var(--primary-hover);

}



/* FIX: Main content padding for sticky unebar */








/* SEARCH GO BUTTON - TEAL CIRCULAR */

.search-go-btn {

    width: 40px;

    height: 40px;

    min-width: 40px;

    border-radius: 50%;

    background: #0891b2 !important;

    color: white !important;

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

    margin-left: 8px;

    flex-shrink: 0;

}



.search-go-btn:hover {

    background: #0e7490 !important;

    transform: scale(1.05);

}



.search-go-btn:active {

    transform: scale(0.95);

}



.search-go-btn i {

    font-size: 16px;

}



/* KILL BLUE AUTOFILL */

.search-box input:-webkit-autofill,

.search-box input:-webkit-autofill:hover,

.search-box input:-webkit-autofill:focus {

    -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset !important;

    -webkit-text-fill-color: var(--text-primary) !important;

}







/* FIX CONTENT BEING CUT OFF BY UNEBAR */







/* MAIN CONTENT PADDING - FINAL FIX */
.main {
    min-height: calc(100vh - 51px);
    display: flex;
    flex-direction: column;
    padding-top: 0 !important;
}

.search-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 1rem 2rem 1rem;
    min-height: 400px;
}

.search-box input {
    background: var(--bg-primary) !important;
}



/* RESULTS SEARCH BAR - Google-style top bar */

.results-search-bar {

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border-color);

    padding: 12px 0;

    position: sticky;

    top: 51px;

    z-index: 999;

}



.results-search-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    align-items: center;

    gap: 24px;

}



.results-logo {

    font-size: 22px;

    font-weight: 400;

    color: var(--text-primary);

    flex-shrink: 0;

}



.results-logo span {

    color: #0891b2;

    font-weight: 500;

}



.results-search-box {

    flex: 1;

    max-width: 600px;

    display: flex;

    align-items: center;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: 24px;

    padding: 0 16px;

    height: 44px;

}



.results-search-box:hover,

.results-search-box:focus-within {

    box-shadow: 0 1px 6px rgba(32,33,36,0.18);

}



.results-search-box i.fa-search {

    color: var(--text-muted);

    font-size: 16px;

    margin-right: 12px;

}



.results-search-box input {

    flex: 1;

    border: none;

    background: transparent;

    font-size: 16px;

    color: var(--text-primary);

    outline: none;

}



.results-search-box input:-webkit-autofill {

    -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset !important;

    -webkit-text-fill-color: var(--text-primary) !important;

}



.results-search-box .search-go-btn {

    width: 36px;

    height: 36px;

    min-width: 36px;

}



.results-nav-tabs {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    display: flex;

    gap: 8px;

    margin-top: 12px;

}



.tab-btn {

    padding: 8px 16px;

    border: none;

    background: transparent;

    color: var(--text-secondary);

    cursor: pointer;

    font-size: 14px;

    border-bottom: 2px solid transparent;

    transition: all 0.2s;

}



.tab-btn:hover {

    color: var(--text-primary);

}



.tab-btn.active {

    color: #0891b2;

    border-bottom-color: #0891b2;

}



.search-hero.hidden {

    display: none !important;

}



.stats-grid.hidden {

    display: none !important;

}



.results-container.google-style {

    max-width: 600px;

    margin: 0 auto;

    margin-left: 180px;

    padding: 1rem 1rem 1rem 0;

}



.result-card.google-style {

    border: none;

    padding: 0 0 24px 0;

    display: block;

    background: transparent;

}



.result-card.google-style:hover {

    border: none;

}



.result-card.google-style .result-title {

    font-size: 20px;

    color: #1a0dab;

    margin-bottom: 2px;

}



.result-card.google-style .result-title:hover {

    text-decoration: underline;

}



.result-card.google-style .result-une {

    color: #006621;

    font-size: 14px;

    font-family: arial, sans-serif;

    margin-bottom: 4px;

}



.result-card.google-style .result-meta {

    color: #4d5156;

    font-size: 14px;

    line-height: 1.58;

}




/* MOVE SEARCH LEFT - OVERRIDE */

.results-search-container {

    max-width: 1200px !important;

    margin: 0 !important;

    margin-left: 180px !important;

    padding: 0 20px !important;

    display: flex !important;

    align-items: center !important;

    gap: 16px !important;

    justify-content: flex-start !important;

}



.results-search-box {

    flex: 0 0 auto !important;

    width: 500px !important;

    max-width: 500px !important;

}






/* Tab links styling */

.tab-btn {

    text-decoration: none;

}



a.tab-btn {

    color: var(--text-secondary);

}



a.tab-btn:hover {

    color: var(--text-primary);

}






/* MOVE TABS LEFT TO MATCH SEARCH */

.results-nav-tabs {

    max-width: 1200px !important;

    margin: 0 !important;

    margin-left: 180px !important;

    padding: 0 20px !important;

}






/* ========================================

   PRODUCT DETAIL STYLES

   ======================================== */



.product-detail {

    max-width: 1200px;

    margin: 0 auto;

    padding: 2rem 1rem;

}



/* Commerce Buttons */

.btn-commerce {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.25rem;

    border-radius: 8px;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.2s;

}



.btn-horizonmart {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: white;

}



.btn-horizonmart:hover {

    background: linear-gradient(135deg, #d97706, #b45309);

    transform: translateY(-1px);

}



.btn-swapsphere {

    background: linear-gradient(135deg, #10b981, #059669);

    color: white;

}



.btn-swapsphere:hover {

    background: linear-gradient(135deg, #059669, #047857);

    transform: translateY(-1px);

}



/* Product Media */

.product-media {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.media-card {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    cursor: pointer;

    transition: all 0.2s;

}



.media-card:hover {

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}



.media-card:hover .media-overlay {

    opacity: 1;

}



.product-image {

    width: 100%;

    height: auto;

    max-height: 400px;

    object-fit: contain;

    display: block;

}



.media-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.5);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 1rem;

    gap: 0.5rem;

    opacity: 0;

    transition: opacity 0.2s;

}



.media-count {

    display: flex;

    gap: 1rem;

    justify-content: center;

    color: var(--text-muted, #6b7280);

    font-size: 0.875rem;

}



.media-count span {

    display: flex;

    align-items: center;

    gap: 0.35rem;

}



.media-card.no-image {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 250px;

    color: var(--text-muted, #6b7280);

}



.media-card.no-image i {

    font-size: 4rem;

    margin-bottom: 1rem;

    opacity: 0.5;

}



/* Price styling */

.info-value.price {

    font-size: 1.25rem;

    font-weight: 600;

    color: var(--success, #10b981);

}



.info-row-full {

    flex-direction: column;

    gap: 0.5rem;

}



.info-row-full .info-value {

    white-space: normal;

    line-height: 1.5;

}



/* ========================================

   ASSOCIATIONS SECTION

   ======================================== */



.associations-section {

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 1px solid var(--border-color, #e5e7eb);

}



.associations-section h2 {

    font-size: 1.5rem;

    margin-bottom: 1.5rem;

    color: var(--text-primary, #1f2937);

}



.association-group {

    margin-bottom: 1.5rem;

}



.association-group h3 {

    font-size: 1rem;

    margin-bottom: 0.75rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.association-group h3 .count {

    font-weight: normal;

    opacity: 0.7;

}



.association-scroll {

    display: flex;

    gap: 1rem;

    overflow-x: auto;

    padding-bottom: 0.5rem;

    scrollbar-width: thin;

}



.association-scroll::-webkit-scrollbar {

    height: 6px;

}



.association-scroll::-webkit-scrollbar-track {

    background: var(--bg-secondary, #f3f4f6);

    border-radius: 3px;

}



.association-scroll::-webkit-scrollbar-thumb {

    background: var(--border-color, #d1d5db);

    border-radius: 3px;

}



.association-card {

    flex: 0 0 180px;

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 8px;

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    transition: all 0.2s;

}



.association-card:hover {

    border-color: var(--primary, #14b8a6);

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    transform: translateY(-2px);

}



.association-card img {

    width: 100%;

    height: 120px;

    object-fit: contain;

    background: var(--bg-secondary, #f9fafb);

}



.association-card .no-thumb {

    width: 100%;

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--bg-secondary, #f9fafb);

    color: var(--text-muted, #9ca3af);

    font-size: 2rem;

}



.association-info {

    padding: 0.75rem;

}



.association-name {

    display: block;

    font-size: 0.8rem;

    font-weight: 500;

    line-height: 1.3;

    color: var(--text-primary, #1f2937);

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.association-id {

    display: block;

    font-size: 0.7rem;

    color: var(--text-muted, #9ca3af);

    font-family: monospace;

    margin-top: 0.25rem;

}



/* ========================================

   MEDIA VIEWER MODAL

   ======================================== */



.media-modal {

    position: fixed;

    inset: 0;

    z-index: 10000;

    background: rgba(0,0,0,0.95);

    display: flex;

    flex-direction: column;

}



.media-modal-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    max-width: 100%;

    max-height: 100%;

}



.media-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.5rem;

    background: var(--bg-primary, #fff);

    border-bottom: 1px solid var(--border-color, #e5e7eb);

}



.media-title {

    font-weight: 500;

    color: var(--text-primary, #1f2937);

}



.media-close {

    background: none;

    border: none;

    font-size: 1.5rem;

    cursor: pointer;

    color: var(--text-muted, #6b7280);

    padding: 0.5rem;

    border-radius: 50%;

    transition: all 0.2s;

}



.media-close:hover {

    background: var(--bg-secondary, #f3f4f6);

    color: var(--text-primary, #1f2937);

}



.media-modal-body {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    padding: 1rem;

    min-height: 0;

}



.media-container {

    max-width: 100%;

    max-height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.media-container img {

    max-width: 90vw;

    max-height: 70vh;

    object-fit: contain;

}



.media-container iframe {

    width: 90vw;

    height: 70vh;

    border: none;

}



.media-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(255,255,255,0.9);

    border: none;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 1.25rem;

    color: var(--text-primary, #1f2937);

    transition: all 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}



.media-nav:hover {

    background: white;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}



.media-prev { left: 1rem; }

.media-next { right: 1rem; }



.media-modal-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.5rem;

    background: var(--bg-primary, #fff);

    border-top: 1px solid var(--border-color, #e5e7eb);

    flex-wrap: wrap;

    gap: 1rem;

}



.media-dots {

    display: flex;

    gap: 0.5rem;

    align-items: center;

}



.media-dots .dot {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: var(--bg-secondary, #f3f4f6);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s;

    font-size: 0.75rem;

    color: var(--text-muted, #6b7280);

}



.media-dots .dot:hover {

    background: var(--border-color, #e5e7eb);

}



.media-dots .dot.active {

    background: var(--primary, #14b8a6);

    color: white;

}



.media-info {

    display: flex;

    gap: 1rem;

    color: var(--text-muted, #6b7280);

    font-size: 0.875rem;

}



.btn-sm {

    padding: 0.5rem 1rem;

    font-size: 0.875rem;

}



/* 3D Viewer Placeholder */

.viewer-3d-placeholder {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    color: white;

    text-align: center;

}



.viewer-3d-placeholder i {

    font-size: 4rem;

    opacity: 0.7;

}



/* Dark mode support */

[data-theme="dark"] .media-modal-header,

[data-theme="dark"] .media-modal-footer {

    background: #1f2937;

    border-color: #374151;

}



[data-theme="dark"] .media-nav {

    background: rgba(31, 41, 55, 0.9);

    color: #f9fafb;

}



[data-theme="dark"] .media-nav:hover {

    background: #374151;

}



[data-theme="dark"] .media-dots .dot {

    background: #374151;

    color: #9ca3af;

}



[data-theme="dark"] .media-dots .dot.active {

    background: var(--primary, #14b8a6);

    color: white;

}



[data-theme="dark"] .media-close {

    color: #9ca3af;

}



[data-theme="dark"] .media-close:hover {

    background: #374151;

    color: #f9fafb;

}




/* ========================================




/* ========================================

   RESULT CARDS

   ======================================== */



.result-card {

    display: flex;

    padding: 1rem;

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.2s;

    margin-bottom: 0.75rem;

}



.result-card:hover {

    border-color: var(--primary, #14b8a6);

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}



/* Product card - content left, image right */

.result-card-product {

    flex-direction: row;

    align-items: flex-start;

    gap: 1rem;

}



.result-card-product .result-content {

    flex: 1;

    min-width: 0;

    order: 1;

}



.result-card-product .result-thumb-right {

    flex: 0 0 120px;

    order: 2;

}



.result-card-product .result-thumb-right img {

    max-width: 120px;

    max-height: 90px;

    object-fit: contain;

    border-radius: 8px;

}



/* UNE card - icon left, content right */

.result-card-une {

    flex-direction: row;

    align-items: flex-start;

    gap: 1rem;

}



.result-card-une .result-icon {

    flex: 0 0 48px;

    height: 48px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

}



/* Content styles */

.result-content {

    flex: 1;

    min-width: 0;

}



.result-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 1rem;

}



.result-title {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--link-color, #1a0dab);

    line-height: 1.3;

}



.result-price {

    font-size: 1rem;

    font-weight: 600;

    color: var(--success, #10b981);

    white-space: nowrap;

}



.result-neural-id, .result-une {

    font-family: monospace;

    font-size: 0.85rem;

    color: var(--primary, #14b8a6);

    margin: 0.15rem 0 0.25rem 0;

}



.result-desc {

    font-size: 0.85rem;

    color: var(--text-muted, #6b7280);

    margin: 0.25rem 0;

    line-height: 1.4;

}



.result-meta, .result-meta-sm {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    color: var(--text-muted, #6b7280);

    margin-top: 0.25rem;

}



.result-meta { font-size: 0.8rem; }

.result-meta-sm { font-size: 0.7rem; }



.result-meta span, .result-meta-sm span {

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

}



.result-badge {

    padding: 0.2rem 0.5rem;

    border-radius: 4px;

    font-weight: 500;

}



.result-meta-sm .result-badge {

    font-size: 0.65rem;

    padding: 0.15rem 0.4rem;

}



.result-badge.product { background: rgba(245, 158, 11, 0.15); color: #d97706; }

.result-badge.government { background: rgba(5, 150, 105, 0.15); color: #059669; }

.result-badge.biz { background: rgba(8, 145, 178, 0.15); color: #0891b2; }

.result-badge.hotel { background: rgba(245, 158, 11, 0.15); color: #d97706; }



.result-dates {

    margin-top: 0.4rem;

    font-size: 0.7rem;

    color: var(--text-muted, #9ca3af);

}



/* Responsive */

@media (max-width: 600px) {

    .result-card-product {

        flex-direction: column-reverse;

    }

    .result-card-product .result-thumb-right {

        width: 100%;

        max-width: none;

    }

    .result-card-product .result-thumb-right img {

        max-width: 100%;

        max-height: 150px;

    }

}



/* Dark mode */

[data-theme="dark"] .result-card {

    background: #1f2937;

    border-color: #374151;

}

[data-theme="dark"] .result-title {

    color: #60a5fa;

}




/* Dark mode result titles - MUST be readable */

[data-theme="dark"] .result-title {

    color: #60a5fa !important;

}



[data-theme="dark"] .result-title:hover {

    color: #93c5fd !important;

}



[data-theme="dark"] .result-neural-id,

[data-theme="dark"] .result-une {

    color: #2dd4bf !important;

}




/* ========================================

   PRODUCT MEDIA GALLERY

   ======================================== */



.product-media {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.media-main {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    background: var(--bg-secondary, #f9fafb);

    cursor: pointer;

    border: 1px solid var(--border-color, #e5e7eb);

}



.media-main:hover .media-overlay {

    opacity: 1;

}



.product-image-main {

    width: 100%;

    max-height: 400px;

    object-fit: contain;

    display: block;

}



.media-main.no-image {

    min-height: 200px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--text-muted);

}



.media-main.no-image i {

    font-size: 3rem;

    margin-bottom: 0.5rem;

    opacity: 0.5;

}



.media-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.6);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    font-size: 1rem;

    opacity: 0;

    transition: opacity 0.2s;

}



/* Media Gallery */

.media-gallery {

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 12px;

    padding: 1rem;

}



.media-gallery h4 {

    margin: 0 0 0.75rem 0;

    font-size: 0.9rem;

    color: var(--text-primary);

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.media-thumbs {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

    gap: 0.5rem;

}



.media-thumb {

    position: relative;

    aspect-ratio: 1;

    border-radius: 8px;

    overflow: hidden;

    cursor: pointer;

    background: var(--bg-secondary, #f3f4f6);

    border: 2px solid transparent;

    transition: all 0.2s;

}



.media-thumb:hover {

    border-color: var(--primary, #14b8a6);

    transform: scale(1.05);

}



.media-thumb.primary {

    border-color: var(--warning, #f59e0b);

}



.media-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.thumb-icon {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

}



.thumb-icon.pdf {

    background: rgba(239, 68, 68, 0.1);

    color: #ef4444;

}



.thumb-icon.model {

    background: rgba(59, 130, 246, 0.1);

    color: #3b82f6;

}



.thumb-icon.file {

    background: rgba(107, 114, 128, 0.1);

    color: #6b7280;

}



.primary-badge {

    position: absolute;

    top: 4px;

    right: 4px;

    background: var(--warning, #f59e0b);

    color: white;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.6rem;

}



/* Dark mode */

[data-theme="dark"] .media-gallery {

    background: #1f2937;

    border-color: #374151;

}



[data-theme="dark"] .media-thumb {

    background: #374151;

}



[data-theme="dark"] .media-main {

    background: #374151;

    border-color: #4b5563;

}




/* Pricing - best price styling */

.info-value.price-best {

    font-weight: 600;

    color: var(--success, #10b981);

}




/* Fits These Models section */

.fits-section h2 {

    color: var(--primary, #14b8a6);

}



.fits-section h2 i {

    margin-right: 0.5rem;

}



.fits-card {

    border: 2px solid var(--primary, #14b8a6) !important;

}



.fits-card:hover {

    background: rgba(20, 184, 166, 0.1);

}




/* ========================================

   CATEGORY DISCOVERY CARDS

   ======================================== */



.relation-type-section {

    margin-bottom: 2rem;

}



.relation-type-section h2 {

    margin-bottom: 1rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.relation-type-section h2 .count {

    font-weight: 400;

    opacity: 0.7;

}



.category-cards-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

    gap: 1rem;

}



.category-card {

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 12px;

    padding: 1rem;

    transition: all 0.2s;

    cursor: pointer;

}



.category-card:hover {

    border-color: var(--primary, #14b8a6);

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);

    transform: translateY(-2px);

}



.category-card-header {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 0.75rem;

    font-weight: 600;

    color: var(--text-primary);

}



.category-card-header i {

    color: var(--primary, #14b8a6);

    font-size: 1.1rem;

}



.category-card-preview {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.5rem;

    margin-bottom: 0.75rem;

}



.preview-thumb {

    aspect-ratio: 1;

    background: var(--bg-secondary, #f3f4f6);

    border-radius: 8px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}



.preview-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.preview-thumb i {

    color: var(--text-muted);

    font-size: 1.5rem;

}



.category-card-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.item-count {

    font-size: 0.85rem;

    color: var(--text-muted);

}



.explore-btn {

    background: var(--primary, #14b8a6);

    color: white;

    border: none;

    padding: 0.4rem 0.75rem;

    border-radius: 6px;

    font-size: 0.85rem;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 0.3rem;

    transition: background 0.2s;

}



.explore-btn:hover {

    background: var(--primary-dark, #0d9488);

}



/* Category Explorer Modal */

.category-modal {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.7);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1000;

    padding: 2rem;

}



.category-modal-content {

    background: var(--card-bg, #fff);

    border-radius: 16px;

    width: 100%;

    max-width: 900px;

    max-height: 80vh;

    display: flex;

    flex-direction: column;

}



.category-modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem 1.5rem;

    border-bottom: 1px solid var(--border-color, #e5e7eb);

}



.category-modal-header h3 {

    margin: 0;

    font-size: 1.25rem;

}



.modal-close {

    background: none;

    border: none;

    font-size: 1.25rem;

    cursor: pointer;

    color: var(--text-muted);

    padding: 0.5rem;

}



.modal-close:hover {

    color: var(--text-primary);

}



.category-modal-body {

    padding: 1.5rem;

    overflow-y: auto;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

    gap: 1rem;

}



.explorer-item {

    background: var(--bg-secondary, #f9fafb);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 10px;

    padding: 0.75rem;

    text-decoration: none;

    transition: all 0.2s;

}



.explorer-item:hover {

    border-color: var(--primary);

    transform: translateY(-2px);

}



.explorer-thumb {

    aspect-ratio: 1;

    background: white;

    border-radius: 8px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 0.5rem;

}



.explorer-thumb img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.explorer-thumb i {

    font-size: 2rem;

    color: var(--text-muted);

}



.explorer-info {

    display: flex;

    flex-direction: column;

}



.explorer-name {

    font-size: 0.85rem;

    font-weight: 500;

    color: var(--text-primary);

    line-height: 1.3;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.explorer-id {

    font-size: 0.75rem;

    color: var(--primary);

    font-family: monospace;

}



/* Dark mode */

[data-theme="dark"] .category-card {

    background: #1f2937;

    border-color: #374151;

}



[data-theme="dark"] .preview-thumb {

    background: #374151;

}



[data-theme="dark"] .category-modal-content {

    background: #1f2937;

}



[data-theme="dark"] .category-modal-header {

    border-color: #374151;

}



[data-theme="dark"] .explorer-item {

    background: #374151;

    border-color: #4b5563;

}



[data-theme="dark"] .explorer-thumb {

    background: #1f2937;

}




/* ========================================

   PRODUCT DETAIL - NEW LAYOUT

   ======================================== */



.product-header-card {

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 16px;

    padding: 1.5rem;

    margin-bottom: 1.5rem;

}



.product-header-main {

    text-align: center;

    padding-bottom: 1rem;

}



.product-title {

    font-size: 1.35rem;

    font-weight: 500;

    margin: 0 0 0.25rem 0;

    max-width: none;

    color: var(--text-primary);

}



.product-une {

    font-family: monospace;

    color: var(--primary, #14b8a6);

    font-size: 0.95rem;

    margin-bottom: 0.75rem;

}



.product-badges {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-bottom: 1rem;

}



.back-link {

    color: var(--text-muted);

    text-decoration: none;

    font-size: 0.9rem;

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

    transition: color 0.2s;

}



.back-link:hover {

    color: var(--primary);

}



.product-header-footer {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.5rem;

    padding-top: 1rem;

    border-top: 1px solid var(--border-color, #e5e7eb);

    font-size: 0.85rem;

    color: var(--text-muted);

}



.meta-item {

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

}



.meta-item i {

    font-size: 0.8rem;

}



.meta-dot {

    color: var(--border-color);

}



.meta-item.verified {

    color: var(--success, #10b981);

}



.origin-link {

    color: var(--primary);

    text-decoration: none;

    font-family: monospace;

}



.origin-link:hover {

    text-decoration: underline;

}



/* Product Grid */

.product-grid {

    display: grid;

    grid-template-columns: 1fr 380px;

    gap: 1.5rem;

    margin-bottom: 2rem;

}



@media (max-width: 900px) {

    .product-grid {

        grid-template-columns: 1fr;

    }

}



.product-info-column {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.product-right-column {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



/* Commerce Card */

.commerce-card {

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 12px;

    padding: 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.commerce-card .btn {

    width: 100%;

    justify-content: center;

    padding: 0.75rem 1rem;

    font-size: 1rem;

}



.commerce-price {

    text-align: center;

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--success, #10b981);

    padding-top: 0.5rem;

    border-top: 1px solid var(--border-color);

}



/* Media Card Wrapper */

.media-card-wrapper {

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 12px;

    padding: 1rem;

}



/* Dark mode */

[data-theme="dark"] .product-header-card {

    background: #1f2937;

    border-color: #374151;

}



[data-theme="dark"] .product-header-footer {

    border-color: #374151;

}



[data-theme="dark"] .commerce-card {

    background: #1f2937;

    border-color: #374151;

}



[data-theme="dark"] .commerce-price {

    border-color: #374151;

}



[data-theme="dark"] .media-card-wrapper {

    background: #1f2937;

    border-color: #374151;

}




/* ========================================

   NI SEARCH BAR

   ======================================== */



.ni-search-wrapper {

    background: var(--bg-secondary, #f3f4f6);

    padding: 0.75rem 1rem;

    border-bottom: 1px solid var(--border-color, #e5e7eb);

}



.ni-search-bar {

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

}



.ni-search-input {

    width: 100%;

    padding: 0.75rem 1rem 0.75rem 2.5rem;

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 8px;

    font-size: 1rem;

    background: var(--card-bg, #fff);

    color: var(--text-primary);

    outline: none;

    transition: border-color 0.2s, box-shadow 0.2s;

}



.ni-search-input:focus {

    border-color: var(--primary, #14b8a6);

    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);

}



.ni-search-icon {

    position: absolute;

    left: 0.85rem;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-muted);

    pointer-events: none;

}



.ni-search-dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: var(--card-bg, #fff);

    border: 1px solid var(--border-color, #e5e7eb);

    border-radius: 8px;

    margin-top: 4px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

    z-index: 100;

    display: none;

    max-height: 400px;

    overflow-y: auto;

}



.ni-search-result {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 1rem;

    text-decoration: none;

    border-bottom: 1px solid var(--border-color, #e5e7eb);

    transition: background 0.15s;

}



.ni-search-result:last-child {

    border-bottom: none;

}



.ni-search-result:hover {

    background: var(--bg-secondary, #f9fafb);

}



.ni-result-thumb {

    width: 48px;

    height: 48px;

    background: var(--bg-secondary, #f3f4f6);

    border-radius: 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

}



.ni-result-thumb img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.ni-result-thumb i {

    color: var(--text-muted);

    font-size: 1.25rem;

}



.ni-result-info {

    display: flex;

    flex-direction: column;

    min-width: 0;

}



.ni-result-name {

    font-weight: 500;

    color: var(--text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.ni-result-meta {

    font-size: 0.8rem;

    color: var(--text-muted);

}



.ni-see-all {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    padding: 0.75rem;

    background: var(--bg-secondary, #f9fafb);

    color: var(--primary, #14b8a6);

    text-decoration: none;

    font-weight: 500;

    border-top: 1px solid var(--border-color);

}



.ni-see-all:hover {

    background: var(--primary, #14b8a6);

    color: white;

}



.ni-no-results {

    padding: 1rem;

    text-align: center;

    color: var(--text-muted);

}



/* Header updates */

.product-header-main {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding-bottom: 1rem;

}



.product-header-left {

    text-align: left;

}



.product-header-right {

    text-align: right;

}



.mfr-brand-box {

    background: var(--bg-secondary, #f3f4f6);

    padding: 1rem 1.5rem;

    border-radius: 10px;

    border: 1px solid var(--border-color);

}



.mfr-brand-name {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text-primary);

}



.product-title {

    text-align: left;

}



.product-une {

    text-align: left;

    margin-bottom: 0.5rem;

}



.product-badges {

    justify-content: flex-start;

}



.meta-divider {

    color: var(--border-color);

    margin: 0 0.25rem;

}



.meta-price {

    font-weight: 600;

    color: var(--success, #10b981);

}



/* Commerce card inline */

.commerce-card {

    flex-direction: row;

    gap: 0.75rem;

}



.commerce-card .btn {

    flex: 1;

    padding: 0.6rem 1rem;

    font-size: 0.9rem;

}



/* Dark mode */

[data-theme="dark"] .ni-search-wrapper {

    background: #111827;

}



[data-theme="dark"] .ni-search-input {

    background: #1f2937;

    border-color: #374151;

}



[data-theme="dark"] .ni-search-dropdown {

    background: #1f2937;

    border-color: #374151;

}



[data-theme="dark"] .ni-search-result:hover {

    background: #374151;

}



[data-theme="dark"] .ni-result-thumb {

    background: #374151;

}



[data-theme="dark"] .ni-see-all {

    background: #374151;

}



[data-theme="dark"] .mfr-brand-box {

    background: #374151;

    border-color: #4b5563;

}




/* Manufacturer Logo */

.mfr-logo {

    display: block;

    max-width: 200px;

    max-height: 120px;

    width: auto;

    height: auto;

}



}