/* =========================================================================
   AC Nav Component — shared/nav.css
   Depends on: shared/ac-brand.css (CSS vars: --ac-surface, --ac-border, etc.)
   ========================================================================= */

/* ---- Mobile menu panel (dropdown from header, right-aligned) ---- */
.mobile-menu{
  display:none;
  position:absolute;top:100%;right:16px;z-index:60;
  width:240px;
  background:var(--ac-surface);
  border:1px solid var(--ac-border);
  border-radius:var(--ac-radius-lg);
  box-shadow:var(--ac-shadow-2);
  padding:14px 18px 18px;
  transform:translateY(-8px);
  opacity:0;pointer-events:none;
  transition:transform .25s var(--ac-ease),opacity .2s var(--ac-ease);
}
.mobile-menu.is-open{display:block;transform:translateY(0);opacity:1;pointer-events:auto;}
.mobile-menu a{
  display:block;
  padding:14px 0;
  font-family:var(--ac-font-display);font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:2px;color:var(--ac-secondary);
  border-bottom:1px solid var(--ac-border);
  text-decoration:none;
}
.mobile-menu a:hover{color:var(--ac-primary);}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu__close{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--ac-border);background:transparent;
  cursor:pointer;color:var(--ac-secondary);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ac-ease),color .2s var(--ac-ease);
}
.mobile-menu__close:hover{background:var(--ac-bg-alt);color:var(--ac-primary);}
.mobile-menu__close i{width:18px;height:18px;}

/* ---- Icon buttons (search, account, cart) ---- */
.iconbtn{
  background:none;border:none;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;gap:8px;padding:8px;
  font-family:var(--ac-font-display);font-size:12px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
}
.iconbtn--cart{gap:4px;}
.iconbtn__label{display:inline;}
.iconbtn:hover{color:var(--ac-primary);}

/* ---- Header (sticky nav bar) ---- */
.header{
  background:transparent;display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px 0;position:sticky;top:12px;z-index:80;
  max-width:1240px;margin:0 auto;border-radius:var(--ac-radius-lg);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;height:72px;padding:0 32px;
  background:var(--ac-surface);border:1px solid var(--ac-border);
  border-radius:var(--ac-radius-lg);box-shadow:var(--ac-shadow-1);
}
.header-logo{display:flex;align-items:center;gap:10px;color:var(--ac-secondary);}
.header-logo .mark{
  width:42px;height:42px;background:var(--ac-secondary);
  -webkit-mask:url('../assets/logo-mark-hand.png') center/contain no-repeat;
          mask:url('../assets/logo-mark-hand.png') center/contain no-repeat;
}
.header-logo .word{font-family:var(--ac-font-display);font-weight:600;font-size:17px;letter-spacing:0.28em;text-transform:uppercase;white-space:nowrap;}
.header-nav{display:flex;gap:32px;align-items:center;}
.header-nav a{
  font-family:var(--ac-font-display);font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ac-secondary);display:inline-flex;align-items:center;gap:6px;transition:color .2s var(--ac-ease);
}
.header-nav a:hover{color:var(--ac-primary);}
.header-icons{display:flex;gap:18px;align-items:center;color:var(--ac-secondary);}
.header-icons button{
  background:none;border:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;
  padding:6px;border-radius:8px;transition:color .2s var(--ac-ease),background .2s var(--ac-ease);position:relative;
}
.header-icons button:hover{color:var(--ac-primary);background:var(--ac-bg-alt);}
.header-icons i{width:20px;height:20px;}
.cart-count{
  position:absolute;top:-2px;right:-4px;background:var(--ac-primary);color:var(--ac-on-primary);
  font-family:var(--ac-font-display);font-size:9px;font-weight:600;
  min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px;border-radius:9999px;
}
.hamburger{display:none;}
.hamburger i{transition:transform .25s var(--ac-ease);}
.hamburger.is-open i[data-lucide="menu"]{transform:rotate(90deg);}

body.promobar-hidden .header{top:12px;}

/* =========================================================================
   Responsive breakpoints
   ========================================================================= */

@media (max-width:900px){
  .header .header-nav{display:none !important;}
  .header .hamburger{display:inline-flex !important;}
  .header{padding:6px 16px 0;top:0;}
  .header-inner{padding:0 18px;height:60px;}
  .header-logo .word{font-size:14px;letter-spacing:0.2em;}
  .header-logo .mark{width:34px;height:34px;}
  .header-icons{gap:8px;}
}

@media (max-width:768px){
  .header{top:6px;padding:6px 16px 0;}
  .header-inner{height:56px;padding:0 18px;}
  .header-logo .mark{width:38px;height:38px;}
  .header-icons{gap:10px;}
  .iconbtn{padding:6px;}
  .iconbtn__label{display:none;}
  .iconbtn--cart{gap:2px;}
}

@media (max-width:480px){
  .header{top:4px;padding:4px 12px 0;}
  .header-inner{height:50px;padding:0 16px;border-radius:var(--ac-radius-lg);}
  .header-logo .mark{width:32px;height:32px;}
  .header-logo .word{font-size:10px;letter-spacing:0.1em;}
  .header-icons{gap:8px;}
  .iconbtn{padding:5px;}
}
/* ---- Promobar ---- */
.promobar{
  position:relative;z-index:40;
  min-height:var(--promobar-h,44px);
  background:var(--ac-bg-dark);color:var(--ac-on-dark);
  display:flex;align-items:center;justify-content:center;
  padding:0 52px;
}
.promobar__link{
  color:inherit;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--ac-font-display);font-size:12.5px;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;
  transition:opacity .2s var(--ac-ease);
}
.promobar__link i{width:15px;height:15px;}
.promobar__link .arrow{transition:transform .25s var(--ac-ease);}
.promobar__link:hover{opacity:.82;}
.promobar__link:hover .arrow{transform:translateX(4px);}
.promobar__close{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:inherit;cursor:pointer;
  opacity:.65;display:inline-flex;padding:6px;border-radius:9999px;
  transition:opacity .2s var(--ac-ease),background .2s var(--ac-ease);
}
.promobar__close i{width:16px;height:16px;}
.promobar__close:hover{opacity:1;background:rgba(255,255,255,.12);}
.promobar.is-hidden{display:none;}
body.promobar-hidden .header{top:12px;}

@media (max-width:768px){
  :root{--promobar-h:38px;}
  .promobar{padding:0 40px;min-height:38px;}
  .promobar__link{font-size:10.5px;letter-spacing:1.2px;gap:6px;}
  .promobar__close{right:10px;}
}
@media (max-width:480px){
  :root{--promobar-h:34px;}
  .promobar{padding:0 32px;min-height:34px;}
  .promobar__link{font-size:9.5px;letter-spacing:1px;}
  .promobar__link i{width:12px;height:12px;}
}