/* ============================================================
   THINKPINK — Professional Mobile Drawer (Sidebar)
   Loaded after site.min.css so these rules override the base
   hamburger / drawer styles. The drawer is a mobile-only
   navigation sidebar and never appears on desktop.
   ============================================================ */

/* ---------- Desktop: drawer & hamburger never appear ---------- */
@media(min-width:701px){
  .hamburger,
  .drawer-overlay,
  .drawer{
    display:none !important;
  }
}

/* ---------- Overlay ---------- */
.drawer-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(24,10,15,.52);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.drawer-overlay.open{
  opacity:1;
  visibility:visible;
}

/* ---------- Hamburger button (mobile) ---------- */
@media(max-width:700px){
  .hamburger{
    display:inline-flex;
    width:42px;
    height:42px;
    padding:0;
    margin:0;
    border:0;
    border-radius:50%;
    background:transparent;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    transition:background .2s ease;
  }
  .hamburger:hover{background:rgba(49,21,34,.06)}
  .hamburger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .hamburger span{
    display:block;
    width:20px;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform .25s ease,opacity .25s ease;
  }
}

/* ---------- Drawer panel ---------- */
.drawer{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(340px,86vw);
  z-index:210;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,#fff8f7 0%,#fdeef0 100%);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px rgba(49,21,34,.22);
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
  padding:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.drawer.open{
  transform:translateX(0);
}

/* ---------- Drawer header ---------- */
.drawer-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:19px 24px;
  border-bottom:1px solid var(--line);
  background:rgba(255,248,247,.96);
}
.drawer-head .logo img{height:30px;width:auto;display:block}
.drawer-close{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  background:none;
  border:0;
  border-radius:50%;
  font-size:26px;
  line-height:1;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s ease,transform .25s ease;
}
.drawer-close:hover{
  background:rgba(49,21,34,.08);
  transform:rotate(90deg);
}
.drawer-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Drawer navigation ---------- */
.drawer nav{
  display:flex !important;
  flex-direction:column;
  gap:0;
  padding:8px 0;
}
.drawer nav > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:500 15px var(--sans);
  color:var(--ink);
  padding:16px 24px;
  border-bottom:1px solid var(--line);
  transition:background .2s ease,color .2s ease,padding-left .2s ease;
}
.drawer nav > a:hover,
.drawer nav > a:focus-visible{
  background:rgba(188,138,59,.08);
  color:var(--gold);
  padding-left:28px;
}

/* ---------- "Collections" toggle styled like other menu items ---------- */
.drawer-dropdown-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  padding:16px 24px;
  font:500 15px var(--sans);
  color:var(--ink);
  cursor:pointer;
  text-align:left;
  transition:background .2s ease,color .2s ease,padding-left .2s ease;
}
.drawer-dropdown-toggle:hover,
.drawer-dropdown-toggle:focus-visible{
  background:rgba(188,138,59,.08);
  color:var(--gold);
  padding-left:28px;
}
.drawer-dropdown-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* Chevron / plus indicator */
.drawer-chevron{
  flex:none;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  font:600 14px/1 var(--sans);
  color:var(--gold);
  background:#fff8f7;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.drawer-dropdown.active .drawer-chevron{
  transform:rotate(45deg);
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
}

/* ---------- Submenu (Gotta Kinari, Mukesh, ...) ---------- */
.drawer-dropdown-content{
  display:none;
  overflow:hidden;
}
.drawer-dropdown.active .drawer-dropdown-content{
  display:block;
  animation:drawerDrop .3s ease;
}
@keyframes drawerDrop{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.drawer-dropdown-content{
  background:rgba(232,204,209,.18);
  border-bottom:1px solid var(--line);
  padding:8px 0;
}
.drawer-dropdown-content a{
  display:block;
  font:13px var(--sans);
  color:#6f4b59;
  padding:11px 24px 11px 40px;
  border-left:2px solid transparent;
  transition:background .2s ease,color .2s ease,border-left-color .2s ease;
}
.drawer-dropdown-content a:hover,
.drawer-dropdown-content a:focus-visible{
  background:rgba(255,255,255,.65);
  color:var(--ink);
  border-left-color:var(--gold);
}
.drawer-dropdown-content a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* ---------- Drawer footer / bag ---------- */
.drawer-footer{
  margin-top:auto;
  border-top:1px solid var(--line);
  padding:14px 24px 20px;
}
.drawer-footer small{
  display:block;
  font:9px var(--mono);
  letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:6px;
}
.drawer-footer .bag-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:500 14px var(--sans);
  color:var(--ink);
  padding:8px 0;
  transition:color .2s ease;
}
.drawer-footer .bag-link:hover{color:var(--gold)}
.drawer-footer .bag-link span{
  background:var(--gold);
  color:#fff;
  border-radius:50%;
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:inline-grid;
  place-items:center;
  font:10px var(--mono);
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .drawer,
  .drawer-overlay,
  .drawer-dropdown-content,
  .drawer-chevron,
  .drawer-close,
  .hamburger span{
    transition:none !important;
  }
}