/* ==========================================================================
   DOCTOR LIENARD — shared site menu bar
   One stylesheet, loaded last on every page, so the header can never drift
   between Shop and Socials. All values are absolute px (no rem, no custom
   properties) so it renders identically regardless of each page's own
   root font-size or variable set.
   ========================================================================== */

.announcement-bar,
.header-wrapper{
  width:100%;
  align-self:stretch;
  flex:0 0 auto;
}

.announcement-bar{
  box-sizing:border-box;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(9px + env(safe-area-inset-top)) 20px 9px;
  text-align:center;
  border-top:1px solid rgba(18,18,18,.20);
  border-bottom:1px solid rgba(18,18,18,.16);
  background:#e8f7ef;
  color:#2f2f2f;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.2px;
  text-transform:uppercase;
}

.header-wrapper{
  position:relative;
  z-index:40;
  background:#fff;
  border-bottom:1px solid rgba(18,18,18,.10);
}

.header{
  box-sizing:border-box;
  max-width:1700px;
  min-height:76px;
  margin:0 auto;
  padding:12px 55px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}

/* ---- centre: brand mark ---- */
.site-title{
  grid-column:2;
  justify-self:center;
  margin:0;
  padding:0;
  font-size:0;
  line-height:1;
}
.site-title a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px;
  border-radius:999px;
  text-decoration:none;
  transition:opacity .18s ease,transform .18s ease;
}
.site-title a:hover{opacity:.82;transform:translateY(-1px)}
.site-title a:focus-visible{outline:2px solid #121212;outline-offset:2px}
.brand-mark{
  width:54px;height:54px;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 54px;
  border:0;background:transparent;
}
.brand-logo{
  width:40px;height:40px;
  display:block;object-fit:contain;flex:0 0 40px;
  transition:transform .18s ease;
}
.site-title a:hover .brand-logo{transform:scale(1.04)}

/* ---- left: navigation ---- */
.site-nav{
  grid-column:1;
  justify-self:start;
  display:flex;
  align-items:center;
  gap:2px;
  min-width:0;
}
.site-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 15px;
  border-radius:999px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:rgba(18,18,18,.56);
  transition:color .18s ease,background-color .18s ease;
}
.site-nav a:hover{color:#121212;background-color:rgba(18,18,18,.05)}
.site-nav a[aria-current="page"]{color:#121212}
.site-nav a[aria-current="page"]::after{
  content:"";
  position:absolute;left:15px;right:15px;bottom:9px;
  height:1.5px;border-radius:999px;background:#121212;
}
.site-nav a:focus-visible{outline:2px solid #121212;outline-offset:2px}

/* ---- right: cart ---- */
.header-actions{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  white-space:nowrap;
}
.header-control{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border:1px solid rgba(18,18,18,.12);
  border-radius:999px;
  background:#fff;
  box-shadow:0 5px 18px rgba(18,18,18,.06);
  color:#2f2f2f;
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.header-control:hover{
  box-shadow:0 8px 22px rgba(18,18,18,.10);
  border-color:rgba(18,18,18,.18);
  transform:translateY(-1px);
}
.header-control:focus-visible{outline:2px solid #121212;outline-offset:2px}
.cart-control{width:44px;padding:0;flex:0 0 44px}
.cart-control svg{width:22px;height:22px;stroke-width:1.8}
.cart-count{
  position:absolute;right:-3px;top:-4px;
  min-width:17px;height:17px;
  display:none;align-items:center;justify-content:center;
  border-radius:999px;background:#121212;color:#fff;
  font-size:10px;line-height:1;border:2px solid #fff;
}
.cart-count.show{display:flex}

/* ---- breakpoints (mirrors the store's own 989 / 749 steps) ---- */
@media(max-width:989px){
  .header{padding-left:30px;padding-right:30px}
  .header-actions{gap:9px}
  .site-nav a{padding:0 11px;font-size:11.5px}
  .site-nav a[aria-current="page"]::after{left:11px;right:11px}
}

@media(max-width:749px){
  .announcement-bar{min-height:35px;font-size:11px}
  .header{min-height:68px;padding:11px 15px;gap:10px}
  .site-title a{padding:3px}
  .brand-mark{width:48px;height:48px;flex-basis:48px}
  .brand-logo{width:35px;height:35px;flex-basis:35px}
  .site-nav{gap:0}
  .site-nav a{min-height:40px;padding:0 8px;font-size:10.5px;letter-spacing:.5px}
  .site-nav a[aria-current="page"]::after{left:8px;right:8px;bottom:7px}
  .header-control{min-height:40px}
  .cart-control{width:40px;flex-basis:40px}
  .cart-control svg{width:20px;height:20px}
}

@media(max-width:360px){
  .header{padding-left:10px;padding-right:10px;gap:6px}
  .site-nav a{padding:0 6px;font-size:10px;letter-spacing:.3px}
  .site-nav a[aria-current="page"]::after{left:6px;right:6px}
}

@media(prefers-reduced-motion:reduce){
  .site-title a,.brand-logo,.site-nav a,.header-control{transition:none}
}