/* =========================================================
   KAMAYO QUICK STRIP / FEATURE / CTA CSS - SEPARATED SAFE v20260503-a11y-contrast
   ---------------------------------------------------------
   Upload as: /assets/css/home/quick-strip.css

   Rules:
   - This file owns homepage quick strip, feature/highlight cards and CTA/promo banner layout.
   - Product card CSS remains in /assets/css/home/product-card.css.
   - Category CSS remains in /assets/css/home/category-section.css.
   - Hero CSS remains in /assets/css/home/hero-section.css.
   - No cart calculation / delivery logic here.
========================================================= */

.km-home-quick-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:10px auto 12px;
    max-width:1280px;
    padding:0 14px;
}

.km-home-quick-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:12px 12px;
    border-radius:17px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(255,255,255,.82);
    box-shadow:0 6px 18px rgba(15,23,42,.05);
}

.km-home-quick-icon{
    width:34px;
    height:34px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ecfdf3;
    color:#166534;
    font-size:16px;
    flex:0 0 auto;
}

.km-home-quick-text{min-width:0;}
.km-home-quick-title{font-size:11px;font-weight:950;color:#111827;line-height:1.25;margin:0;}
.km-home-quick-sub{font-size:10px;color:#6b7280;line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.km-feature-list,
.km-features-list,
.km-info-list,
.km-highlights,
.km-features-strip,
.km-feature-strip,
.home-features,
.home-highlights{
    display:flex;
    flex-direction:row;
    gap:10px;
    width:100%;
    max-width:1280px;
    margin:0 auto 14px;
    padding:0 12px;
}

.km-feature-card,
.km-feature-item,
.km-highlight-item,
.km-info-card,
.home-feature-item,
.home-highlight-item{
    flex:1 1 0;
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border:1px solid rgba(16,24,40,.06);
    border-radius:16px;
    background:#fff;
    box-shadow:0 4px 12px rgba(15,23,42,.04);
}

.km-feature-icon,
.km-feature-card .icon,
.km-feature-item .icon,
.km-feature-card img,
.km-feature-item img{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#f0fdf4;
    font-size:18px;
    object-fit:contain;
}

.km-feature-text,
.km-feature-card .text,
.km-feature-item .text,
.km-feature-info{min-width:0;display:flex;flex-direction:column;gap:1px;}

.km-feature-title,
.km-feature-card strong,
.km-feature-card .title,
.km-feature-item strong,
.km-feature-item .title{
    color:var(--km-text);
    font-size:12.5px;
    line-height:1.3;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.km-feature-desc,
.km-feature-card span,
.km-feature-card .desc,
.km-feature-item span,
.km-feature-item .desc{
    color:var(--km-soft);
    font-size:10.5px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.km-cta-banner,
.km-promo-banner,
.km-info-banner,
.home-cta-bar,
.km-feature-cta{
    max-width:1280px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 16px;
    border-radius:18px;
    background:linear-gradient(135deg,#f0fdf4,#e8fff1);
    border:1px solid rgba(22,163,74,.16);
    box-shadow:0 8px 24px rgba(22,163,74,.06);
}

.km-cta-banner-title,
.km-cta-banner strong{
    display:block;
    font-size:14px;
    line-height:1.25;
    font-weight:950;
    color:#0f172a;
}

.km-cta-banner-sub,
.km-cta-banner span{
    display:block;
    margin-top:4px;
    font-size:12px;
    line-height:1.35;
    color:#667085;
}

.km-cta-btn,
.km-cta-banner a,
.km-cta-banner button,
.km-promo-strip-cta,
span.km-promo-strip-cta{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 15px;
    border-radius:999px;
    border:0;
    background:var(--km-green);
    color:#fff;
    font-size:11px;
    font-weight:950;
    white-space:nowrap;
    cursor:pointer;
}

/* Accessibility contrast fix: Lighthouse failing element span.km-promo-strip-cta.
   Keep same pill layout, only darken the green background for white text. */
.km-promo-strip-cta,
span.km-promo-strip-cta,
.km-promo-strip .km-promo-strip-cta,
.km-promo-banner .km-promo-strip-cta{
    background:#166534!important;
    color:#ffffff!important;
    border:1px solid #14532d!important;
    text-shadow:none!important;
}

.km-promo-strip-cta:focus-visible,
span.km-promo-strip-cta:focus-visible{
    outline:3px solid rgba(20,83,45,.35);
    outline-offset:2px;
}

/* =========================================================
   QUICK STRIP / FEATURE / CTA RESPONSIVE
========================================================= */

@media (max-width:767.98px){
    .km-home-quick-strip{
        grid-template-columns:1fr;
        padding:0 10px;
        gap:9px;
        margin:8px auto 10px;
    }

    .km-home-quick-item{
        padding:12px;
        border-radius:18px;
    }

    .km-home-quick-icon{
        width:38px;
        height:38px;
        border-radius:13px;
        font-size:18px;
    }

    .km-home-quick-title{
        font-size:14px;
    }

    .km-home-quick-sub{
        font-size:12px;
        white-space:normal;
    }

    .km-feature-list,
    .km-features-list,
    .km-info-list,
    .km-highlights,
    .km-features-strip,
    .km-feature-strip,
    .home-features,
    .home-highlights{
        flex-direction:column;
        gap:9px;
        margin:0 auto 12px;
        padding:0 8px;
    }

    .km-feature-card,
    .km-feature-item,
    .km-highlight-item,
    .km-info-card,
    .home-feature-item,
    .home-highlight-item{
        padding:9px 12px;
        gap:10px;
        border-radius:16px;
    }

    .km-cta-banner,
    .km-promo-banner,
    .km-info-banner,
    .home-cta-bar,
    .km-feature-cta{
        margin-left:8px;
        margin-right:8px;
        padding:12px;
        border-radius:18px;
    }

    .km-cta-banner-title,
    .km-cta-banner strong{
        font-size:15px;
    }

    .km-cta-banner-sub,
    .km-cta-banner span{
        font-size:12px;
    }
}

/* =========================================================
   KAMAYO APP MOBILE QUICK STRIP FORCE v20260503
   Purpose: Android/TWA/Chrome sometimes reports desktop viewport.
   Safe: quick/feature/CTA layout only; no cart/order calculation logic.
========================================================= */

html.km-mobile-device .km-home-quick-strip{
    display:grid!important;
    grid-template-columns:1fr!important;
    max-width:100%!important;
    padding:0 8px!important;
    gap:8px!important;
    margin:8px auto 10px!important;
}

html.km-mobile-device .km-home-quick-item{
    padding:10px 11px!important;
    border-radius:16px!important;
}

html.km-mobile-device .km-home-quick-icon{
    width:34px!important;
    height:34px!important;
    border-radius:12px!important;
}

html.km-mobile-device .km-home-quick-title{
    font-size:13px!important;
}

html.km-mobile-device .km-home-quick-sub{
    font-size:11px!important;
    white-space:normal!important;
}