/* ABUJA MARKETPLACE HOME — CONTENT ONLY */
/* Header and normal application bottom navigation are intentionally untouched. */

.abh{
    --green:#086747;
    --dark:#18201c;
    --muted:#6e7671;
    --border:#e3e7e4;
    --gold:#d7a52d;

    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:12px 16px 100px;
    color:var(--dark);
    background:#fff;
    box-sizing:border-box;
}

.abh *{
    box-sizing:border-box;
}


/* SEARCH */

.abh-search{
    position:relative;
    margin:0 0 12px;
}

.abh-search i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:21px;
    color:#29362f;
    pointer-events:none;
}

.abh-search input{
    width:100%;
    height:51px;
    padding:0 16px 0 46px;
    border:1px solid #dce1de;
    border-radius:12px;
    background:#fff;
    color:var(--dark);
    font-size:14px;
    outline:none;
}

.abh-search input::placeholder{
    color:#808782;
}


/* HERO */

.abh-hero{
    position:relative;
    min-height:178px;
    overflow:hidden;
    padding:19px 17px;
    border:1px solid #e9eadf;
    border-radius:15px;
    background:
        radial-gradient(circle at 82% 18%,rgba(218,176,54,.17) 0 20px,transparent 21px),
        linear-gradient(115deg,#fffdf5 0%,#eef6eb 100%);
}

.abh-hero-copy{
    position:relative;
    z-index:2;
    width:64%;
}

.abh-kicker{
    color:var(--green);
    font-size:9px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.abh-hero h1{
    margin:5px 0 4px;
    color:var(--dark);
    font-size:25px;
    line-height:1.04;
    font-weight:850;
    letter-spacing:-.04em;
}

.abh-hero p{
    margin:0 0 11px;
    max-width:300px;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}

.abh-hero-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.abh-primary,
.abh-seller-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:37px;
    padding:8px 12px;
    border-radius:8px;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
}

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

.abh-secondary{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--green);
    font-size:10px;
    font-weight:750;
    text-decoration:none;
}

.abh-hero-art{
    position:absolute;
    right:8px;
    bottom:-5px;
    width:145px;
    height:125px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    color:var(--green);
    font-size:92px;
    opacity:.93;
}


/* SECTIONS */

.abh-section{
    margin-top:15px;
}

.abh-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.abh-section h2,
.abh-how h2{
    margin:0;
    color:var(--dark);
    font-size:18px;
    line-height:1.1;
    font-weight:850;
    letter-spacing:-.025em;
}

.abh-view-all{
    color:var(--green);
    font-size:10px;
    font-weight:750;
    text-decoration:none;
}


/* POPULAR CATEGORIES */

.abh-categories{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.abh-category{
    height:82px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:11px;
    color:#313b35;
    text-decoration:none;
    text-align:center;
}

.abh-category i{
    font-size:27px;
    color:var(--green);
}

.abh-category span{
    font-size:10px;
    line-height:1;
}

.abh-green{background:#edf7f2;}
.abh-gold{background:#fff7df;}
.abh-rose{background:#fbeff0;}
.abh-gray{background:#eff2f1;}

.abh-gold i{color:#c18f12;}
.abh-rose i{color:#b94e56;}


/* LOCATIONS */

.abh-location-title h2{
    margin:0;
    color:var(--dark);
    font-size:18px;
    line-height:1.05;
    font-weight:850;
}

.abh-location-title p{
    margin:2px 0 8px;
    color:var(--muted);
    font-size:10px;
}

.abh-locations{
    display:flex;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
}

.abh-locations::-webkit-scrollbar{
    display:none;
}

.abh-locations a{
    flex:0 0 auto;
    min-height:35px;
    padding:7px 10px;
    display:flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
    color:#333c37;
    font-size:9px;
    text-decoration:none;
}

.abh-locations i{
    margin-right:4px;
    color:var(--green);
}


/* SELLER BANNER */

.abh-seller{
    position:relative;
    min-height:145px;
    margin-top:15px;
    overflow:hidden;
    padding:17px;
    border-radius:14px;
    background:#096443;
    color:#fff;
}

.abh-seller-copy{
    position:relative;
    z-index:2;
    width:68%;
}

.abh-seller-kicker{
    color:#dfb347;
    font-size:8px;
    font-weight:850;
    letter-spacing:.13em;
}

.abh-seller h2{
    margin:5px 0 3px;
    color:#fff;
    font-size:22px;
    line-height:1.05;
    font-weight:850;
}

.abh-seller p{
    margin:0 0 10px;
    color:#edf4f1;
    font-size:10px;
}

.abh-seller-button{
    background:#dfb13d;
    color:#173127;
}

.abh-shop{
    position:absolute;
    right:14px;
    bottom:2px;
    color:#e5ba4c;
    font-size:82px;
}


/* HOW IT WORKS */

.abh-how{
    margin-top:15px;
}

.abh-how-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin-top:8px;
}

.abh-how-card{
    min-height:101px;
    padding:8px 6px;
    border:1px solid var(--border);
    border-radius:11px;
    background:#fff;
    text-align:center;
}

.abh-num{
    width:21px;
    height:21px;
    margin:0 auto 3px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#edf7f2;
    color:var(--green);
    font-size:8px;
    font-weight:850;
}

.abh-how-card:nth-child(2) .abh-num{
    background:#fff7df;
    color:#b98912;
}

.abh-how-card:nth-child(3) .abh-num{
    background:#fbeff0;
    color:#b84e55;
}

.abh-how-card > i{
    font-size:21px;
    color:var(--green);
}

.abh-how-card strong{
    display:block;
    margin-top:3px;
    color:var(--dark);
    font-size:9px;
    line-height:1.15;
}

.abh-how-card p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:7px;
    line-height:1.25;
}


/* TRUST STRIP */

.abh-trust{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:8px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:10px;
    background:#fff;
}

.abh-trust-item{
    min-width:0;
    padding:8px 6px;
    display:flex;
    align-items:flex-start;
    gap:5px;
    border-right:1px solid var(--border);
}

.abh-trust-item:last-child{
    border-right:0;
}

.abh-trust-item > i{
    flex:0 0 auto;
    color:var(--green);
    font-size:17px;
}

.abh-trust-item strong{
    display:block;
    color:var(--dark);
    font-size:7.5px;
    line-height:1.1;
}

.abh-trust-item small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:6.3px;
    line-height:1.2;
}


/* MOBILE REFERENCE */

@media(max-width:767px){

    .abh{
        padding:
            10px
            15px
            92px;
    }

    .abh-search{
        margin-bottom:11px;
    }

    .abh-search input{
        height:49px;
        font-size:13px;
    }

    .abh-hero{
        min-height:170px;
        padding:16px 14px;
    }

    .abh-hero h1{
        font-size:22px;
    }

    .abh-hero p{
        font-size:10px;
    }

    .abh-hero-art{
        font-size:84px;
    }

    .abh-category{
        height:78px;
    }

    .abh-location-title h2,
    .abh-section h2,
    .abh-how h2{
        font-size:16px;
    }

    .abh-seller{
        min-height:135px;
        padding:15px;
    }

    .abh-seller h2{
        font-size:20px;
    }

    .abh-shop{
        font-size:73px;
    }

    .abh-how-card{
        min-height:94px;
    }
}


/* Hide only the large standard footer on this homepage.
   THE MOBILE NAVIGATION IS NOT TARGETED HERE. */
body.abh-home-active .am-footer,
body.abh-home-active .am-catalog-mobile-footer{
    display:none !important;
}

/* Hide the layout's separate search only on Home.
   This avoids the two-search-bar problem. */
body.abh-home-active .am-search{
    display:none !important;
}

/* Restore our own search because it is not .am-search anyway. */