/* =============================
   HEADER – PALETTE VERSION (BLUR / GLASS)
   ✅ Mobile header spans FULL WIDTH
   ✅ Cart visible on mobile
   ✅ Burger works with panel
   ✅ FIX: Brand title does not cut off on mobile
============================= */

.vd-header{
  position: sticky;
  top: 0;
  z-index: 999;

  background: rgba(54,69,79,.72);
  border-bottom: 1px solid rgba(245,247,255,.10);

  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);

  left: 0;
  right: 0;
  width: 100%;
}

.vd-header,
.vd-header *{ box-sizing:border-box; }

.vd-header__inner{
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-width: 0; /* ✅ allows children to shrink instead of overflow */
}

/* =============================
   BRAND
============================= */

.vd-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--text);
  min-width: 0;        /* ✅ allow shrink */
  flex: 1 1 auto;      /* ✅ give it flexible space */
}

.vd-brand__mark{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(245,247,255,.14);
  box-shadow: 0 10px 26px rgba(48,213,200,.10);
  flex: 0 0 auto;
}

.vd-brand__logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

/* ✅ Brand text is allowed to shrink + ellipsis */
.vd-brand__text{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;

  /* Desktop default */
  font-size: 22px;
  letter-spacing: .08em;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  min-width: 0;     /* ✅ critical for ellipsis in flex */
  flex: 1 1 auto;   /* ✅ allow shrink */
}

/* =============================
   NAV
============================= */

.vd-nav__list{
  list-style:none;
  display:flex;
  gap:22px;
  margin:0;
  padding:0;
}

.vd-nav__list a{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .10em;

  text-decoration:none;
  color: rgba(245,247,255,.78);
  padding:8px 4px;
  transition:0.2s ease;
}

.vd-nav__list a:hover{ color: var(--accent); }

/* =============================
   ACTIONS
============================= */

.vd-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.vd-btn--ghost{
  background:transparent;
  border: 1px solid rgba(245,247,255,.14);
  color: var(--text);
}

.vd-btn--ghost:hover{ background: rgba(255,255,255,.06); }

/* =============================
   CART BUTTON (ALL BREAKPOINTS)
============================= */

.vd-cartbtn{
  position: relative;
  width:42px;
  height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-weight:900;
  cursor:pointer;

  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(245,247,255,.14);
  flex: 0 0 auto;
}

.vd-cartbtn__count,
.vd-cartPill__count,
#vdCartCount,
#vd-cart-count{
  position:absolute;
  top:-6px;
  right:-6px;
  width:20px;
  height:20px;
  border-radius:999px;
  background: var(--accentFill);
  color:#06120D;
  font-size:12px;
  font-weight:900;
  display:grid;
  place-items:center;
  border: 2px solid var(--bg);
}

/* =============================
   BURGER
============================= */

.vd-burger{
  display:none;
  width:44px;
  height:44px;
  background: var(--accentFill);
  border: 1px solid rgba(245,247,255,.14);
  border-radius:10px;
  cursor:pointer;
  flex: 0 0 auto;
}

.vd-burger span{
  display:block;
  height:2px;
  width:20px;
  background:#06120D;
  margin:6px auto;
}

/* =============================
   MOBILE MENU
============================= */

.vd-mobileOverlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(0,0,0,.6);
}

.vd-mobileOverlay[hidden]{ display:none; }

.vd-mobilePanel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(320px, 86vw);
  background: rgba(54,69,79,.98);
  z-index:100;
  transform:translateX(100%);
  transition:transform .25s ease;
  padding:20px;
  display:flex;
  flex-direction:column;
}

.vd-mobilePanel.is-open{ transform:translateX(0); }

.vd-mobilePanel__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
}

.vd-mobilePanel__title{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  letter-spacing: .10em;
  font-size: 20px;
}

.vd-mobilePanel__close{
  background: var(--accentFill);
  border: 1px solid rgba(245,247,255,.14);
  width:36px;
  height:36px;
  border-radius:8px;
  cursor:pointer;
  font-weight:900;
  color:#06120D;
}

.vd-mobilePanel__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.vd-mobilePanel__list a{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  letter-spacing: .10em;
  font-size: 20px;

  color: var(--text);
  text-decoration:none;
}

.vd-mobilePanel__list a:hover{ color: var(--accent); }

.vd-mobilePanel__cta{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* When menu is open, prevent background scroll */
body.vd-menu-open{ overflow:hidden; }

/* =============================
   RESPONSIVE SWITCH
============================= */

@media (max-width: 820px){

  /* Hide desktop nav + actions */
  .vd-nav,
  .vd-actions{ display:none; }

  /* Show burger */
  .vd-burger{ display:block; }

  /* Mobile header height */
  .vd-header__inner{ height:64px; }

  /* ✅ Make sure header stays full width on mobile */
  .vd-header{
    width:100%;
    left:0;
    right:0;
    margin:0;
    background: rgba(54,69,79,.70);
    border-bottom: 1px solid rgba(245,247,255,.10);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
  }

  /* ✅ make brand text smaller on mobile so it fits */
  .vd-brand__text{
    font-size: clamp(14px, 4.2vw, 18px);
    letter-spacing: .06em;
  }
}

/* ✅ ultra-small phones: remove brand text completely (logo only) */
@media (max-width: 360px){
  .vd-brand__text{ display:none; }
}