:root{
  --pdp-collapsed-h: 0px;   /* JS sets this to the real collapsed bar height */
  --pdp-expanded-h: 0px;    /* JS sets this to the full expanded content height (px) */
  --pdp-header-h: 0px;      /* optional: your sticky header height if you use it elsewhere */
  --pdp-open: 0;            /* 0 (collapsed) / 1 (expanded) */
}

/* The fixed promo container is already fixed; just don’t let wrapper clip it */
.site-header-upper{
  margin: 0;
  padding: 0;
  overflow: visible;
  /* 👉 Make this wrapper’s height follow the promo state */
  height: calc(var(--pdp-collapsed-h) + (var(--pdp-open) * var(--pdp-expanded-h)));
}

/* Collapsed bar (make sure it fills the wrapper height when closed) */
.lux-pdp__collapsed{
  min-height: var(--pdp-collapsed-h);
  display: flex;
  align-items: center;
}

/* ✅ True slide: animate the expanded panel’s height via CSS variables */
.lux-pdp__expanded{
  overflow: hidden;
  height: calc(var(--pdp-open) * var(--pdp-expanded-h));
  transition: height .45s cubic-bezier(.22,.61,.36,1);
  will-change: height;
}

/* Optional: icon swap on the toggle */
.lux-pdp__toggle[aria-expanded="true"] [data-icon="open"]{ display:none; }
.lux-pdp__toggle[aria-expanded="false"] [data-icon="close"]{ display:none; }

@media (prefers-reduced-motion: reduce){
  .lux-pdp__expanded{ transition: none; }
}

/* Clean up spacing inside the bar if you need it */
.lux-pdp__collapsed_columns{ margin: 0; }
.lux-pdp p{ margin: 0; padding: 0; }


/* Make the fixed wrapper and its children span the viewport width */
.lux-pdp,
.lux-pdp__inner,
.lux-pdp__collapsed,
.lux-pdp__expanded{
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* Neutralize theme “constrained/alignfull” limits inside the fixed bar */
.lux-pdp .alignfull,
.lux-pdp .wp-block-group.alignfull{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep columns from adding side gaps in the collapsed bar */
.lux-pdp .wp-block-columns{ margin: 0; }

/* Only drive height from promo variables when promo exists */
.site-header-upper:has(.lux-pdp){
  height: calc(var(--pdp-collapsed-h) + (var(--pdp-open) * var(--pdp-expanded-h)));
  overflow: visible;
}

/* Restore luxFlag height when promo is disabled (no .lux-pdp in DOM) */
.site-header-upper:not(:has(.lux-pdp)) .luxFlag{
  width: 100%;
  height: 40%;
}

/* Keep the expanded panel sliding via CSS vars (unchanged) */
.lux-pdp__expanded{
  overflow: hidden;
  height: calc(var(--pdp-open) * var(--pdp-expanded-h));
  transition: height .45s ease;
  will-change: height;
}

/* helper offset = collapsed height + (expanded height when open) */
:root{
  --pdp-offset: calc(var(--pdp-collapsed-h) + (var(--pdp-open) * var(--pdp-expanded-h)));
}


body header nav > div:not(.menu-toggle){
  top: var(--pdp-offset) !important;
  margin-top: 0;
}

.lux-pdp .wp-block-button__link {
    background-color: #F2AC3B;
}