/* ── MOBILE SEARCH BAR (below header, not sticky) ── */
.mob-search-wrap{
    display:none; /* hidden on desktop */
}

@media(max-width:768px){

/* ── HEADER: logo + LUXURIATE + whatsapp only (sticky) ── */
.header{
    padding:10px 0;
    position:sticky;
    top:0;
    z-index:1000;
}

.header-inner{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:94%;
    margin:0 auto;
}

/* LOGO — stay in one row, not full width */
.logo-box{
    display:flex;
    align-items:center;
    gap:6px;
    flex:1 1 auto;
    width:auto !important;       /* override style.css width:100% */
    justify-content:flex-start !important;
}

.logo-box img{
    width:36px;
    height:36px;
}

/* BRAND NAME — show LUXURIATE on mobile */
.brand-name{
    display:inline !important;
    font-size:15px;
    letter-spacing:1.2px;
    color:var(--green);
}

/* HIDE desktop search inside header on mobile */
.desk-search{
    display:none !important;
}

/* WHATSAPP — right-aligned, compact, number visible */
.contact-box{
    width:auto !important;       /* override style.css width:100% */
    flex-shrink:0;
    margin-left:auto;
}
.contact-box a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;  /* override style.css justify-content:center */
    gap:4px !important;
    padding:6px 10px !important;
    font-size:11px !important;
    box-shadow:none !important;
    width:auto !important;
}
.contact-box a i{
    font-size:14px !important;
}
.contact-box span{
    font-size:11px !important;
    white-space:nowrap;
}

/* ── MOBILE SEARCH BAR — below header, NOT sticky ── */
.mob-search-wrap{
    display:block;
    width:100%;
    background:#fff;
    border-bottom:1px solid var(--border);
    padding:8px 14px;
    position:relative;
    z-index:999;
    box-shadow:0 3px 10px rgba(0,0,0,0.07);
}

.mob-search-bar{
    display:flex;
    align-items:center;
    width:100%;
    background:#f7f4ef;
    border:1px solid var(--border);
    border-radius:50px;
    overflow:visible;
    height:40px;
    position:relative;
}

.mob-search-bar input{
    flex:1;
    min-width:0;
    padding:0 14px;
    font-size:13px;
    border:none;
    outline:none;
    background:transparent;
    height:100%;
    color:#1a2e1e;
}

.mob-search-bar input::placeholder{
    color:#aaa;
    font-size:12.5px;
}

#mobSearchBtn{
    width:40px;
    height:40px;
    flex-shrink:0;
    border:none;
    background:var(--gold);
    border-radius:0 50px 50px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

#mobSearchBtn i{
    font-size:13px;
    color:#fff;
}

/* dropdown for mobile search */
#mobSearchResults{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    width:100%;
}

/* CATEGORY */
.cat-wrapper{
    justify-content:flex-start;
    overflow-x:auto;
    gap:15px;
}

}

/* ================= HERO ================= */