/* =========================================================
   KAMAYO GLOBAL BASE CSS - CLEAN SAFE v20260503
   ---------------------------------------------------------
   Upload as: /assets/css/base.css

   Purpose:
   - Lightweight global reset and shared header/page helpers.
   - Safe for custom PHP + MySQL Kamayo site.
   - No cart, checkout, order, pricing, rewards or delivery logic.
   - Does not include PHP/HTML/JS. CSS only.
========================================================= */

:root{
    --km-green:#16a34a;
    --km-green-dark:#15803d;
    --km-green-deep:#166534;
    --km-green-soft:#ecfdf3;
    --km-green-soft-2:#f0fdf4;
    --km-text:#111827;
    --km-text-2:#1f2937;
    --km-muted:#6b7280;
    --km-border:#e5e7eb;
    --km-border-soft:#eef2f7;
    --km-bg:#f3f7f4;
    --km-white:#ffffff;
    --km-red:#b91c1c;
    --km-shadow:0 10px 28px rgba(15,23,42,.06);
    --km-shadow-soft:0 6px 16px rgba(15,23,42,.05);
    --km-radius:16px;
    --km-radius-lg:22px;
}

*{box-sizing:border-box;}
*::before,*::after{box-sizing:border-box;}

html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    margin:0;
    width:100%;
    max-width:100%;
    min-height:100vh;
    overflow-x:hidden;
    background:var(--km-bg);
    color:var(--km-text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    line-height:1.45;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{
    color:inherit;
    text-decoration:none;
}

a:hover{text-decoration:none;}

img,svg,video,canvas{
    max-width:100%;
    height:auto;
}

img{
    display:block;
}

button,
input,
select,
textarea{
    font:inherit;
}

button,
a,
[role="button"]{
    -webkit-tap-highlight-color:transparent;
}

button{
    touch-action:manipulation;
}

button:disabled,
[aria-disabled="true"]{
    cursor:not-allowed;
}

[hidden]{display:none!important;}

/* Accessible focus ring. */
:focus{outline:none;}
:focus-visible{
    outline:2px solid rgba(22,163,74,.45);
    outline-offset:2px;
}

/* Screen-reader only text. */
.sr-only{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}

.container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 14px;
}

.main-content{
    width:100%;
    max-width:100%;
    min-height:60vh;
    padding:14px 0 22px;
    overflow-x:hidden;
}

/* =========================================================
   GLOBAL HEADER SAFETY
   Header.php also contains critical inline CSS. These rules are a clean
   fallback only and intentionally lightweight.
========================================================= */

.topbar{
    background:linear-gradient(135deg,var(--km-green),var(--km-green-dark));
    color:#fff;
    padding:6px 0;
    font-size:11.5px;
    font-weight:800;
}

.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}

.topbar-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:22px;
    padding:0 9px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.14);
    line-height:1;
    white-space:nowrap;
}

.site-header{
    position:sticky;
    top:0;
    z-index:999;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid rgba(229,231,235,.95);
    backdrop-filter:blur(10px);
}

.header-shell{padding:10px 0;}

.header-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.brand-block{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1 1 auto;
}

.brand-mark{
    width:42px;
    height:42px;
    border-radius:13px;
    background:linear-gradient(135deg,#ecfdf3 0%,#dcfce7 100%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:1px solid #bbf7d0;
    box-shadow:0 6px 14px rgba(22,163,74,.10);
    overflow:hidden;
    padding:6px;
}

.brand-mark img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.brand-text{min-width:0;}

.brand{
    display:inline-block;
    font-size:18px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.02em;
    color:var(--km-green-deep);
    min-width:0;
    word-break:break-word;
}

.brand-sub{
    margin-top:2px;
    font-size:10.5px;
    color:var(--km-muted);
    font-weight:700;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}

.header-quick-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.icon-btn,
.action-btn,
.mini-nav-link{
    border:1px solid var(--km-border);
    background:#fff;
    color:var(--km-text);
    border-radius:12px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    box-shadow:var(--km-shadow-soft);
}

.icon-btn{
    min-width:40px;
    width:40px;
    padding:0;
    position:relative;
}

.icon-btn-label{
    font-size:17px;
    line-height:1;
}

.cart-btn{position:relative;}

.cart-badge{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:20px;
    height:20px;
    padding:0 6px;
    background:var(--km-green);
    color:#fff;
    font-size:11px;
    font-weight:900;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    box-shadow:0 4px 10px rgba(22,163,74,.22);
}

.header-search-row{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
}

.header-search{min-width:0;}

.search-box{
    display:flex;
    align-items:center;
    width:100%;
    max-width:100%;
    border:1px solid var(--km-border);
    border-radius:15px;
    overflow:hidden;
    background:#f8fafc;
    box-shadow:var(--km-shadow-soft);
}

.search-icon{
    flex:0 0 auto;
    padding-left:12px;
    color:var(--km-muted);
    font-size:15px;
}

.search-box input{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    padding:12px 10px;
    background:transparent;
    font-size:13px;
    color:var(--km-text);
}

.search-box input::placeholder{color:#6b7280;}
.search-box input:focus{background:#fff;}

.search-box button{
    border:none;
    background:linear-gradient(135deg,var(--km-green),var(--km-green-dark));
    color:#fff;
    padding:0 14px;
    min-height:44px;
    font-weight:800;
    cursor:pointer;
    flex:0 0 auto;
    font-size:13px;
}

.header-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
}

.action-btn{
    width:100%;
    justify-content:center;
    padding:10px 12px;
    white-space:nowrap;
    min-height:40px;
    font-size:13px;
}

.action-btn-primary{
    background:linear-gradient(135deg,var(--km-green),var(--km-green-dark));
    color:#fff;
    border-color:transparent;
    box-shadow:0 10px 18px rgba(22,163,74,.18);
}

.action-btn-muted{background:#fff;}

.header-mini-nav{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    flex-wrap:wrap;
}

.mini-nav-link{
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    color:#374151;
    background:#fff;
    white-space:nowrap;
}

.mini-nav-link.is-active{
    background:var(--km-green-soft);
    color:var(--km-green-deep);
    border-color:#bbf7d0;
}

.header-meta-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:8px;
    flex-wrap:wrap;
}

.header-meta-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--km-border-soft);
    color:#374151;
    font-size:11px;
    font-weight:800;
    box-shadow:0 4px 12px rgba(15,23,42,.04);
}

.pwa-install-btn,
.pwa-ios-help{display:none;}

/* =========================================================
   COMMON PAGE HELPERS
========================================================= */

.page-shell,
.km-page-shell{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 14px;
}

.card,
.km-card-shell{
    background:#fff;
    border:1px solid var(--km-border-soft);
    border-radius:var(--km-radius);
    box-shadow:var(--km-shadow-soft);
}

.btn,
.km-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--km-border);
    background:#fff;
    color:var(--km-text);
    font-weight:800;
    cursor:pointer;
}

.btn-primary,
.km-btn-primary{
    background:linear-gradient(135deg,var(--km-green),var(--km-green-dark));
    border-color:transparent;
    color:#fff;
}

.site-footer{
    width:100%;
    background:#0f172a;
    color:#fff;
    margin-top:24px;
    padding:22px 0;
}

.site-footer a{color:#fff;}

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

@media (min-width:768px){
    .container,
    .page-shell,
    .km-page-shell{padding:0 16px;}

    .topbar{
        padding:7px 0;
        font-size:12px;
    }

    .header-shell{padding:12px 0;}

    .brand-mark{
        width:46px;
        height:46px;
        padding:7px;
    }

    .brand{font-size:20px;}
    .brand-sub{font-size:11px;}

    .header-search-row{
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
    }

    .header-actions{
        display:flex;
        width:auto;
        justify-content:flex-end;
        flex-wrap:wrap;
    }

    .action-btn{
        width:auto;
        min-width:96px;
    }

    .header-meta-row{justify-content:flex-start;}
    .main-content{padding:16px 0 24px;}
}

@media (min-width:1024px){
    .container,
    .page-shell,
    .km-page-shell{padding:0 18px;}

    .topbar{font-size:12.5px;}
    .header-shell{padding:12px 0 13px;}
    .brand{font-size:21px;}

    .search-box input{
        padding:13px 11px;
        font-size:14px;
    }

    .search-box button{min-height:46px;}
    .action-btn{padding:10px 13px;}
    .main-content{padding:18px 0 26px;}
}

@media (max-width:480px){
    .container,
    .page-shell,
    .km-page-shell{padding:0 12px;}

    .topbar{
        padding:5px 0;
        font-size:11px;
    }

    .topbar-pill{
        min-height:21px;
        padding:0 8px;
    }

    .brand-mark{
        width:40px;
        height:40px;
        padding:6px;
    }

    .brand{font-size:17px;}
    .brand-sub{display:none;}

    .search-icon{padding-left:10px;}

    .search-box input{
        padding:11px 10px;
        font-size:12.5px;
    }

    .search-box button{
        padding:0 12px;
        font-size:12px;
    }

    .header-mini-nav{gap:6px;}

    .mini-nav-link{
        min-height:32px;
        padding:0 10px;
        font-size:11.5px;
    }

    .header-meta-row{gap:6px;}

    .header-meta-chip{
        font-size:10.5px;
        min-height:28px;
        padding:0 9px;
    }

    .main-content{padding:14px 0 22px;}
}

/* Android/TWA mobile guard. */
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 .container,
html.km-mobile-device .page-shell,
html.km-mobile-device .km-page-shell{
    width:100%!important;
    max-width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
}

html.km-mobile-device .topbar{
    padding:5px 0!important;
    font-size:10.5px!important;
}

html.km-mobile-device .topbar-inner{
    gap:5px!important;
    justify-content:center!important;
}

html.km-mobile-device .topbar-pill{
    min-height:19px!important;
    padding:0 7px!important;
}

html.km-mobile-device .header-shell{padding:8px 0 9px!important;}
html.km-mobile-device .header-top{gap:8px!important;margin-bottom:8px!important;}

html.km-mobile-device .brand-mark{
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
    padding:5px!important;
}

html.km-mobile-device .brand{
    font-size:17px!important;
    line-height:1.08!important;
}

html.km-mobile-device .brand-sub{display:none!important;}

html.km-mobile-device .header-search-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
}

html.km-mobile-device .search-box{border-radius:13px!important;}

html.km-mobile-device .search-box input{
    padding:10px 9px!important;
    font-size:12px!important;
}

html.km-mobile-device .search-box button{
    min-height:40px!important;
    padding:0 12px!important;
    font-size:12px!important;
}

html.km-mobile-device .header-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    width:100%!important;
}

html.km-mobile-device .action-btn{
    width:100%!important;
    min-width:0!important;
    min-height:37px!important;
    padding:8px 9px!important;
    font-size:12px!important;
}

html.km-mobile-device .header-mini-nav{
    gap:6px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    padding-bottom:2px!important;
    scrollbar-width:none!important;
}

html.km-mobile-device .header-mini-nav::-webkit-scrollbar{display:none!important;}

html.km-mobile-device .mini-nav-link{
    flex:0 0 auto!important;
    min-height:30px!important;
    padding:0 9px!important;
    font-size:11px!important;
}

html.km-mobile-device .header-meta-row{
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:6px!important;
    scrollbar-width:none!important;
}

html.km-mobile-device .header-meta-row::-webkit-scrollbar{display:none!important;}

html.km-mobile-device .header-meta-chip{
    flex:0 0 auto!important;
    min-height:26px!important;
    padding:0 8px!important;
    font-size:10px!important;
}

html.km-mobile-device .main-content{padding:10px 0 20px!important;}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.001ms!important;
    }
}