/* =====================================================================
   KAMASAM SAMURAI — Cabecera profesional (estilo C) v3
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Shippori+Mincho:wght@600;700;800&family=Noto+Sans+JP:wght@700&display=swap');

.ksh-header{
  --tinta:#16161a; --tinta2:#0f0f13; --washi:#e8e3d5; --rojo:#b23a30;
  --tenue:#a09a8c; --claro:#cfcabb; --linea:rgba(255,255,255,.08);
  position:sticky; top:0; z-index:9999;
  background:var(--tinta); border-bottom:1px solid var(--linea);
  font-family:"Manrope",sans-serif; overflow-x:hidden;
}
.ksh-header *{box-sizing:border-box}

/* Barra superior */
.ksh-topbar{
  background:var(--tinta2); color:var(--tenue);
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  text-align:center; padding:9px 14px; font-weight:500;
  max-height:70px; overflow:hidden;
  transition:max-height .3s ease, padding .3s ease, opacity .25s ease;
}

/* Zona principal */
.ksh-main{position:relative; overflow:hidden; padding:15px 30px}
.ksh-kanji{
  position:absolute; top:50%; right:34px; transform:translateY(-50%);
  font-family:"Noto Sans JP",sans-serif; font-weight:700; font-size:100px;
  color:rgba(178,58,48,.09); line-height:1; pointer-events:none; user-select:none;
}
.ksh-row{
  position:relative; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}

/* Logo */
.ksh-logo{justify-self:center; text-decoration:none; display:inline-flex; align-items:center}
.ksh-logo img{max-height:54px; width:auto; display:block}
.ksh-logo-txt{text-align:center; display:block}
.ksh-logo-txt b{display:block; font-family:"Shippori Mincho",serif; font-weight:800; font-size:25px; letter-spacing:5px; color:var(--washi); line-height:1}
.ksh-logo-txt small{display:block; font-size:9px; letter-spacing:6px; color:var(--rojo); font-weight:700; margin-top:4px; font-family:"Manrope",sans-serif}
.ksh-logo-txt .ksh-line{display:block; width:44px; height:1px; background:var(--rojo); margin:8px auto 0}

/* Herramientas */
.ksh-tools{justify-self:end; display:flex; align-items:center; gap:18px}
.ksh-ic{background:none; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; color:var(--claro); text-decoration:none; transition:color .2s}
.ksh-ic svg{width:21px; height:21px}
.ksh-ic:hover{color:#fff}
.ksh-cart{position:relative}
.ksh-cart svg, .ksh-cart .ksh-cart-count{pointer-events:none} /* clic siempre sobre el enlace */
.ksh-cart-count{
  position:absolute; top:-8px; right:-10px; background:var(--rojo); color:#fff;
  font-size:10px; font-weight:700; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; display:flex; align-items:center; justify-content:center; line-height:1;
}

/* =================== MENU ESCRITORIO (por contenedor) =================== */
.ksh-nav{display:flex; justify-content:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--linea)}
.ksh-nav ul{display:flex; flex-wrap:wrap; justify-content:center; gap:30px; list-style:none; margin:0; padding:0}
.ksh-nav ul li{margin:0; padding:0; float:none}
.ksh-nav ul li a{
  color:var(--claro) !important; text-decoration:none; font-family:"Shippori Mincho",serif;
  font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 0; position:relative; display:inline-block; background:none;
}
.ksh-nav ul li a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--rojo); transition:right .28s ease}
.ksh-nav ul li a:hover{color:#fff !important}
.ksh-nav ul li a:hover::after{right:0}

/* Buscador desplegable */
.ksh-searchbar{max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--tinta2); border-top:1px solid var(--linea)}
.ksh-searchbar.abierto{max-height:100px}
.ksh-searchbar form{display:flex; max-width:640px; margin:0 auto; padding:16px 20px; gap:10px}
.ksh-searchbar input[type=search]{flex:1; background:#1e1e22; border:1px solid var(--linea); color:#ddd; padding:11px 15px; border-radius:5px; font-size:14px; outline:none}
.ksh-searchbar button{background:var(--rojo); border:none; color:#fff; padding:0 16px; border-radius:5px; cursor:pointer; display:flex; align-items:center}
.ksh-searchbar button svg{width:18px; height:18px}

.ksh-burger{display:none}

/* =================== DRAWER MOVIL =================== */
.ksh-drawer{
  position:fixed; top:0; bottom:0; left:0; width:82%; max-width:330px;
  background:#16161a; transform:translateX(-100%); transition:transform .3s ease;
  z-index:10001; padding:24px; overflow-y:auto; border-right:1px solid rgba(255,255,255,.08);
}
.ksh-drawer.abierto{transform:translateX(0)}
.ksh-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:.3s; z-index:10000}
.ksh-overlay.abierto{opacity:1; visibility:visible}
.ksh-close{background:none; border:none; color:#cfcabb; font-size:24px; cursor:pointer; margin-bottom:18px; line-height:1}
.ksh-dsearch{display:flex; margin-bottom:20px}
.ksh-dsearch input{width:100%; background:#1e1e22; border:1px solid rgba(255,255,255,.08); color:#ddd; padding:11px 14px; border-radius:6px; font-size:14px; outline:none}

/* Menu del drawer: SIEMPRE vertical y claro (forzado sobre Astra) */
#ksh-drawer ul{list-style:none !important; margin:0 !important; padding:0 !important; display:block !important}
#ksh-drawer ul li{display:block !important; float:none !important; width:100% !important; margin:0 !important; padding:0 !important}
#ksh-drawer ul li a{
  display:block !important; width:100% !important;
  color:#cfcabb !important; text-decoration:none !important;
  font-family:"Shippori Mincho",serif !important; font-size:18px !important; font-weight:600 !important;
  letter-spacing:1px !important; text-transform:none !important;
  padding:14px 2px !important; border-bottom:1px solid rgba(255,255,255,.08) !important; background:none !important;
}
#ksh-drawer ul li a:hover{color:#fff !important; padding-left:8px !important; transition:.2s}

/* =================== RESPONSIVE =================== */
@media (max-width:880px){
  .ksh-kanji{display:none}
  .ksh-nav{display:none !important}
  .ksh-topbar{font-size:9.5px; letter-spacing:.8px; padding:6px 10px}
  /* Al hacer scroll en el celular, ocultar la barra superior */
  .ksh-header.ksh-scrolled .ksh-topbar{
    max-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; opacity:0 !important;
  }
  .ksh-main{padding:10px 14px}
  .ksh-row{grid-template-columns:auto 1fr auto}
  .ksh-burger{display:inline-flex; align-items:center; justify-self:start; background:none; border:none; cursor:pointer; color:#cfcabb; padding:0}
  .ksh-burger svg{width:26px; height:26px}
  .ksh-logo img{max-height:38px !important}
  .ksh-logo-txt b{font-size:18px; letter-spacing:3px}
  .ksh-logo-txt small{letter-spacing:4px}
  .ksh-tools{gap:14px}
}