/* =========================================================
   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{
    position:relative;
    padding:18px 18px 22px;
    background:#fff;
    border-color:rgba(16,24,40,.035);
    box-shadow:0 10px 30px rgba(15,23,42,.035);
}

.km-category-grid{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:24px 18px;
    align-items:start;
    padding:18px 6px 16px;
    border-radius:18px;
    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:9px;
    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:82px;
    height:82px;
    flex:0 0 82px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f4f8f6;
    border:1px solid rgba(16,24,40,.04);
    overflow:hidden;
    color:#047857;
    font-size:26px;
    font-weight:900;
    box-shadow:0 7px 16px rgba(15,23,42,.03);
}

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

.km-category-card-thumb-all{
    color:#047857;
    background:#ecfdf3;
    border-color:rgba(22,163,74,.12);
}

.km-category-card-name{
    width:100%;
    min-width:0;
    min-height:36px;
    max-height:39px;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    color:#374151;
    font-size:13.5px;
    line-height:1.2;
    font-weight:780;
    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:#111827;
}

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

.km-category-app-nudge,
.km-category-app-modal{
    display:none;
}

body.km-category-app-modal-open{
    overflow:hidden;
}

/* =========================================================
   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:translateY(-1px) scale(1.035);
        border-color:rgba(22,163,74,.18);
        background:#f8fffb;
        box-shadow:0 12px 24px rgba(15,23,42,.075);
    }

    .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-section,
    html.km-mobile-device .km-category-section{
        padding:0 12px 16px!important;
        background:#fff!important;
        border-radius:0!important;
        border:0!important;
        box-shadow:none!important;
    }

    .km-category-section .km-section-head{
        padding:16px 0 8px!important;
        margin:0!important;
    }

    .km-category-section .km-section-title{
        font-size:22px!important;
        letter-spacing:0!important;
    }

    .km-category-app-nudge{
        display:flex!important;
        align-items:center;
        gap:10px;
        margin:0 -12px 12px;
        padding:10px 12px;
        background:#177a24;
        color:#fff;
    }

    .km-category-app-nudge[hidden]{
        display:none!important;
    }

    .km-category-app-nudge-close{
        width:30px;
        height:30px;
        flex:0 0 30px;
        border:0;
        border-radius:999px;
        background:rgba(255,255,255,.12);
        color:#fff;
        font-size:18px;
        line-height:1;
    }

    .km-category-app-logo{
        width:42px;
        height:42px;
        flex:0 0 42px;
        border-radius:10px;
        display:grid;
        place-items:center;
        background:#facc15;
        color:#14532d;
        font-weight:950;
        box-shadow:0 6px 16px rgba(0,0,0,.16);
    }

    .km-category-app-copy{
        min-width:0;
        flex:1 1 auto;
        display:grid;
        gap:2px;
    }

    .km-category-app-copy strong{
        font-size:16px;
        line-height:1.05;
        font-weight:900;
    }

    .km-category-app-copy small{
        color:rgba(255,255,255,.82);
        font-size:11px;
        line-height:1.15;
        font-weight:650;
    }

    .km-category-app-use{
        min-height:40px;
        padding:0 16px;
        border:0;
        border-radius:12px;
        background:#0b0f19;
        color:#fff;
        font-size:13px;
        font-weight:900;
        white-space:nowrap;
    }

    .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:18px 12px!important;
        align-items:start!important;
        width:100%!important;
        min-width:0!important;
        padding:12px 0 18px!important;
        border-radius:0!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(64px,20vw,78px)!important;
        height:clamp(64px,20vw,78px)!important;
        flex:0 0 clamp(64px,20vw,78px)!important;
        border-radius:17px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        background:#f3f8f5!important;
        border:1px solid rgba(16,24,40,.045)!important;
        overflow:hidden!important;
        color:#047857!important;
        font-size:24px!important;
        font-weight:900!important;
        box-shadow:0 8px 18px rgba(15,23,42,.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:36px!important;
        max-height:40px!important;
        overflow:hidden!important;
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
        color:#1f2937!important;
        font-size:clamp(12px,3.35vw,14px)!important;
        line-height:1.16!important;
        font-weight:850!important;
        word-break:break-word!important;
    }

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

    .km-category-app-modal{
        position:fixed;
        inset:0;
        z-index:10040;
        display:none;
    }

    .km-category-app-modal.is-open{
        display:block;
    }

    .km-category-app-backdrop{
        position:absolute;
        inset:0;
        border:0;
        background:rgba(15,23,42,.58);
        backdrop-filter:blur(2px);
    }

    .km-category-app-sheet{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        min-height:58vh;
        padding:36px 16px 22px;
        border-radius:24px 24px 0 0;
        background:#fff;
        color:#111827;
        text-align:center;
        box-shadow:0 -24px 60px rgba(15,23,42,.28);
    }

    .km-category-app-sheet-close{
        position:absolute;
        left:50%;
        top:-54px;
        transform:translateX(-50%);
        width:44px;
        height:44px;
        border:0;
        border-radius:999px;
        background:#111827;
        color:#fff;
        font-size:26px;
        line-height:1;
    }

    .km-category-phone-art{
        height:152px;
        margin:-6px -16px 16px;
        display:flex;
        align-items:flex-end;
        justify-content:center;
        gap:12px;
        background:#ffd84d;
        overflow:hidden;
    }

    .km-category-phone-art span{
        width:84px;
        height:128px;
        border:8px solid #111827;
        border-bottom:0;
        border-radius:28px 28px 0 0;
        background:linear-gradient(180deg,#f8fafc,#dcfce7);
        box-shadow:0 12px 24px rgba(15,23,42,.18);
    }

    .km-category-phone-art span:nth-child(2){
        width:96px;
        height:144px;
        background:linear-gradient(180deg,#f8fafc,#bbf7d0);
    }

    .km-category-app-badge{
        width:76px;
        height:76px;
        margin:-54px auto 16px;
        display:grid;
        place-items:center;
        border-radius:22px;
        background:#facc15;
        color:#14532d;
        font-weight:950;
        box-shadow:0 16px 28px rgba(15,23,42,.12);
    }

    .km-category-app-sheet p{
        margin:0 0 8px;
        color:#667085;
        font-size:18px;
        font-weight:650;
    }

    .km-category-app-sheet h3{
        margin:0;
        color:#111827;
        font-size:34px;
        line-height:1.04;
        font-weight:950;
        letter-spacing:0;
    }

    .km-category-app-sheet small{
        display:block;
        margin:10px auto 20px;
        max-width:320px;
        color:#667085;
        font-size:13px;
        line-height:1.35;
        font-weight:650;
    }

    .km-category-app-primary,
    .km-category-app-secondary{
        width:100%;
        min-height:54px;
        border-radius:14px;
        font-size:17px;
        font-weight:900;
    }

    .km-category-app-primary{
        border:0;
        background:#198a22;
        color:#fff;
    }

    .km-category-app-secondary{
        margin-top:12px;
        border:0;
        background:#fff;
        color:#198a22;
    }
}

/* 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;
    }
}