/* =========================================================
   KAMAYO HOMEPAGE - CATEGORY SECTION CSS
   File: public_html/assets/css/home/category-section.css
   Version: 2026-05-05 mobile-safe-auto-responsive

   Purpose:
   - Single source for homepage category grid/card/icon/text layout.
   - Loads AFTER /assets/css/home.css and BEFORE product-card.css.
   - No cart, checkout, order, pricing, delivery, rewards or JS logic here.

   Mobile target:
   - 360 / 375 / 390 / 412 CSS width: 4 category columns.
   - Below 340px only: 3 category columns fallback.
========================================================= */

/* =========================================================
   CATEGORY GRID BASE
========================================================= */

.km-category-section{
    padding:14px;
}

.km-category-grid{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:18px 12px;
    align-items:start;
    padding:12px 6px 14px;
    border-radius:22px;
    background:#fff;
    overflow:visible;
}

.km-category-card,
.km-category-item{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    min-width:0;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:var(--km-text,#111827);
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:7px;
    text-align:center;
    box-shadow:none;
    overflow:visible;
}

.km-category-card:focus-visible,
.km-category-item:focus-visible{
    outline:3px solid rgba(20,83,45,.42);
    outline-offset:4px;
    border-radius:18px;
}

.km-category-card:focus-visible .km-category-card-thumb,
.km-category-item:focus-visible .km-category-card-thumb{
    border-color:rgba(20,83,45,.38);
    box-shadow:0 0 0 4px rgba(220,252,231,.95);
}

.km-category-card-thumb{
    width:72px;
    height:72px;
    flex:0 0 72px;
    border-radius:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#effdf5;
    border:1px solid rgba(22,163,74,.08);
    overflow:hidden;
    color:#047857;
    font-size:26px;
    font-weight:900;
    box-shadow:0 6px 16px rgba(22,163,74,.04);
}

.km-category-card-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    padding:5px;
    margin:0;
}

.km-category-card-thumb-all{
    color:#047857;
    background:#dcfce7;
    border-color:#bbf7d0;
}

.km-category-card-name{
    width:100%;
    min-width:0;
    min-height:34px;
    max-height:36px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color:#1f2937;
    font-size:12px;
    line-height:1.18;
    font-weight:950;
    word-break:break-word;
}

.km-category-card-meta{
    display:none;
}

.km-category-card.active .km-category-card-name,
.km-category-item.active .km-category-card-name{
    color:#07121f;
}

.km-category-card.active::after,
.km-category-item.active::after{
    content:"";
    width:34px;
    height:4px;
    border-radius:999px;
    background:#0f172a;
    margin-top:-2px;
}

/* =========================================================
   DESKTOP ONLY HOVER ZOOM
   Safe: does not run on Android/app/touch devices.
========================================================= */

@media (hover:hover) and (pointer:fine) and (min-width:768px){
    .km-category-card,
    .km-category-item,
    .km-category-card-thumb,
    .km-category-card-thumb img{
        transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
    }

    .km-category-card:hover,
    .km-category-item:hover{
        transform:translateY(-2px);
    }

    .km-category-card:hover .km-category-card-thumb,
    .km-category-item:hover .km-category-card-thumb{
        transform:scale(1.07);
        border-color:rgba(22,163,74,.22);
        background:#eafff1;
        box-shadow:0 10px 22px rgba(22,163,74,.14);
    }

    .km-category-card:hover .km-category-card-thumb img,
    .km-category-item:hover .km-category-card-thumb img{
        transform:scale(1.05);
    }

    .km-category-card:hover .km-category-card-name,
    .km-category-item:hover .km-category-card-name{
        color:#047857;
    }
}

/* =========================================================
   CATEGORY RESPONSIVE SYSTEM
========================================================= */

@media (max-width:1199.98px){
    .km-category-grid{
        grid-template-columns:repeat(8,minmax(0,1fr));
    }
}

@media (max-width:991.98px){
    .km-category-grid{
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:16px 10px;
        padding:10px 3px 12px;
    }

    .km-category-card-thumb{
        width:70px;
        height:70px;
        flex-basis:70px;
        border-radius:15px;
    }

    .km-category-card-name{
        min-height:32px;
        max-height:35px;
        font-size:11.5px;
    }
}

/* 360 / 375 / 390 / 412 mobile target: always 4 columns. */
@media (max-width:767.98px){
    .km-category-grid,
    html.km-mobile-device .km-category-grid,
    html.km-mobile-compact .km-category-grid,
    html.km-mobile-wide .km-category-grid{
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        gap:14px 7px!important;
        align-items:start!important;
        width:100%!important;
        min-width:0!important;
        padding:12px 3px 14px!important;
        border-radius:20px!important;
        background:#fff!important;
        border:0!important;
        overflow:visible!important;
    }

    .km-category-card,
    .km-category-item,
    html.km-mobile-device .km-category-card,
    html.km-mobile-device .km-category-item,
    html.km-mobile-compact .km-category-card,
    html.km-mobile-compact .km-category-item,
    html.km-mobile-wide .km-category-card,
    html.km-mobile-wide .km-category-item{
        appearance:none!important;
        -webkit-appearance:none!important;
        width:100%!important;
        min-width:0!important;
        min-height:0!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        background:transparent!important;
        color:#111827!important;
        cursor:pointer!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:6px!important;
        text-align:center!important;
        box-shadow:none!important;
        overflow:visible!important;
        font-size:inherit!important;
        line-height:normal!important;
    }

    .km-category-card-thumb,
    html.km-mobile-device .km-category-card-thumb,
    html.km-mobile-compact .km-category-card-thumb,
    html.km-mobile-wide .km-category-card-thumb{
        width:clamp(54px,15.5vw,62px)!important;
        height:clamp(54px,15.5vw,62px)!important;
        flex:0 0 clamp(54px,15.5vw,62px)!important;
        border-radius:14px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        background:#effdf5!important;
        border:1px solid rgba(22,163,74,.08)!important;
        overflow:hidden!important;
        color:#047857!important;
        font-size:24px!important;
        font-weight:900!important;
        box-shadow:0 6px 16px rgba(22,163,74,.04)!important;
    }

    .km-category-card-thumb img,
    html.km-mobile-device .km-category-card-thumb img,
    html.km-mobile-compact .km-category-card-thumb img,
    html.km-mobile-wide .km-category-card-thumb img{
        width:100%!important;
        height:100%!important;
        object-fit:contain!important;
        padding:4px!important;
        display:block!important;
        margin:0!important;
    }

    .km-category-card-thumb-all,
    html.km-mobile-device .km-category-card-thumb-all{
        color:#047857!important;
        background:#dcfce7!important;
        border-color:#bbf7d0!important;
    }

    .km-category-card-name,
    html.km-mobile-device .km-category-card-name,
    html.km-mobile-compact .km-category-card-name,
    html.km-mobile-wide .km-category-card-name{
        width:100%!important;
        min-width:0!important;
        min-height:31px!important;
        max-height:34px!important;
        overflow:hidden!important;
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
        color:#1f2937!important;
        font-size:clamp(10.2px,2.9vw,11.4px)!important;
        line-height:1.18!important;
        font-weight:950!important;
        word-break:break-word!important;
    }

    .km-category-card-meta,
    html.km-mobile-device .km-category-card-meta{
        display:none!important;
    }
}

/* Emergency fallback only for extra tiny widths. Normal 360px stays 4 columns. */
@media (max-width:339.98px){
    .km-category-grid,
    html.km-mobile-device .km-category-grid,
    html.km-mobile-compact .km-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:14px 7px!important;
    }
}

@media (prefers-reduced-motion:reduce){
    .km-category-card,
    .km-category-item,
    .km-category-card-thumb,
    .km-category-card-thumb img{
        transition:none!important;
        transform:none!important;
    }
}