/*
|--------------------------------------------------------------------------
| Abuja Marketplace — All Categories
|--------------------------------------------------------------------------
| Styles category content only.
| Shared header and bottom navigation are NOT modified.
|--------------------------------------------------------------------------
*/

body.am-categories-final{
    background:#fbfcfa;
}

/* remove only the layout's global search/footer on this page */
body.am-categories-final .am-search{
    display:none !important;
}

body.am-categories-final .am-footer,
body.am-categories-final .am-catalog-mobile-footer{
    display:none !important;
}


/* PAGE */

body.am-categories-final .aml-page{
    width:100%;
    max-width:760px;

    margin:0 auto;

    padding:
        20px
        22px
        105px;

    color:#17201b;
}


/* HEADER */

.amcd-head{
    margin:0 0 15px;
}

.amcd-head .aml-eyebrow{
    margin-bottom:7px;

    color:#176c50;

    font-size:11px;
    line-height:1;

    font-weight:800;

    letter-spacing:.16em;

    text-transform:uppercase;
}

.amcd-head h1{
    margin:0 0 5px;

    color:#17201b;

    font-size:35px;
    line-height:1;

    font-weight:850;

    letter-spacing:-.045em;
}

.amcd-head .aml-section-copy{
    margin:0;

    color:#747b77;

    font-size:15px;
    line-height:1.35;
}


/* SEARCH */

body.am-categories-final .aml-search{
    position:relative;

    display:block !important;

    margin:0 0 17px;
}

body.am-categories-final .aml-search > i{
    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    z-index:2;

    color:#27332d;

    font-size:22px;
}

body.am-categories-final .aml-search input{
    width:100%;
    height:55px;

    padding:0 46px;

    border:1px solid #dfe3e0;
    border-radius:12px;

    background:#fff;

    color:#17201b;

    font-size:15px;

    outline:none;
}

body.am-categories-final .aml-search input::placeholder{
    color:#858b87;
}

body.am-categories-final .aml-search-clear{
    position:absolute;

    right:8px;
    top:50%;

    transform:translateY(-50%);

    width:36px;
    height:36px;

    border:0;

    background:transparent;

    display:none;
    place-items:center;
}

body.am-categories-final .aml-search.has-value .aml-search-clear{
    display:grid;
}


/* SECTION TITLES */

body.am-categories-final .aml-section{
    margin-top:0;
}

body.am-categories-final .aml-section + .aml-section{
    margin-top:20px;
}

body.am-categories-final .aml-section-head{
    margin:0 0 10px;
}

body.am-categories-final .aml-section-head h2{
    margin:0;

    color:#17201b;

    font-size:20px;
    line-height:1;

    font-weight:850;

    letter-spacing:-.03em;
}


/* POPULAR */

.amcd-popular{
    display:grid !important;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:9px !important;

    overflow:visible !important;
}

.amcd-shortcut{
    min-width:0 !important;

    color:#454d48 !important;

    text-align:center;

    text-decoration:none;

    font-size:11px !important;
}

.amcd-shortcut > span:first-child{
    width:100% !important;
    height:66px !important;

    margin:0 0 7px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:12px !important;

    background:#eef7f2 !important;

    color:#11684b !important;
}

.amcd-shortcut:nth-child(2) > span:first-child{
    background:#fff7df !important;
    color:#c39115 !important;
}

.amcd-shortcut:nth-child(3) > span:first-child{
    background:#fbefef !important;
    color:#bb5359 !important;
}

.amcd-shortcut:nth-child(4) > span:first-child{
    background:#edf7f2 !important;
    color:#11684b !important;
}

.amcd-shortcut:nth-child(5) > span:first-child{
    background:#fff7df !important;
    color:#c39115 !important;
}

.amcd-shortcut:nth-child(6) > span:first-child{
    background:#eff2f1 !important;
    color:#176047 !important;
}

.amcd-shortcut i{
    font-size:30px !important;
}


/* DIRECTORY */

.amcd-directory{
    display:grid !important;

    grid-template-columns:1fr !important;

    gap:10px !important;
}

.amcd-category{
    overflow:hidden;

    border:1px solid #e1e5e2 !important;
    border-radius:13px !important;

    background:#fff !important;

    box-shadow:none !important;
}


/* CATEGORY ROW */

.amcd-category-main{
    width:100% !important;
    min-height:76px !important;

    padding:9px 12px !important;

    display:grid !important;

    grid-template-columns:
        58px
        minmax(0,1fr)
        24px !important;

    gap:12px !important;

    align-items:center !important;

    border:0 !important;

    background:#fff !important;

    text-align:left !important;
}

.amcd-category-icon{
    width:58px !important;
    height:58px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:12px !important;

    background:#eef7f2 !important;

    color:#11684b !important;
}

.amcd-category-icon i{
    font-size:29px !important;
}

.amcd-category-main strong{
    display:block !important;

    margin:0 !important;

    color:#17201b !important;

    font-size:15px !important;
    line-height:1.2 !important;

    font-weight:800 !important;
}

.amcd-preview{
    display:block !important;

    margin-top:3px !important;

    overflow:hidden;

    color:#737a76 !important;

    font-size:11px !important;
    line-height:1.3 !important;

    white-space:nowrap;

    text-overflow:ellipsis;
}

.amcd-chevron{
    color:#28332d !important;

    font-size:22px !important;

    transition:transform .18s ease;
}

.amcd-category-main[aria-expanded="true"] .amcd-chevron{
    transform:rotate(90deg);
}


/* EXPANDED PANEL */

.amcd-panel{
    display:none;

    margin:
        0
        7px
        7px !important;

    padding:
        10px
        13px
        11px !important;

    border-radius:10px !important;

    background:#edf7f2 !important;
}

.amcd-category.open .amcd-panel{
    display:block !important;
}

.amcd-links{
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    column-gap:28px !important;
}

.amcd-links a{
    min-height:38px !important;

    padding:8px 0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:8px;

    border-bottom:
        1px solid #d6e4dc !important;

    color:#46504a !important;

    font-size:11px !important;
    line-height:1.2 !important;

    text-decoration:none !important;
}

.amcd-links a i{
    flex:0 0 auto;

    font-size:13px;
}

.amcd-see-all{
    display:inline-flex !important;

    align-items:center !important;

    gap:5px !important;

    margin-top:9px !important;

    color:#bd8810 !important;

    font-size:11px !important;

    font-weight:800 !important;

    text-decoration:none !important;
}


/* NO RESULTS */

.amcd-empty{
    display:none;

    padding:40px 15px;

    color:#737a76;

    text-align:center;
}


/* =========================================================
   MOBILE — match supplied 4th screenshot
   ========================================================= */

@media(max-width:767px){

    body.am-categories-final .aml-page{
        max-width:none;

        padding:
            20px
            23px
            100px;
    }


    .amcd-head{
        margin-bottom:16px;
    }

    .amcd-head .aml-eyebrow{
        margin-bottom:8px;

        font-size:10px;
    }

    .amcd-head h1{
        font-size:34px;
    }

    .amcd-head .aml-section-copy{
        margin-top:7px;

        font-size:15px;
    }


    body.am-categories-final .aml-search{
        margin-bottom:18px;
    }

    body.am-categories-final .aml-search input{
        height:56px;

        border-radius:12px;

        font-size:15px;
    }


    body.am-categories-final .aml-section-head{
        margin-bottom:11px;
    }

    body.am-categories-final .aml-section-head h2{
        font-size:20px;
    }


    .amcd-popular{
        gap:8px !important;
    }

    .amcd-shortcut{
        font-size:10px !important;
    }

    .amcd-shortcut > span:first-child{
        height:66px !important;

        border-radius:11px !important;
    }

    .amcd-shortcut i{
        font-size:29px !important;
    }


    .amcd-directory{
        gap:10px !important;
    }

    .amcd-category-main{
        min-height:74px !important;

        padding:8px 11px !important;

        grid-template-columns:
            58px
            minmax(0,1fr)
            22px !important;

        gap:11px !important;
    }

    .amcd-category-icon{
        width:58px !important;
        height:58px !important;
    }

    .amcd-category-icon i{
        font-size:29px !important;
    }

    .amcd-category-main strong{
        font-size:15px !important;
    }

    .amcd-preview{
        font-size:11px !important;
    }

    .amcd-chevron{
        font-size:20px !important;
    }


    .amcd-panel{
        margin:
            0
            7px
            7px !important;

        padding:
            9px
            13px
            11px !important;
    }

    .amcd-links{
        column-gap:27px !important;
    }

    .amcd-links a{
        min-height:37px !important;

        font-size:11px !important;
    }

    .amcd-see-all{
        font-size:11px !important;
    }
}


/* slightly smaller phones */

@media(max-width:390px){

    body.am-categories-final .aml-page{
        padding-left:17px;
        padding-right:17px;
    }

    .amcd-head h1{
        font-size:31px;
    }

    .amcd-popular{
        gap:6px !important;
    }

    .amcd-shortcut > span:first-child{
        height:58px !important;
    }

    .amcd-shortcut i{
        font-size:25px !important;
    }

    .amcd-shortcut{
        font-size:9px !important;
    }
}