/* ============================================================
   header.css — Header (Navbar + Drawer) এর সব CSS
   শুধু header ডিজাইন বদলাতে এই ফাইল খুলুন
   ============================================================ */

/* ══ NAVBAR ══ */
/* ── নতুন হেডার — jazubshop স্টাইল ── */
.navbar{background:var(--white);position:fixed;top:0;left:0;right:0;z-index:200;box-shadow:0 1px 6px rgba(0,0,0,0.10)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 4%;height:58px;gap:10px;position:relative}
/* বাম পাশের গ্রুপ — হ্যামবার্গার + সার্চ */
.nav-left-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* হ্যামবার্গার বাম দিকে */
.nav-ham-left{background:none;border:none;cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:4.5px;flex-shrink:0}
.nav-ham-left span{display:block;width:22px;height:2px;background:var(--black);border-radius:2px}
/* সার্চ বাম পাশে */
.nav-search-icon{background:none;border:none;border-radius:50%;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--black);flex-shrink:0}
/* লোগো মাঝখানে */
.nav-logo-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px}
.nav-logo-center .logo-text .k{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:700;color:var(--black);letter-spacing:.06em;display:block}
.nav-logo-center .logo-text .rule{height:1.5px;background:var(--gold);margin:1px 0}
.nav-logo-center .logo-text .s{font-family:'Playfair Display',Georgia,serif;font-size:.55rem;color:var(--gold);letter-spacing:.35em;display:block}
/* ডান পাশে একাউন্ট + কার্ট */
.nav-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.nav-icon-btn{background:none;border:none;cursor:pointer;padding:6px;font-size:1.2rem;color:var(--black);position:relative;display:flex;align-items:center;justify-content:center}
.nav-icon-btn svg{width:22px;height:22px;stroke:var(--black);fill:none;stroke-width:1.8}
.nav-cart-badge{position:absolute;top:2px;right:2px;background:var(--red);color:#fff;font-size:.55rem;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 2px}

/* Mobile header language switch (profile/cart icons replaced on mobile) */
.ks-language-switcher-header-mobile{
  display:none;
  margin:0;
  padding:1px;
  background:#fff;
  border-color:rgba(199,167,77,.78);
  box-shadow:0 2px 10px rgba(38,51,60,.06);
}
.ks-language-switcher-header-mobile button{
  min-width:50px;
  min-height:27px;
  padding:3px 6px;
  font-size:.64rem;
  line-height:1.1;
  color:#5F5A50;
}
.ks-language-switcher-header-mobile button.is-active{
  color:#26333c;
}

@media(max-width:767px){
  .nav-right{gap:0; margin-left:auto;}
  .ks-language-switcher-header-mobile{display:inline-flex;}
  .nav-icon-btn-mobile-hide{display:none;}
}

/* Keep a visible gap between the centered logo and the language switch
   on narrow phones without changing desktop header behaviour. */
@media(max-width:380px){
  .nav-logo-center{
    left:calc(50% - 7px);
    gap:6px;
  }
  .nav-logo-center > svg{width:23px;height:29px;}
  .nav-logo-center .logo-text .k{font-size:1.15rem;}
  .nav-logo-center .logo-text .s{font-size:.50rem;letter-spacing:.30em;}
  .ks-language-switcher-header-mobile button{
    min-width:47px;
    padding:3px 5px;
    font-size:.61rem;
  }
}

@media(max-width:340px){
  .nav-inner{padding-left:3%;padding-right:3%;}
  .nav-left-actions{gap:5px;}
  .nav-logo-center{left:calc(50% - 9px);}
  .ks-language-switcher-header-mobile button{
    min-width:44px;
    padding:3px 4px;
    font-size:.59rem;
  }
}

@media(min-width:768px){
  .ks-language-switcher-header-mobile{display:none;}
}

/* Desktop nav */
@media(min-width:768px){
  .nav-ham-left{display:none}
  .nav-search-icon{display:none}
  .nav-logo-center{position:static;transform:none}
  .nav-inner{justify-content:space-between}
}
/* Logo */
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-logo svg{width:30px;height:36px}
.logo-text{line-height:1.1}
.logo-text .k{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:var(--black);letter-spacing:0.08em;display:block}
.logo-text .rule{height:1.5px;background:var(--gold);margin:2px 0}
.logo-text .s{font-family:'Playfair Display',serif;font-size:0.58rem;color:var(--gold);letter-spacing:0.38em;display:block}
/* Search */
.nav-search{flex:1;max-width:400px;position:relative;display:none}
@media(min-width:640px){.nav-search{display:block}}
.nav-search input{width:100%;border:1.5px solid var(--border);border-radius:var(--r);padding:8px 38px 8px 12px;font-size:0.88rem;font-family:inherit;background:var(--cream)}
.nav-search input:focus{outline:none;border-color:var(--gold)}
.nav-search button{position:absolute;right:0;top:0;height:100%;width:36px;background:#F9F6EF;border-radius:0 var(--r) var(--r) 0;color:var(--white)}
/* Nav actions */
.nav-actions{display:flex;align-items:center;gap:6px}
.nav-cart{background:#F9F6EF;color:var(--white);border-radius:var(--r);padding:7px 14px;font-size:0.82rem;font-weight:600;display:flex;align-items:center;gap:6px;position:relative}
.nav-badge{background:var(--red);color:var(--white);font-size:0.6rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.hamburger{background:none;display:flex;flex-direction:column;gap:4px;padding:6px}
.hamburger span{display:block;width:20px;height:2px;background:#F9F6EF;border-radius:2px}
@media(min-width:768px){.hamburger{display:none}}
/* Nav menu (desktop) */
.nav-menu-bar{background:#F9F6EF;display:none}
@media(min-width:768px){.nav-menu-bar{display:flex;padding:0 4%}}
.nav-menu-bar a{color:rgba(255,255,255,0.85);font-size:0.82rem;padding:10px 14px;display:block;white-space:nowrap;transition:color .2s}
.nav-menu-bar a:hover{color:var(--gold)}

/* ══ OFF-CANVAS SLIDE-IN DRAWER ══ */
body.ks-drawer-open{
  overflow:hidden;
  overscroll-behavior:none;
}

.drawer-overlay{
  position:fixed;
  inset:0;
  z-index:500;
  display:block;
  background:rgba(20,25,28,.56);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .32s ease, visibility 0s linear .32s;
}

.drawer-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .32s ease;
}

.drawer{
  position:absolute;
  top:0;
  left:0;
  width:min(88vw, 360px);
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  color:var(--black);
  box-shadow:18px 0 48px rgba(0,0,0,.24);
  transform:translate3d(-102%,0,0);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  will-change:transform;
  border-radius:0 18px 18px 0;
}

.drawer-overlay.open .drawer{
  transform:translate3d(0,0,0);
}

.drawer-head{
  flex:0 0 auto;
  min-height:88px;
  padding:18px 18px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg,#36454F 0%,#263238 100%);
  border-bottom:3px solid var(--gold);
}

.drawer-brand{
  display:flex;
  align-items:center;
  gap:11px;
}

.drawer-head-logo{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1rem;
  color:#fff;
  font-weight:700;
}

.drawer-brand-name{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.02rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.08em;
  line-height:1.05;
}

.drawer-brand-rule{
  width:58px;
  height:1px;
  margin:4px 0 3px;
  background:var(--gold);
}

.drawer-brand-subtitle{
  font-family:'Playfair Display',Georgia,serif;
  font-size:.51rem;
  color:var(--gold);
  letter-spacing:.35em;
  line-height:1;
}

.drawer-close{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}

.drawer-close:hover{
  background:rgba(255,255,255,.18);
  transform:rotate(6deg);
}

.drawer-account{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  background:#F9F6EF;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}

.drawer-account-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:visible;
  border-radius:50%;
  background:#fff;
  color:var(--black);
  box-shadow:0 3px 12px rgba(54,69,79,.10);
}

.drawer-account-avatar{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}

.drawer-account-guest-icon{
  display:grid;
  place-items:center;
}

.drawer-account-initial{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#36454F,#1F2C33);
  color:#fff;
  font-size:1rem;
  font-weight:800;
  text-transform:uppercase;
}

.drawer-account-avatar[hidden],
.drawer-account-guest-icon[hidden],
.drawer-account-initial[hidden],
.drawer-account-status[hidden]{
  display:none !important;
}

.drawer-account-status{
  position:absolute;
  right:-1px;
  bottom:0;
  width:11px;
  height:11px;
  border:2px solid #F9F6EF;
  border-radius:50%;
  background:#28A745;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}

.drawer-account-text{
  flex:1 1 auto;
  min-width:0;
}

.drawer-account-text strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.91rem;
  line-height:1.25;
}

.drawer-account-text > span{
  display:block;
  overflow:hidden;
  margin-top:2px;
  color:var(--muted);
  font-size:.75rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.drawer-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:9px 0 18px;
  scrollbar-width:thin;
}

.drawer-section-title{
  padding:10px 18px 7px;
  color:#8B857A;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.drawer-nav-link,
.drawer-category-toggle{
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 18px;
  border:0;
  border-bottom:1px solid #F1EDE5;
  background:#fff;
  color:var(--black);
  text-align:left;
  text-decoration:none;
  font-family:inherit;
  font-size:.91rem;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, padding-left .18s ease;
}

.drawer-nav-link:hover,
.drawer-category-toggle:hover{
  padding-left:22px;
  background:#F9F6EF;
  color:#A9862D;
}

.drawer-nav-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  display:grid;
  place-items:center;
  color:var(--gold);
}

.drawer-nav-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.drawer-nav-text{
  flex:1 1 auto;
}

.drawer-arrow{
  width:18px;
  height:18px;
  flex:0 0 18px;
  transition:transform .25s ease;
}

.drawer-category.open .drawer-arrow{
  transform:rotate(180deg);
}

.drawer-submenu{
  max-height:0;
  overflow:hidden;
  background:#FCFAF6;
  transition:max-height .32s cubic-bezier(.4,0,.2,1);
}

.drawer-category.open .drawer-submenu{
  max-height:420px;
}

.drawer-submenu a{
  position:relative;
  min-height:43px;
  display:flex;
  align-items:center;
  padding:9px 18px 9px 54px;
  border-bottom:1px solid #F0ECE4;
  color:#5F625F;
  font-size:.85rem;
  font-weight:500;
  text-decoration:none;
  transition:background .18s ease, color .18s ease, padding-left .18s ease;
}

.drawer-submenu a::before{
  content:'';
  position:absolute;
  left:35px;
  width:6px;
  height:6px;
  border:1.5px solid var(--gold);
  border-radius:50%;
}

.drawer-submenu a:hover{
  padding-left:58px;
  background:#F5F0E6;
  color:#A9862D;
}

.drawer-offer{
  color:#D33A31;
}

.drawer-offer .drawer-nav-icon{
  color:#D33A31;
}

.drawer-footer{
  flex:0 0 auto;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:#fff;
  box-shadow:0 -8px 20px rgba(54,69,79,.06);
}

.drawer-contact{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:.76rem;
}

.drawer-order{
  width:100%;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,#C7A74D,#B48D2D);
  color:#fff;
  font-family:inherit;
  font-size:.91rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(180,141,45,.24);
  transition:transform .18s ease, box-shadow .18s ease;
}

.drawer-order:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(180,141,45,.32);
}

.drawer-close:focus-visible,
.drawer-nav-link:focus-visible,
.drawer-category-toggle:focus-visible,
.drawer-order:focus-visible,
.drawer-account:focus-visible{
  outline:3px solid rgba(199,167,77,.38);
  outline-offset:-3px;
}

@media (prefers-reduced-motion:reduce){
  .drawer-overlay,
  .drawer,
  .drawer-arrow,
  .drawer-submenu{
    transition-duration:.01ms !important;
  }
}

@media (min-width:768px){
  .drawer-overlay{display:none !important}
}