body{
    font-family: 'Segoe UI', sans-serif;
    background-color: #FAF7F2;
    color: #2D2D2D;
}




.navbar{
    background-color: #FFFFFF !important;
}

.navbar-brand{
    font-size: 30px;
    font-weight: 700;
    color: #5C4033 !important;
}

.btn-brown{
    background-color: #5C4033;
    color: white;
    border: none;
}

.btn-brown:hover{
    background-color: #4a3328;
    color: white;
}

.hero-section class="py-5 hero-section{
    background-color: #F5F0E8;
}

.section-title{
    font-weight: 700;
    margin-bottom: 40px;
}

.card{
    border: none;
    transition: 0.3s;
}

.card:hover{
    transform: translateY(-5px);
}

.card img{
    height: 250px;
    object-fit: cover;
}

.top-social a{
    color:#fff;
    margin-right:15px;
    font-size:18px;
    text-decoration:none;
}

.top-social a:hover{
    opacity:0.7;
}

/* TOP BAR */
.topbar-wrapper {
    font-size: 14px;
}

.topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* LEFT */
.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.topbar-socials {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-socials a {
    color: #fff;
    text-decoration: none;           /* removes underline */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.topbar-socials a:hover {
    background: #f0a500;
    border-color: #f0a500;
    color: #212529;
}

.topbar-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
}

.topbar-phone {
    color: #ccc;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* RIGHT */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.topbar-right a {
    color: #fff;
    text-decoration: none;           /* removes underline */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}

.topbar-right a:hover {
    color: #f0a500;
}

.topbar-badge {
    background: #dc3545;
    color: #fff;
    border-radius: 50px;
    font-size: 11px;
    padding: 1px 6px;
    line-height: 1.4;
}

/* MOBILE: hide left side, center right side */
@media (max-width: 767px) {
    .topbar-left {
        display: none !important;
    }

    .topbar-row {
        justify-content: center;
    }

    .topbar-right {
        justify-content: center;
        gap: 12px;
    }
}

.search-wrapper{
position:relative;
flex:1;
}

#searchSuggestions{
position:absolute;
top:100%;
left:0;
right:0;
background:#fff;
border-radius:12px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
display:none;
z-index:9999;
max-height:450px;
overflow-y:auto;
}

.search-product{
display:flex;
align-items:center;
padding:12px;
text-decoration:none;
color:#222;
border-bottom:1px solid #eee;
transition:.2s;
}

.search-product:hover{
background:#f8f9fa;
}

.search-product img{
width:70px;
height:70px;
object-fit:cover;
border-radius:8px;
margin-right:15px;
flex-shrink:0;
}

.search-info{
flex:1;
}

.search-name{
font-weight:600;
font-size:15px;
}

.search-category{
font-size:13px;
color:#888;
margin:4px 0;
}

.search-price del{
color:#999;
font-size:13px;
}

.search-sale{
font-weight:bold;
color:#dc3545;
margin-left:8px;
}

.featured-badge{
background:#ffc107;
color:#000;
padding:2px 8px;
font-size:11px;
border-radius:20px;
margin-left:8px;
}
.fh-brand {
    color: #004643 !important;
}