/* ============================================================
   TARKASI — the one header, on every page.

   Logo and name on the left; Collections (with the three
   collections under it) and Contact us; then Sign in — or, signed
   in, your initials and a small menu — Wishlist and Bag. The same
   markup is on every page
   (between the TK:HEADER markers), so the bar never changes as
   a visitor moves from the homepage to the shop to their bag.

   It is a <div role="banner">, not a <header>, on purpose: the
   older page styles still carry rules for a bare `header`, and
   those must not reach this.
   ============================================================ */
:root{ --tkh-h:74px }

.tkh{
  position:sticky; top:0; z-index:100; height:var(--tkh-h);
  background:rgba(var(--bg-rgb),.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(var(--fg-rgb),.07);
  font-family:"Spline Sans",system-ui,sans-serif; color:var(--silver);
  transition:box-shadow .3s, background .3s;
}
.tkh.scrolled{ background:rgba(var(--bg-rgb),.94); box-shadow:0 10px 30px -18px rgba(var(--shade-rgb),calc(.9 * var(--shade-k))) }
.tkh-in{
  height:100%; display:flex; align-items:center; gap:clamp(16px,3vw,48px);
  padding-inline:clamp(16px,3.2vw,44px);
}

/* left: the mark and the name */
.tkh-logo{ display:inline-flex; align-items:center; gap:.7rem; flex:none; color:inherit; text-decoration:none }
.tkh-mark{ width:30px; height:40px; flex:none; display:block }
.tkh-mark img{ width:100%; height:100%; object-fit:contain; display:block }
.tkh-word{
  font-family:"Fraunces",Georgia,serif; font-size:1.16rem; letter-spacing:.42em; text-transform:uppercase;
  padding-left:.12em; color:var(--silver); white-space:nowrap;
}

/* the links sit just right of the name */
.tkh-nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); flex:1; min-width:0 }
.tkh-nav a{
  position:relative; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver-dim); text-decoration:none; padding-block:.45rem; transition:color .25s; white-space:nowrap;
}
.tkh-nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--brass); transition:width .3s }
.tkh-nav a:hover, .tkh-nav a[aria-current="page"]{ color:var(--silver) }
.tkh-nav a:hover::after, .tkh-nav a[aria-current="page"]::after{ width:100% }

/* a small menu under a link or a button: the collections, the account */
.tkh-has-sub, .tkh-acct{ position:relative; display:flex; align-items:center; align-self:stretch }
.tkh-sub{
  position:absolute; top:100%; left:-14px; z-index:5; min-width:196px; padding:8px 0;
  display:flex; flex-direction:column;
  background:rgba(var(--bg-rgb),.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(var(--fg-rgb),.1); border-radius:4px;
  box-shadow:0 18px 40px -20px rgba(var(--shade-rgb),calc(.9 * var(--shade-k)));
}
.tkh-acct-menu{ left:auto; right:-6px }
.tkh-sub[hidden]{ display:none !important }
.tkh-sub a, .tkh-sub button{
  font-family:"Spline Sans",system-ui,sans-serif; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--silver-dim); text-decoration:none; padding:.6rem 16px; white-space:nowrap; text-align:left;
  background:none; border:0; cursor:pointer; transition:color .25s, background .25s;
}
.tkh-sub a::after{ display:none }
.tkh-sub a:hover, .tkh-sub button:hover, .tkh-sub a[aria-current="page"]{ color:var(--silver); background:rgba(var(--fg-rgb),.05) }
/* the collections open on hover where there is a pointer, and on focus anywhere */
.tkh-has-sub .tkh-sub{ display:none }
.tkh-has-sub:focus-within .tkh-sub{ display:flex }
@media (hover:hover){ .tkh-has-sub:hover .tkh-sub{ display:flex } }

/* right: account, wishlist, bag */
.tkh-icons{ display:flex; align-items:center; gap:clamp(10px,1.6vw,22px); margin-left:auto; flex:none }
.tkh-icon{
  position:relative; display:inline-flex; align-items:center; gap:.5rem; color:var(--silver-dim); text-decoration:none;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:.4rem .2rem; transition:color .25s;
}
.tkh-icon svg{ width:19px; height:19px; flex:none }
.tkh-icon:hover, .tkh-icon[aria-current="page"]{ color:var(--brass-bright) }
.tkh-count{
  position:absolute; top:-2px; left:12px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--brass); color:var(--ink); font-size:.62rem; font-weight:600; letter-spacing:0;
  display:inline-grid; place-items:center; line-height:1;
}
.tkh-count[hidden]{ display:none }
.tkh [hidden], .tkh-drawer [hidden]{ display:none !important }

/* signed in: your initials on a disc of the page's own text colour, so it
   is a soft white on the dark look and dark on the light one; brass when open */
.tkh-me{ background:none; border:0; cursor:pointer; padding:.2rem .1rem; display:inline-flex }
.tkh-initials{
  width:36px; height:36px; border-radius:50%;
  background:rgba(var(--fg-rgb),.84); color:rgb(var(--bg-rgb));
  display:inline-grid; place-items:center; font-size:.8rem; font-weight:600; letter-spacing:.05em; line-height:1;
  transition:background .25s, color .25s;
}
.tkh-me:hover .tkh-initials, .tkh-me[aria-expanded="true"] .tkh-initials{ background:var(--brass); color:var(--ink) }
.tkh-me:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px; border-radius:50% }

.tkh-burger{
  display:none; width:40px; height:40px; margin-right:-8px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:6px; color:var(--silver);
}
.tkh-burger span{ display:block; width:22px; height:1.5px; background:currentColor; transition:transform .3s }
.tkh-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg) }
.tkh-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg) }

/* the phone menu */
.tkh-drawer{
  position:fixed; inset:var(--tkh-h) 0 0 0; z-index:99; background:rgba(var(--bg-rgb),.98);
  padding:28px clamp(20px,6vw,40px); display:flex; flex-direction:column; gap:4px; overflow:auto;
}
.tkh-drawer[hidden]{ display:none !important }
.tkh-drawer-main, .tkh-drawer-coll{ display:flex; flex-direction:column; gap:4px }
.tkh-drawer a, .tkh-drawer button{
  font-family:"Fraunces",Georgia,serif; font-size:1.6rem; color:var(--silver); text-decoration:none; text-align:left;
  padding:14px 0; border:0; border-bottom:1px solid rgba(var(--fg-rgb),.08); background:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; width:100%;
}
.tkh-drawer small{ font-family:"Spline Sans",system-ui,sans-serif; font-size:.8rem; color:var(--brass) }
.tkh-drawer .tkh-back, .tkh-drawer .tkh-eyebrow{
  font-family:"Spline Sans",system-ui,sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; border-bottom:0;
}
.tkh-drawer .tkh-back{ color:var(--silver-dim); padding:4px 0 20px; justify-content:flex-start }
.tkh-drawer .tkh-eyebrow{ color:var(--brass); margin:0 0 4px }
body.tkh-lock{ overflow:hidden }

@media (max-width:980px){
  .tkh-icon .tkh-lbl{ display:none }
}
@media (max-width:760px){
  .tkh-nav{ display:none }
  .tkh-burger{ display:inline-flex }
  .tkh-word{ font-size:1rem; letter-spacing:.34em }
  .tkh-icons{ gap:6px }
  .tkh-icon{ padding:.5rem }
  .tkh-acct{ display:none }  /* in the menu instead */
}

/* ============================================================
   The wishlist heart — on shop cards, in the product panel and
   on the homepage. One button, one look, everywhere.
   ============================================================ */
.wish{
  position:absolute; top:.7rem; right:.7rem; z-index:3; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; padding:0;
  background:rgba(10,12,15,.62); border:1px solid rgba(var(--fg-rgb),.14); color:var(--silver);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .2s, background .2s, color .2s;
}
.wish svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5 }
.wish:hover{ background:rgba(10,12,15,.85); transform:scale(1.06) }
.wish[aria-pressed="true"]{ color:var(--brass-bright); border-color:rgba(var(--brass-rgb),.6) }
.wish[aria-pressed="true"] svg{ fill:currentColor }
.wish:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:2px }
.wish.pop{ animation:wishpop .35s ease }
@keyframes wishpop{ 40%{ transform:scale(1.25) } }
/* the in-panel version sits in the line of buttons, not over a photo */
.wish.wish-inline{
  position:static; width:auto; height:auto; border-radius:3px; padding:.8rem 1rem; gap:.5rem;
  display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  background:transparent; border-color:rgba(var(--fg-rgb),.18);
}
.wish.wish-inline:hover{ transform:none; border-color:var(--brass) }
@media (prefers-reduced-motion:reduce){ .wish, .wish.pop{ animation:none; transition:none } }

/* An in-page link lands its section below the bar, not under it. */
[id]{ scroll-margin-top:calc(var(--tkh-h) + 12px) }