/* ORIGONA promo bar behavior layer.
   Bricks-owned: promo bar shell inside the active header template, spacing rail, and rendered content structure.
   CSS-owned: promo bar geometry, badge sizing, hover/focus behavior for the content rail, and mobile wrapping.
   JS-owned: dismiss/scroll behavior and any state classes such as .is-closed or .is-hidden-on-scroll.
   This block must not duplicate base header layout or move promo content ownership out of the Bricks template.
*/
.or-promo-bar {
  position: relative;
  z-index: 20;
  width: 100%;
  background: var(--og-bg-highlight);
  color: var(--og-text-inverse);
  transform: translateY(0);
  transition: transform var(--og-mot-hover-duration) var(--og-mot-hover-easing), opacity var(--og-mot-hover-duration) var(--og-mot-hover-easing), visibility var(--og-mot-hover-duration) var(--og-mot-hover-easing);
}

.or-promo-bar.is-closed {
  display: none;
}

.or-promo-bar.is-hidden-on-scroll {
  transform: translateY(-100%);
}

.or-promo-bar__inner {
  box-sizing: border-box;
  width: min(calc(100% - (2 * var(--og-lay-gutter))), var(--og-lay-site));
  margin-inline: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px clamp(48px, 6vw, 88px);
  background: transparent;
}

.or-promo-bar__content {
  color: var(--og-text-inverse);
  text-decoration: none;
  text-wrap: pretty;
  white-space: normal;
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
}

.or-promo-bar__content > :not(:last-child) {
  margin-right: 6px;
}

a.or-promo-bar__content:hover,
a.or-promo-bar__content:focus-visible {
  color: var(--og-text-inverse);
  text-decoration: none;
}

.or-promo-bar__text {
  font: inherit;
}

.or-promo-bar__pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-inline: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--og-bg-surface);
  color: var(--og-text-main);
  font: inherit;
  font-size: 0.9em;
  line-height: 1.2;
  white-space: nowrap;
}

.or-promo-bar__close {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--og-text-inverse);
  cursor: pointer;
  transform: translateY(-50%);
  border-radius: 50%;
  transition: background-color var(--og-mot-hover-duration) var(--og-mot-hover-easing), color var(--og-mot-hover-duration) var(--og-mot-hover-easing);
}

.or-promo-bar__close:hover,
.or-promo-bar__close:focus-visible {
  color: var(--og-text-main);
  background: var(--og-bg-hover);
}

.or-promo-bar__close-icon {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
}

@media (max-width: 767px) {
  .or-promo-bar {
    line-height: 20px;
  }

  .or-promo-bar__inner {
    width: calc(100% - (2 * var(--og-lay-gutter)));
    min-height: 44px;
    padding: 6px 44px;
  }

  .or-promo-bar__content {
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .or-promo-bar {
    line-height: 16px;
  }

  .or-promo-bar__inner {
    min-height: 82px;
    height: auto;
    padding: 8px 0 8px 0;
  }

  .or-promo-bar__content {
    display: block !important;
    white-space: normal;
    text-align: center;
  }

  .or-promo-bar__text {
    display: inline-block;
    max-width: 228px;
    text-align: center;
  }

  .or-promo-bar__pill {
    min-height: 22px;
    margin-inline: 6px 0;
    vertical-align: baseline;
  }

  .or-promo-bar__close {
    inset-inline-end: 0;
  }

  .or-promo-bar__content > :not(:last-child) {
    margin-right: 6px;
  }
}