/* Shop Promo Banner Styles (original aesthetic)
   Uses global CSS variables: --font-body, --fs-xs, --container-max, --ink-pink
   Background: theme pink via --ink-pink fallback; text color dark; single-line height.
*/
.promo-banner{
  width:100%;
  background: var(--pink); /* global theme pink */
  color: var(--ink); /* global ink text */
  position:relative;
  z-index:40; /* original layer value */
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial);
  font-size: var(--fs-sm, .8rem);
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Retain link styling (non-intrusive) */
.promo-banner { cursor: pointer; }
/* Remove legacy .promo-link styling; entire banner is now clickable */
.promo-inner{
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 0.15rem 1rem; /* reduced padding */
  display:flex;
  align-items:center; /* vertically center single-line text */
  justify-content:center;
  gap: 0.5rem;
}
.promo-viewport{
  flex:1;
  overflow:hidden;
  height: 1.5em; /* Reduced height */
}
.promo-slider{
  display:flex;
  flex-direction: column; /* Stack slides vertically */
  width:100%;
  height: 100%; /* Ensure transform percentage is based on single slide height */
  transition: transform 0.6s ease;
}
.promo-slide{
  flex:0 0 100%;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.promo-slide > *{ /* keep any inner elements on single line */
  display:inline-block;
}
/* Nav controls hidden by default; visible only if overridden */
.promo-nav{
  display:none;
  background:transparent;
  color:inherit;
  border: none;
  width:2rem;
  height:2rem;
  line-height:2rem;
  padding:0;
  text-align:center;
  cursor:pointer;
  font-size:1.1rem;
}
/* small screens: keep text readable and centered */
@media (max-width:700px){
  .promo-inner{ padding: 0.4rem 0.75rem; }
  .promo-slide{ font-size: var(--fs-xs, .8rem); }
}
@media (prefers-reduced-motion: reduce){
  .promo-slider{ transition: none; }
}