/* ============================================
   Site-wide deal announcement bar
   Sits above the fixed top-bar/nav stack and shifts them down by its
   own height, with matching body padding so every page's existing
   header-to-content spacing is preserved.
   ============================================ */

:root { --deal-h: 40px; }

body { padding-top: var(--deal-h); }

.deal-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  height: var(--deal-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0 1rem;
  background: var(--gold-bright, #d4af37);
  color: var(--black-void, #121218);
  text-decoration: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.3s ease;
}

.deal-bar:hover { background: var(--gold-muted, #b8962e); }

.deal-bar__msg strong { font-weight: 700; }

.deal-bar__price { font-weight: 700; }
.deal-bar__price .deal-bar__unit { font-weight: 400; opacity: 0.7; }

.deal-bar__cta {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.8rem;
}
.deal-bar__cta i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.3s ease;
}
.deal-bar:hover .deal-bar__cta i { transform: translateX(4px); }

/* Push the fixed header stack below the deal bar (matches styles.css offsets) */
.top-bar { top: var(--deal-h) !important; }
.nav { top: calc(var(--deal-h) + 38px) !important; }

@media (max-width: 768px) {
  :root { --deal-h: 38px; }
  .nav { top: calc(var(--deal-h) + 45px) !important; }
  .deal-bar { font-size: 0.8rem; gap: 0.7rem; }
  .deal-bar__hide-sm { display: none; }
}

@media (max-width: 480px) {
  .deal-bar { font-size: 0.72rem; gap: 0.5rem; }
}