/* ============ Kapray Header ============ */
.kh-outer *{ box-sizing:border-box; }
.kh-outer a{ text-decoration:none; }

/* promo bar */
.kh-promo{
    background:var(--kh-promo-bg,#000); color:var(--kh-promo-text,#fff);
    font-size:13px; font-weight:600; letter-spacing:.3px;
    position:relative; overflow:hidden; height:38px;
    display:flex; align-items:center;
}
.kh-promo-link{ color:inherit; display:block; width:100%; }
/* marquee */
.kh-marquee{ width:100%; overflow:hidden; }
.kh-track{
    display:inline-flex; align-items:center; white-space:nowrap;
    will-change:transform;
    animation:kh-scroll var(--kh-promo-speed,18s) linear infinite;
}
.kh-msg{ padding:0 14px; }
.kh-sep{ opacity:.5; }
@keyframes kh-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.kh-promo:hover .kh-track{ animation-play-state:paused; }
/* rotate */
.kh-rotate{ position:relative; width:100%; height:38px; }
.kh-rmsg{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .5s ease;
}
.kh-rmsg.active{ opacity:1; }
.kh-promo-close{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:inherit; font-size:20px; cursor:pointer; line-height:1;
}

/* header shell */
.kh-header{
    background:var(--kh-bg,#fff);
    transition:background .25s ease, height .25s ease, box-shadow .25s ease;
    border-bottom:1px solid rgba(0,0,0,.06);
    z-index:1000;
}
.kh-sticky .kh-header{ position:sticky; top:0; }
.kh-inner{
    max-width:var(--kh-cw,1200px); margin:0 auto;
    height:var(--kh-h-d,74px);
    display:grid; align-items:center; gap:12px;
    padding:0 18px;
}
.kh-header, .kh-header a, .kh-header button{ color:var(--kh-text,#111); }
.kh-ic{ color:var(--kh-icon,#111); background:none; border:none; cursor:pointer; padding:6px; display:inline-flex; position:relative; }
.kh-ic:hover{ color:var(--kh-hover,#c0392b); }

/* logo */
.kh-logo-img img{ display:block; width:var(--kh-logo-d,150px); height:auto; max-height:calc(var(--kh-h-d) - 20px); object-fit:contain; }
.kh-logo-text{ font-size:24px; font-weight:800; letter-spacing:1px; color:var(--kh-text,#111); }

/* nav */
.kh-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:22px; align-items:center; }
.kh-nav a{ font-size:14px; font-weight:600; color:var(--kh-text,#111); padding:6px 0; position:relative; }
.kh-nav a:hover{ color:var(--kh-hover,#c0392b); }
.kh-nav li{ position:relative; }
.kh-nav .sub-menu, .kh-nav .children{
    position:absolute; top:100%; left:0; min-width:190px; background:#fff;
    border:1px solid rgba(0,0,0,.08); border-radius:8px; padding:8px 0; display:none;
    box-shadow:0 12px 30px rgba(0,0,0,.10); z-index:50;
}
.kh-nav li:hover > .sub-menu, .kh-nav li:hover > .children{ display:block; }
.kh-nav .sub-menu a, .kh-nav .children a{ display:block; padding:8px 16px; }

.kh-actions{ display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.kh-cart-count{
    position:absolute; top:-4px; right:-4px; background:var(--kh-accent,#e11d48); color:#fff;
    font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.kh-burger{
    width:34px; height:34px; background:none; border:none; cursor:pointer;
    display:none; flex-direction:column; justify-content:center; gap:5px; padding:0;
}
.kh-burger span{ display:block; height:2px; width:24px; background:var(--kh-icon,#111); border-radius:2px; transition:.2s; }

/* ---- style: classic (logo left + inline menu) ---- */
.kh-style-classic .kh-inner{ grid-template-columns:auto 1fr auto; }
.kh-style-classic.kh-menu-center .kh-nav{ justify-content:center; }
.kh-style-classic.kh-menu-left .kh-nav{ justify-content:flex-start; }
.kh-style-classic.kh-menu-right .kh-nav{ justify-content:flex-end; }
.kh-style-classic .kh-nav{ display:flex; }

/* ---- style: centered (logo center, menu below) ---- */
.kh-style-centered .kh-inner{ grid-template-columns:1fr auto 1fr; grid-template-areas:"burger logo actions"; }
.kh-style-centered .kh-burger{ grid-area:burger; justify-self:start; }
.kh-style-centered .kh-logo{ grid-area:logo; justify-self:center; }
.kh-style-centered .kh-actions{ grid-area:actions; }
.kh-style-centered .kh-nav{ grid-column:1 / -1; grid-row:2; justify-content:center; border-top:1px solid rgba(0,0,0,.05); }
.kh-style-centered .kh-inner{ height:auto; padding-top:10px; padding-bottom:0; row-gap:6px; }
.kh-style-centered .kh-nav ul{ padding:8px 0; }

/* ---- style: minimal (burger + center logo + icons; menu always offcanvas) ---- */
.kh-style-minimal .kh-inner{ grid-template-columns:1fr auto 1fr; }
.kh-style-minimal .kh-burger{ display:flex; justify-self:start; }
.kh-style-minimal .kh-logo{ justify-self:center; }
.kh-style-minimal .kh-nav{ display:none; }

/* force offcanvas everywhere */
.kh-force-offcanvas .kh-nav{ display:none !important; }
.kh-force-offcanvas .kh-burger{ display:flex !important; }

/* logo-left override for centered/minimal */
.kh-logo-left.kh-style-centered .kh-inner,
.kh-logo-left.kh-style-minimal .kh-inner{ grid-template-columns:auto auto 1fr; }
.kh-logo-left.kh-style-centered .kh-logo,
.kh-logo-left.kh-style-minimal .kh-logo{ justify-self:start; }

/* ---- sticky shrink ---- */
.kh-shrink.kh-stuck .kh-inner{ height:calc(var(--kh-h-d,74px) - 14px); }
.kh-stuck .kh-header{ background:var(--kh-sticky-bg,#fff); box-shadow:0 4px 18px rgba(0,0,0,.08); }
.kh-stuck .kh-header, .kh-stuck .kh-header a, .kh-stuck .kh-nav a, .kh-stuck .kh-logo-text{ color:var(--kh-sticky-text,#111); }
.kh-stuck .kh-ic{ color:var(--kh-sticky-text,#111); }
.kh-style-centered.kh-stuck .kh-nav{ display:none; } /* hide 2nd row when stuck */

/* ---- transparent overlay ---- */
.kh-transparent{ position:absolute; top:0; left:0; right:0; z-index:1000; }
.kh-transparent .kh-header{ background:transparent; border-bottom-color:transparent; }
.kh-transparent .kh-header, .kh-transparent .kh-header a, .kh-transparent .kh-nav a, .kh-transparent .kh-logo-text, .kh-transparent .kh-ic{ color:var(--kh-trans-text,#fff); }
.kh-transparent .kh-burger span{ background:var(--kh-trans-text,#fff); }
.kh-transparent.kh-stuck{ position:fixed; }
.kh-transparent.kh-stuck .kh-header{ background:var(--kh-sticky-bg,#fff); }
.kh-transparent.kh-stuck .kh-header, .kh-transparent.kh-stuck a, .kh-transparent.kh-stuck .kh-ic, .kh-transparent.kh-stuck .kh-logo-text{ color:var(--kh-sticky-text,#111); }
.kh-transparent.kh-stuck .kh-burger span{ background:var(--kh-sticky-text,#111); }

/* ============ Off-canvas menu ============ */
.kh-offcanvas{
    position:fixed; top:0; left:0; height:100%; width:86%; max-width:360px;
    background:var(--kh-oc-bg,#fff); color:var(--kh-oc-text,#111);
    transform:translateX(-100%); transition:transform .3s ease; z-index:100000;
    padding:14px 0; overflow-y:auto; box-shadow:2px 0 30px rgba(0,0,0,.15);
}
.kh-offcanvas.open{ transform:translateX(0); }
.kh-oc-head{ display:flex; justify-content:flex-start; padding:6px 18px 10px; }
.kh-oc-close{ background:none; border:none; font-size:28px; line-height:1; cursor:pointer; color:var(--kh-oc-text,#111); }
.kh-oc-nav ul{ list-style:none; margin:0; padding:0; }
.kh-oc-nav li{ border-bottom:1px solid rgba(0,0,0,.07); position:relative; }
.kh-oc-nav a{ display:block; padding:15px 20px; font-size:16px; color:var(--kh-oc-text,#111); }
.kh-oc-nav .sub-menu, .kh-oc-nav .children{ list-style:none; margin:0; padding:0; display:none; background:rgba(0,0,0,.03); }
.kh-oc-nav li.kh-open > .sub-menu, .kh-oc-nav li.kh-open > .children{ display:block; }
.kh-oc-nav li.menu-item-has-children > a::after,
.kh-oc-nav li.page_item_has_children > a::after{
    content:"+"; position:absolute; right:20px; top:14px; font-size:22px; font-weight:400;
}
.kh-oc-nav li.kh-open.menu-item-has-children > a::after{ content:"\2013"; }
.kh-oc-search{
    margin:16px 20px; background:#111; color:#fff; border:none; border-radius:30px;
    padding:12px 20px; font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
}
.kh-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden;
    transition:.3s; z-index:99999;
}
.kh-overlay.open{ opacity:1; visibility:visible; }

/* ============ Search panel ============ */
.kh-search-panel{
    position:fixed; top:0; left:0; right:0; background:#fff; z-index:100001;
    transform:translateY(-100%); transition:transform .3s ease; box-shadow:0 6px 24px rgba(0,0,0,.12);
}
.kh-search-panel.open{ transform:translateY(0); }
.kh-search-inner{ max-width:760px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:18px; }
.kh-search-inner form{ display:flex; flex:1; align-items:center; border-bottom:2px solid #111; }
.kh-search-inner input{ flex:1; border:none; outline:none; font-size:18px; padding:10px 4px; background:transparent; }
.kh-search-inner button[type=submit]{ background:none; border:none; cursor:pointer; color:#111; }
.kh-search-close{ background:none; border:none; font-size:30px; line-height:1; cursor:pointer; color:#111; }

/* ============ Responsive ============ */
@media (max-width:900px){
    .kh-inner{ height:var(--kh-h-m,60px); grid-template-columns:1fr auto 1fr !important; grid-template-areas:"burger logo actions" !important; }
    .kh-burger{ display:flex !important; grid-area:burger; justify-self:start; }
    .kh-logo{ grid-area:logo; justify-self:center; }
    .kh-actions{ grid-area:actions; }
    .kh-nav{ display:none !important; }
    .kh-logo-img img{ width:var(--kh-logo-m,115px); max-height:calc(var(--kh-h-m) - 16px); }
    .kh-logo-left .kh-inner{ grid-template-columns:auto auto 1fr !important; grid-template-areas:"burger logo actions" !important; }
    .kh-shrink.kh-stuck .kh-inner{ height:calc(var(--kh-h-m,60px) - 8px); }
    .kh-promo{ height:34px; font-size:12px; }
}