/* Kazoku Header - header.css (Kazoku Modern compliant)
   - No red, no gradients, no pure-black text styling
   - White / Steel Silver surfaces; Deep Indigo text
   - Green reserved ONLY for Add to Cart (not used here)
   - Copper accent used sparingly (tiny highlights only)
   - Border radius rule: use var(--radius-sm) OR none
*/

/* ===========================
   Base
   =========================== */
.kz-header{
  /* IMPORTANT: old kz tokens removed (they included red/black) */
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink-900);
  background: var(--bg);
}

.kz-header a{color:inherit;}
.kz-header a:hover{text-decoration:none;}

.kz-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

/* ===========================
   Top bar (calm)
   - Previously red; now Steel Silver with subtle border
   =========================== */
.kz-topbar{
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.kz-topbar__inner{
  min-height: 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.kz-topbar__left{
  font-size: 12px;
  color: var(--ink-700);
  font-weight: 600;
}
.kz-topbar__right{
  display:flex;
  gap: 14px;
}
.kz-topbar__right a{
  color: var(--ink-900);
  text-decoration:none;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.kz-topbar__right a:hover{
  background: rgba(26,35,62,.06);
}

/* ===========================
   Main header (light)
   =========================== */
.kz-main{
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.kz-main__inner{
  min-height: 78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* Left */
.kz-left{
  display:flex;
  align-items:center;
  gap: 12px;
}
.kz-logo img{
  height: 42px;
  width:auto;
  display:block;
}

/* ===========================
   Burger (mobile)
   - light border, white bg
   =========================== */
.kz-burger{
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display:none; /* shown in mobile */
  padding: 10px;
  cursor:pointer;
  transition: box-shadow .18s ease, background .18s ease, border-color .18s ease, transform .12s ease;
}
.kz-burger:hover{
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}
.kz-burger:active{transform: translateY(1px);}

.kz-burger span{
  display:block;
  height: 2px;
  background: var(--ink-900);
  border-radius: 999px;
}
.kz-burger span + span{margin-top: 7px;}

/* ===========================
   Desktop nav (Zwilling-light)
   - remove heavy pill radiuses; use subtle hover bg + underline
   =========================== */
.kz-nav{flex:1 1 auto; min-width:240px;}

.kz-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 2px;
  margin:0;
  padding:0;
}

.kz-item{position:relative;}

/* link: minimal radius; calm hover */
.kz-link{
  position:relative;
  display:flex;
  align-items:center;
  gap: 3px;
  color: var(--ink-900);
  text-decoration:none;
  padding: 10px 12px;
  border-radius: var(--radius-sm); /* or set to 0 if you want ultra-minimal */
  font-size: 13px;
  letter-spacing:.08em;
  white-space:nowrap;
  text-transform: uppercase;
  font-weight: 700;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}

/* subtle hover background */
.kz-link:hover{
  background: rgba(26,35,62,.06);
  color: var(--ink-900);
}

/* underline indicator (calm, mature) */
.kz-link::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 1px;
  background: transparent;
  transition: background .18s ease;
}
.kz-item:hover > .kz-link::after,
.kz-item.is-active > .kz-link::after{
  background: rgba(26,35,62,.32);
}

.kz-caret{
  width: 16px;
  height: 16px;
  opacity: .75;
}

/* ===========================
   Dropdown (light panel)
   - Was dark; now white surface with light border
   - Reduce radiuses (radius-sm only)
   =========================== */
.kz-drop{
  position:absolute;
  top: 100%;
  left: 0;
  min-width: 360px;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  padding: 12px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 30;
}

.kz-hasdrop:hover > .kz-drop,
.kz-hasdrop.kz-open > .kz-drop{
  opacity: 1;
  transform: translateY(0);
  pointer-events:auto;
}

.kz-drop__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Sub item: minimal card, no chunky radius */
header .kz-sub{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  text-decoration:none;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
header .kz-sub:hover{
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}
header .kz-sub img{
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: 0 0 auto;
}
header .kz-sub span{
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink-900);
}

.kz-main .kz-seeall{
  display:flex;
  justify-content:center;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration:none;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.06em;
  text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kz-seeall:hover{
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}

/* ===========================
   Right side (search + actions)
   =========================== */
header .kz-right{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Search: light field, indigo icon; no red button */
.kz-search{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 6px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.kz-search:focus-within{
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}

.kz-search input{
  width: 220px;
  border: none;
  outline:none;
  background: transparent;
  color: var(--ink-900);
  font-size: 14px;
  padding: 8px 10px;
}
.kz-search input::placeholder{color: rgba(85,105,143,.75);}

.kz-search button{
  width: 44px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-900);
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.kz-search button:hover{
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}
.kz-search button:active{transform: translateY(1px);}

/* Icons area */
.kz-actions{
  display:flex;
  align-items:center;
  gap: 0;
}

/* Icon buttons: minimal, light border on hover */
.kz-act{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  text-decoration:none;
  color: var(--ink-900);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.kz-act:hover{
  background: rgba(26,35,62,.06);
  border-color: var(--line);
  box-shadow: var(--focus);
}
.kz-act:active{transform: translateY(1px);}

.kz-actbtn{
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-900);
  cursor:pointer;
  border-radius: var(--radius-sm);
}

.kz-ico{font-size:16px; line-height:1;}

/* Cart badge: calm (no red). Use Copper accent sparingly. */
.kz-badge{
  position:absolute;
  top: 6px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(188,124,86,.22);
  border: 2px solid var(--bg);
}

/* Search icon shortcut (if exists) - no red */
a.kz-act.search-ico{
  background: rgba(26,35,62,.06);
  border-color: var(--line);
}

/* ===========================
   Dropdown menus (account/cart)
   - convert dark dropdown to light surface
   =========================== */
.kz-cart.btn-group,
.kz-account.btn-group{position:relative;}

.kz-dropdown .dropdown-menu.kz-cartpop,
.kz-dropdown .dropdown-menu.kz-accountpop{
  right: 0;
  left: auto;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  padding: 10px;
}

.kz-cartpop{width: 340px;}
.kz-accountpop{width: 240px;}

.kz-main .kz-accountpop a {
  display:block;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  text-decoration:none;
  font-size: 14px;
}
.kz-accountpop a:hover{
  background: var(--surface-2);
}

/* Cart item */
.kz-cartitem{
  display:flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
}

.kz-cartitem:hover {
  opacity: 0.8;
}

.kz-cartitem img{
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.kz-cartmeta{flex:1 1 auto; min-width:0;}
.kz-main .kz-cartmeta a{
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color: var(--ink-900);
}
.kz-cartline{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-500);
}

.kz-remove{
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-900);
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.kz-remove:hover{
  background: var(--surface);
  border-color: var(--line-strong);
}
.kz-remove:active{transform: translateY(1px);}

.kz-carttot{
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display:grid;
  gap: 8px;
}
.kz-carttot > div{
  display:flex;
  justify-content:space-between;
  font-size: 13px;
  color: var(--ink-500);
}
.kz-carttot strong{color: var(--ink-900);}
.kz-carttot .kz-grand{
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--ink-900);
}

/* Cart CTA buttons
   - Ghost: neutral
   - Solid: system/secure action -> Indigo
*/
.kz-cartcta{display:flex; gap:10px; margin-top:10px;}
.kz-btn{
  flex: 1 1 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  text-decoration:none;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.kz-btn--ghost{
  color: var(--ink-900) !important;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.kz-btn--ghost:hover{
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}

.kz-btn--solid{
  color: var(--checkout-ink);
  background: var(--checkout);
  border: 1px solid var(--checkout);
}
.kz-btn--solid:hover{
  background: var(--checkout-hover);
  border-color: var(--checkout-hover);
  box-shadow: var(--shadow-2);
}

/* ===========================
   Drawer (mobile)
   - light drawer to match brand
   =========================== */
.kz-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.50);
  z-index:60;
}
.kz-drawer{
  position:fixed;
  top:0; left:0;
  height:100vh;
  width: min(88vw, 380px);
  background: var(--bg);
  border-right: 1px solid var(--line);
  transform: translateX(-102%);
  transition: transform .22s ease;
  z-index:70;
  display:flex;
  flex-direction:column;
}
.kz-drawer.kz-open{transform: translateX(0);}

.kz-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 16px;
  border-bottom: 1px solid var(--line);
}

.kz-x{
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-900);
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.kz-x:hover{
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}
.kz-x:active{transform: translateY(1px);}

.kz-drawer__body{
  padding: 14px 14px 18px;
  overflow:auto;
}

/* mobile search */
.kz-search--mobile{width:100%; margin-bottom:12px;}
.kz-search--mobile input{width:100%;}

/* mobile menu */
.kz-mmenu{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 8px;
  display:none;
}

.kz-mitem a,
.kz-mtoggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-900);
  text-decoration:none;
  font-size: 14px;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kz-mitem a:hover,
.kz-mtoggle:hover{
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}

.kz-mdrop{
  margin-top: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  display:grid;
  gap: 6px;
}

.kz-mdrop a{
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
}
.kz-mdrop a:hover{
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}
.kz-mchev{opacity:.85;}

/* drawer footer links */
.kz-drawer__footer{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.kz-footlink{
  color: var(--ink-900);
  text-decoration:none;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.kz-footlink:hover{
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: var(--focus);
}

/* ===========================
   Search overlay (light panel)
   =========================== */
.kz-searchov[hidden]{display:none;}

.kz-searchov{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.kz-searchov__mask{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
}

.kz-searchov__panel{
  position:relative;
  width: min(860px, calc(100% - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  padding: 18px 16px 14px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.kz-searchov.is-open .kz-searchov__panel{
  transform: translateY(0);
  opacity: 1;
}

.kz-searchov__title{
  font-size: 13px;
  letter-spacing:.06em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 12px;
  font-weight: 800;
}

.kz-searchov__field{
  display:flex;
  align-items:center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 10px;
}

.kz-searchov__icon{
  color: var(--ink-700);
  font-size: 16px;
  padding-left: 6px;
}

.kz-searchov__field input{
  flex:1 1 auto;
  border:0;
  outline:0;
  background: transparent;
  color: var(--ink-900);
  font-size: 16px;
  padding: 8px 6px;
  min-width: 0;
}
.kz-searchov__field input::placeholder{color: rgba(85,105,143,.75);}

/* search submit: system action -> indigo */
.kz-searchov__btn{
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--checkout);
  border-radius: var(--radius-sm);
  background: var(--checkout);
  color: var(--checkout-ink);
  font-weight: 800;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.kz-searchov__btn:hover{
  background: var(--checkout-hover);
  border-color: var(--checkout-hover);
  box-shadow: var(--shadow-2);
}
.kz-searchov__btn:active{transform: translateY(1px);}

.kz-searchov__hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-500);
}

/* body lock */
.kz-noscroll{overflow:hidden !important;}

/* Responsive */
@media (max-width: 1024px){
  .kz-nav{display:none;}
  .kz-burger{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
  }
  .kz-search{display:none;}
}

@media (max-width: 520px){
  .kz-topbar__left{display:none;}
  .kz-logo img{height: 38px;}

  #kz-drawer.kz-open .kz-drawer__body .kz-mmenu{display:block !important;}

  #wishlist-total{display:none;}

  .kz-actions{gap: 0;}

  .kz-container{padding: 0 10px;}

  .kz-badge{
    top: 6px;
    right: 6px;
  }
}


/* ===========================
   UPDATE (v2): Indigo main header for white logo
   - Submenu & dropdowns remain LIGHT (do not change)
   =========================== */

/* Main header background */
.kz-main{
  background: var(--checkout); /* Deep Indigo */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Ensure text/icons inside main header are readable on indigo */
.kz-main,
.kz-main a,
.kz-main .kz-link,
.kz-main .kz-act,
.kz-main .kz-actbtn{
  color: #fff;
}

/* Desktop nav links (dark header variant) */
.kz-main .kz-link{
  background: transparent;
}
.kz-main .kz-link:hover{
  background: rgba(255,255,255,.10);
  color:#fff;
}

/* underline indicator */
.kz-main .kz-link::after{
  background: transparent;
}
.kz-main .kz-item:hover > .kz-link::after,
.kz-main .kz-item.is-active > .kz-link::after{
  background: rgba(255,255,255,.55);
}

/* caret icon (if SVG/img) */
.kz-main .kz-caret{
  opacity:.85;
/*  filter: invert(1);*/
}

/* Burger (dark header) */
.kz-main .kz-burger{
  border-color: rgba(255,255,255,.28);
  background: transparent;
}
.kz-main .kz-burger span{
  background:#fff;
}
.kz-main .kz-burger:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.32);
  box-shadow:none;
}

/* Search (dark header) */
.kz-main .kz-search{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}
.kz-main .kz-search:focus-within{
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}
.kz-main .kz-search input{
  color:#fff;
}
.kz-main .kz-search input::placeholder{
  color: rgba(255,255,255,.55);
}
.kz-main .kz-search button{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.28);
  color:#fff;
}
.kz-main .kz-search button:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.32);
  box-shadow:none;
}

/* Header action icons */
.kz-main .kz-act{
  border-color: transparent;
}
.kz-main .kz-act:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  box-shadow:none;
}

/* Cart badge (copper accent + indigo border) */
.kz-main .kz-badge{
  background: var(--accent);
  color:#fff;
  border-color: var(--checkout);
}

.kz-searchov__close {
  position: absolute;
  right: 10px;
  top: 10px;
}

/* Mobile tweaks */
@media (max-width: 520px){
  .kz-main .kz-logo img{height:38px;}
}


.kz-account .dropdown-menu,
.kz-cart .dropdown-menu{
  z-index: 9999;
}