/* FINAL CANONICAL HEADER — visual shell from homepage top-stack
   Geometry must match across normal public pages.
   Load LAST among header-related styles. */

/* Winery / about pages lack body{margin:0} — lock sticky header to viewport top */
body.page-winery,
body.page-about {
  margin: 0;
}

/* —— Shared tokens (fallbacks when page CSS vars differ) —— */
.top-stack {
  --hdr-bg: var(--bg, #260b12);
  --hdr-line: var(--line, rgba(217, 192, 138, .28));
  --hdr-ink: var(--ink2, var(--on-dark-mut, #cbb98e));
  --hdr-gold: var(--gold-l, var(--gold2, #d9c08a));
  --hdr-parch: var(--parch, #ebddbc);
  --hdr-engrave: var(--engrave, Cinzel, serif);
  --hdr-dark: var(--dark-ink, #2a0c14);
  --hdr-metal: var(--metal, linear-gradient(120deg, #8a6a32, #e6cf95 42%, #b58f4e 58%, #e6cf95 80%, #8a6a32));
}

/* —— Canonical sticky shell ——
   Beat editorial `.vde-main .top-stack` (padding-top:15px) and page inline rules. */
.top-stack,
.vde-main .top-stack,
.vde-detail .top-stack,
body .top-stack {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  padding-top: 12px !important;
  background: color-mix(in srgb, var(--hdr-bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hdr-line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  box-sizing: border-box;
}

.top-stack > .hd-l,
.vde-main .top-stack > .hd-l,
.vde-detail .top-stack > .hd-l {
  position: absolute !important;
  top: 50% !important;
  left: max(20px, calc((100vw - min(1560px, 100vw - 40px)) / 2 + 20px)) !important;
  transform: translateY(-50%) !important;
  z-index: 5;
  line-height: 0;
}

.top-stack > .hd-l img,
.vde-main .top-stack > .hd-l img,
.vde-detail .top-stack > .hd-l img {
  width: 74px !important;
  height: auto !important;
  max-height: 84px !important;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .45));
}

/* Top micro-line — fixed geometry; copy may vary */
.top-stack .announce,
.vde-main .top-stack .announce,
.vde-main .announce,
.vde-detail .top-stack .announce {
  background: transparent !important;
  color: var(--hdr-ink) !important;
  text-align: center;
  font-family: var(--hdr-engrave);
  font-size: .58rem !important;
  letter-spacing: .17em !important;
  line-height: 1.35 !important;
  padding: 6px 88px 4px !important;
  text-transform: uppercase;
  position: relative;
  border-bottom: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
  display: block !important; /* override B2B mobile hide */
}

.top-stack .announce b {
  color: var(--hdr-gold);
  font-weight: 500;
}

.top-stack .hd {
  position: relative;
  background: transparent;
  border: 0;
}

.top-stack .hd-in,
.top-stack .wrap.hd-in,
.vde-main .top-stack .hd-in,
.vde-main .hd-in,
.vde-detail .top-stack .hd-in {
  width: min(1560px, calc(100% - 40px)) !important;
  max-width: 1560px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 72px !important;
  height: auto !important;
  padding: 10px 0 14px !important;
  position: relative;
  box-sizing: border-box;
}

/* Hide center wordmark — crest is the brand */
.top-stack .hd .brand,
.top-stack .brand-text {
  display: none !important;
}

.top-stack .hd-nav {
  display: flex !important;
  gap: clamp(14px, 1.8vw, 28px) !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.top-stack .hd-nav a {
  font-family: var(--hdr-engrave);
  font-size: .66rem !important;
  font-weight: 500;
  letter-spacing: .08em !important;
  word-spacing: .16em;
  color: var(--hdr-ink);
  text-transform: uppercase;
  position: relative;
  padding: 4px 3px;
  white-space: nowrap;
  transition: color .25s;
  text-decoration: none;
}

.top-stack .hd-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--hdr-gold);
  transition: width .3s ease, left .3s ease;
}

.top-stack .hd-nav a:hover,
.top-stack .hd-nav a[aria-current="page"] {
  color: var(--hdr-gold);
}

.top-stack .hd-nav a:hover::after,
.top-stack .hd-nav a[aria-current="page"]::after {
  width: 100%;
  left: 0;
}

.top-stack .hd-r {
  position: absolute;
  right: 0;
  top: 50% !important;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 6;
}

.top-stack .set-head-link {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent !important;
  padding: 9px 12px;
  background: var(--hdr-metal) !important;
  color: var(--hdr-dark) !important;
  font-family: var(--hdr-engrave);
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 600;
  text-decoration: none;
}

.top-stack .set-head-link:hover {
  filter: brightness(1.06);
  color: var(--hdr-dark) !important;
}

.top-stack .set-head-link svg {
  display: none;
}

.top-stack .icbtn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hdr-parch);
  position: relative;
  display: flex;
  padding: 4px;
  text-decoration: none;
}

.top-stack .icbtn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.top-stack .burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
}

.top-stack .burger span {
  width: 24px;
  height: 1.5px;
  background: var(--hdr-parch);
  display: block;
}

/* —— Suppress legacy flat headers when top-stack is present —— */
body:has(.top-stack) > .announce:not(.top-stack .announce),
body:has(.top-stack) > header:not(.hd):not(.top-stack header),
body:has(.top-stack) > .wy-head,
body:has(.top-stack) > .head {
  display: none !important;
}

/* —— Family A residual (shop / tasting / privé) if markup already matched —— */
.vde-main:not(.page-home) .hd .brand {
  display: none !important;
}
.vde-main:not(.page-home) .hd-in {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 72px !important;
  padding: 10px 0 14px !important;
}
.vde-main:not(.page-home) .hd-nav {
  gap: clamp(14px, 1.8vw, 28px) !important;
}
.vde-main:not(.page-home) .hd-r {
  top: 50% !important;
}
.vde-main .set-head-link {
  background: var(--metal, linear-gradient(120deg, #8a6a32, #e6cf95 42%, #b58f4e 58%, #e6cf95 80%, #8a6a32));
  color: var(--dark-ink, #2a0c14) !important;
  border-color: transparent !important;
  font-weight: 600;
}
.vde-main .set-head-link:hover {
  filter: brightness(1.06);
  background: var(--metal, linear-gradient(120deg, #8a6a32, #e6cf95 42%, #b58f4e 58%, #e6cf95 80%, #8a6a32)) !important;
  color: var(--dark-ink, #2a0c14) !important;
}
.vde-main .set-head-link svg {
  display: none;
}

/* Crest helper for any residual flat chrome */
.site-crest {
  flex: none;
  line-height: 0;
  display: inline-flex;
  align-items: center;
}
.site-crest img {
  width: 56px;
  height: auto;
  max-height: 64px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .45));
}

@media (max-width: 1040px) {
  .top-stack .announce,
  .vde-main .top-stack .announce,
  .vde-main .announce {
    padding: 5px 68px 2px !important;
    font-size: .54rem !important;
  }
  .top-stack > .hd-l img,
  .vde-main .top-stack > .hd-l img {
    width: 48px !important;
    max-height: 54px !important;
  }
  .site-crest img {
    width: 44px;
    max-height: 50px;
  }
}

@media (max-width: 900px) {
  .top-stack,
  .vde-main .top-stack,
  .vde-detail .top-stack,
  body .top-stack {
    padding-top: 12px !important; /* keep height lock vs editorial 13px */
  }
  .top-stack > .hd-l,
  .vde-main .top-stack > .hd-l {
    left: 54px !important;
  }
  .top-stack .hd-in,
  .top-stack .wrap.hd-in,
  .vde-main .hd-in {
    min-height: 72px !important;
    height: 72px !important;
    padding: 0 !important;
  }
  .top-stack .burger {
    display: flex;
  }
  .top-stack .hd-nav {
    display: none !important;
  }
  .top-stack .hd-nav.open {
    display: flex !important;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0 !important;
    background: var(--hdr-bg);
    border-bottom: 1px solid var(--hdr-line);
    padding: 8px 0;
    z-index: 70;
  }
  .top-stack .hd-nav.open a {
    padding: 14px 24px;
  }
  .top-stack .set-head-link {
    padding: 8px;
  }
  .top-stack .set-head-link span {
    display: none;
  }
  .top-stack .hd-r {
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .top-stack .set-head-link {
    padding: 8px;
  }
}