/* =========================================================
   KAMAYO HOME CSS - CLEAN CUSTOMER FRIENDLY STABLE v20260503-a11y
   ---------------------------------------------------------
   Upload as: /assets/css/home.css

   Rules:
   - Desktop hero preserved
   - Mobile hero/cards stable
   - Product card CSS moved to /assets/css/home/product-card.css
   - Category section CSS moved to /assets/css/home/category-section.css
   - home.css keeps common homepage shell/search/result-mode layout
   - Variant modal CSS moved to /assets/css/home/variant-modal.css
   - Mini cart/sticky cart CSS moved to /assets/css/home/mini-cart.css
   - No cart calculation / delivery logic here
========================================================= */

:root{
    --km-green:#16a34a;
    --km-green-2:#22c55e;
    --km-green-dark:#166534;
    --km-green-deep:#14532d;
    --km-green-soft:#ecfdf3;
    --km-green-soft-2:#f0fdf4;
    --km-text:#111827;
    --km-text-2:#1f2937;
    --km-soft:#667085;
    --km-muted:#98a2b3;
    --km-border:rgba(16,24,40,.08);
    --km-border-2:rgba(16,24,40,.05);
    --km-bg:#f4f8f5;
    --km-white:#ffffff;
    --km-red:#ef4444;
    --km-orange:#f59e0b;
    --km-shadow:0 8px 22px rgba(15,23,42,.06);
    --km-shadow-2:0 14px 36px rgba(15,23,42,.10);
    --km-radius:18px;
    --km-radius-lg:24px;
}

*{box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;}
body{
    margin:0;
    background:var(--km-bg);
    color:var(--km-text);
}
img{max-width:100%;}
button,input,select,textarea{font:inherit;}
button{touch-action:manipulation;}
a{text-decoration:none;color:inherit;}

/* =========================================================
   ACCESSIBILITY POLISH - 2026-05-03
   Safe focus ring + tap highlight. No layout/calculation changes.
========================================================= */
:where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible{
    outline:3px solid rgba(20,83,45,.42);
    outline-offset:3px;
    box-shadow:0 0 0 4px rgba(220,252,231,.95);
}

:where(button,a,[role="button"]){
    -webkit-tap-highlight-color:rgba(22,163,74,.16);
}

.km-home-wrap,
#km-home-page{
    width:100%;
    min-width:0;
    background:linear-gradient(180deg,#f1f6f3 0%,#f8fbf9 18%,#f4f8f5 100%);
    padding-top:10px;
    padding-bottom:96px;
}

/* =========================================================
   COMMON SECTIONS
========================================================= */

.km-section,
.km-category-section{
    width:100%;
    min-width:0;
    max-width:1280px;
    margin:0 auto 16px;
    padding-left:12px;
    padding-right:12px;
}

.km-home-section-shell{
    border-radius:var(--km-radius-lg);
    background:rgba(255,255,255,.88);
    border:1px solid rgba(16,24,40,.045);
    box-shadow:0 10px 28px rgba(15,23,42,.045);
    padding:14px;
}

.km-home-section-shell + .km-home-section-shell{
    margin-top:14px;
}

.km-section-head,
.km-category-shelf-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin:0 0 12px;
}

.km-section-title{
    margin:0;
    color:var(--km-text);
    font-size:22px;
    line-height:1.16;
    font-weight:950;
    letter-spacing:-.035em;
}

.km-section-sub{
    margin:5px 0 0;
    color:var(--km-soft);
    font-size:12px;
    line-height:1.45;
    font-weight:650;
}

.km-section-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 13px;
    border:1px solid rgba(22,163,74,.18);
    border-radius:999px;
    background:#fff;
    color:var(--km-green-dark);
    text-decoration:none;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.km-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;
    padding:18px;
    border:1px dashed rgba(16,24,40,.14);
    border-radius:18px;
    background:#fff;
    color:#6b7280;
    text-align:center;
    font-size:13px;
    line-height:1.45;
}

/* =========================================================
   HOME SMART SEARCH V2 - suggestions, chips, highlights
========================================================= */

.km-home-search-host{
    position:relative;
    overflow:visible!important;
}

.km-home-search-panel{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    z-index:10020;
    display:none;
    max-height:min(360px, 62vh);
    overflow:auto;
    padding:8px;
    border:1px solid rgba(16,24,40,.10);
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 44px rgba(15,23,42,.16);
}

.km-home-search-panel.open{
    display:grid;
    gap:4px;
}

.km-home-suggestion{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 11px;
    border:1px solid transparent!important;
    border-bottom-color:rgba(16,24,40,.06)!important;
    border-radius:9px;
    background:#fff!important;
    background-image:none!important;
    color:#101828!important;
    text-align:left;
    cursor:pointer;
    box-shadow:none!important;
    text-shadow:none!important;
}

.km-home-suggestion:hover,
.km-home-suggestion.active{
    border-color:rgba(22,163,74,.12)!important;
    background:#f8fffb!important;
    background-image:none!important;
    color:#101828!important;
}

.km-home-suggestion-main{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:850;
}

.km-home-suggestion-meta{
    flex:0 0 auto;
    padding:4px 8px;
    border-radius:999px;
    background:#f5f7fa!important;
    color:#667085!important;
    font-size:10px;
    font-weight:850;
    text-transform:uppercase;
}

.km-home-search-host .km-home-search-panel .km-home-suggestion,
.search-box.km-home-search-host .km-home-search-panel .km-home-suggestion,
.header-search.km-home-search-host .km-home-search-panel .km-home-suggestion{
    min-height:44px!important;
    padding:9px 11px!important;
    border:1px solid transparent!important;
    border-bottom-color:rgba(16,24,40,.06)!important;
    border-radius:9px!important;
    background:#fff!important;
    background-image:none!important;
    color:#101828!important;
}

.km-home-match{
    border-radius:4px;
    background:#fef3c7;
    color:inherit;
    padding:0 2px;
}

.km-home-suggestion-title{
    padding:4px 10px 6px;
    color:#667085;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}

/* =========================================================
   HERO SECTION CSS MOVED OUT
========================================================= */

/*
   Hero section layout, main banner, hero cards, slider arrows,
   dots and hero mobile/app-force rules now live in:

   /assets/css/home/hero-section.css
*/

/* =========================================================
   QUICK STRIP / FEATURE / PROMO CSS MOVED OUT
========================================================= */

/*
   Quick strip, feature/highlight cards and CTA/promo banner CSS
   now live in:

   /assets/css/home/quick-strip.css
*/

/* =========================================================
   CATEGORY SECTION CSS MOVED OUT
========================================================= */

/*
   Category grid, category cards, icons/thumbs, labels and
   category responsive/mobile-force rules now live in:

   /assets/css/home/category-section.css
*/

/* =========================================================
   PRODUCT CARD CSS MOVED OUT
========================================================= */

/*
   Product tabs, product grid, product cards, shelf product cards,
   product action buttons and product skeleton loaders now live in:

   /assets/css/home/product-card.css

   Keep home.css focused on common homepage layout, shared wrappers
   and search/result-mode CSS. Variant modal lives separately.
*/

/* =========================================================
   VARIANT MODAL CSS MOVED OUT
========================================================= */

/*
   Variant popup/modal layout now lives in:

   /assets/css/home/variant-modal.css

   Mini cart and sticky cart live in /assets/css/home/mini-cart.css.
*/

/* =========================================================
   MINI CART / STICKY CART CSS MOVED OUT
========================================================= */

body.km-modal-open{overflow:hidden;touch-action:none;}

/* =========================================================
   PRODUCT SKELETON CSS MOVED OUT
========================================================= */

/* Product skeleton loaders live in /assets/css/home/product-card.css. */

/* =========================================================
   RESPONSIVE
========================================================= */

/* Hero responsive rules moved to /assets/css/home/hero-section.css. */
@media (max-width:767.98px){
    .km-home-wrap,#km-home-page{padding-top:8px;padding-bottom:128px;}

    .km-section,
    .km-category-section{padding-left:8px;padding-right:8px;margin-bottom:13px;}

    .km-home-section-shell{border-radius:22px;padding:12px;}

    .km-section-title{font-size:21px;}
    .km-section-sub{font-size:12px;}

    /* Category mobile rules moved to category-section.css. */
/* Product card responsive rules moved to product-card.css. */

    /* Variant modal mobile rules moved to variant-modal.css. */
    /* Mini cart mobile rules moved to mini-cart.css. */
}

/* Hero small-mobile rules moved to /assets/css/home/hero-section.css. */
/* Result mode: keep product page clean after search/category */
body.km-result-mode .km-home-quick-strip,
body.km-search-mode .km-category-shelf-section{
    display:none!important;
}

/* Hero reduced-motion rules moved to /assets/css/home/hero-section.css. */

/* Mini cart scoped row, quantity and footer rules moved to /assets/css/home/mini-cart.css. */

/* Bundle/Festive section CSS moved to:
   - /assets/css/home/bundle-section.css
   - /assets/css/home/festive-section.css
*/


/* =========================================================
   KAMAYO APP MOBILE FORCE v20260502
   Purpose: Android/TWA/Chrome sometimes reports desktop viewport.
   This class is added by header.php and also by JS/pointer fallback.
   It does not change cart/order calculations.
========================================================= */
html.km-mobile-device,
html.km-mobile-device body{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
}

html.km-mobile-device .km-home-wrap,
html.km-mobile-device #km-home-page{
    padding-top:6px!important;
    padding-bottom:128px!important;
}

html.km-mobile-device .km-section,
html.km-mobile-device .km-category-section{
    width:100%!important;
    max-width:100%!important;
    padding-left:8px!important;
    padding-right:8px!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

html.km-mobile-device .km-home-section-shell{
    padding:11px!important;
    border-radius:20px!important;
}

html.km-mobile-device .km-section-head,
html.km-mobile-device .km-category-shelf-head{
    gap:8px!important;
    margin-bottom:10px!important;
}

html.km-mobile-device .km-section-title{
    font-size:20px!important;
    line-height:1.15!important;
}

html.km-mobile-device .km-section-sub{
    font-size:11.5px!important;
    line-height:1.35!important;
}

/* Hero mobile-device rules moved to /assets/css/home/hero-section.css. */


/* Category mobile-force rules moved to category-section.css. */
/* Product card mobile-force rules moved to product-card.css. */

/* Variant modal mobile-device rules moved to /assets/css/home/variant-modal.css. */
/* Mini cart mobile-device rules moved to /assets/css/home/mini-cart.css. */

/* Hero touch fallback moved to /assets/css/home/hero-section.css. */