/* Shared header layout — loaded on every page (after style.css) */
header .top-nav {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  min-height: 38px;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  padding: clamp(4px, 0.5vw, 8px) clamp(8px, 1.2vw, 14px) !important;
  background: #125873;
  color: #fff;
}
header .top-links {
  min-width: 0;
  overflow: hidden;
  grid-column: 1;
}
header .top-links ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
header .top-links ul > li {
  flex: 0 0 auto !important;
}
header .top-links a,
header .top-links .has-dropdown > a {
  white-space: nowrap !important;
  font-size: clamp(10px, 0.55vw + 8px, 12px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  padding: clamp(4px, 0.4vw + 3px, 7px) clamp(6px, 0.55vw + 4px, 9px) !important;
}
header .occasion-offer-banner {
  position: relative;
  grid-column: 2;
  justify-self: center;
  flex-shrink: 1;
  min-width: 0;
  max-width: min(340px, 28vw);
  color: #fff;
  border-radius: 14px;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: block !important;
  overflow: hidden;
  z-index: 2;
}
header .occasion-offer-banner.flash-1,
header .occasion-offer-banner:not([class*="flash-"]) {
  background: linear-gradient(90deg, #fbbf24 0%, #f97316 35%, #ef4444 65%, #dc2626 100%);
  background-size: 220% 100%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  animation:
    shFlashBgSlide 2.8s linear infinite,
    shFlashPulse 1.15s ease-in-out infinite,
    shFlashGlow 1.6s ease-in-out infinite,
    shFlashBorder 1.9s ease-in-out infinite;
}
header .occasion-offer-banner.flash-2 {
  background: linear-gradient(90deg, #dc2626, #f97316, #dc2626);
  background-size: 200% 100%;
  border: 2px solid #fff;
  animation:
    shFlashBgSlide 1.4s linear infinite,
    shFlashStrobe 0.85s ease-in-out infinite,
    shFlashGlowStrong 1.1s ease-in-out infinite;
}
header .occasion-offer-banner.flash-3 {
  background: linear-gradient(135deg, #ea580c, #ef4444, #b91c1c);
  border: 1px solid rgba(254, 240, 138, 0.7);
  animation: shFlashNeon 2.2s ease-in-out infinite, shFlashScale 1.3s ease-in-out infinite;
}
header .occasion-offer-banner::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  opacity: 0;
  pointer-events: none;
  animation: shFlashRing 1.7s ease-out infinite;
}
header .occasion-offer-title {
  position: relative;
  z-index: 1;
  font-size: clamp(10px, 0.55vw + 8px, 12px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
header .occasion-offer-meta {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  font-size: clamp(9px, 0.5vw + 7px, 11px);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
header .top-actions {
  grid-column: 3;
  flex-shrink: 0;
  flex-wrap: nowrap !important;
  display: flex !important;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
}

@keyframes shFlashBgSlide {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes shFlashPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-2px) scale(1.04); filter: brightness(1.4); }
}
@keyframes shFlashGlow {
  0%, 100% { box-shadow: 0 3px 10px rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 6px 22px rgba(251, 146, 60, 0.65), 0 0 14px 3px rgba(254, 226, 178, 0.35); }
}
@keyframes shFlashGlowStrong {
  0%, 100% { box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5); }
  50% { box-shadow: 0 0 20px 6px rgba(255, 200, 100, 0.75), 0 8px 24px rgba(239, 68, 68, 0.6); }
}
@keyframes shFlashBorder {
  0%, 100% { border-color: rgba(255, 255, 255, 0.35); }
  50% { border-color: rgba(255, 255, 255, 1); }
}
@keyframes shFlashStrobe {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  25% { filter: brightness(1.55); transform: scale(1.05); }
  50% { filter: brightness(0.95); transform: scale(1); }
  75% { filter: brightness(1.45); transform: scale(1.04); }
}
@keyframes shFlashNeon {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.5), inset 0 0 6px rgba(255, 255, 255, 0.1); filter: brightness(1); }
  50% { box-shadow: 0 0 18px rgba(251, 191, 36, 0.8), 0 0 28px rgba(239, 68, 68, 0.45), inset 0 0 10px rgba(255, 255, 255, 0.2); filter: brightness(1.25); }
}
@keyframes shFlashScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes shFlashRing {
  0% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}

@media (min-width: 769px) {
  header .brand-bar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 1.2vw, 16px);
    padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.5vw, 16px) !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
  }
  header .brand-bar .logos {
    grid-column: 1;
    margin-right: 0 !important;
    flex-shrink: 0;
    order: unset !important;
  }
  header .brand-bar .typewriter {
    grid-column: 2;
    justify-self: center;
    margin: 0 !important;
    min-width: 0;
    max-width: 100%;
    flex: none !important;
    order: unset !important;
    overflow: hidden;
  }
  header .brand-bar .hero-cta {
    grid-column: 3;
    justify-self: end;
    margin-left: 0 !important;
    flex-shrink: 0;
    flex: none !important;
    order: unset !important;
  }
  header .brand-bar .quick-actions {
    flex-wrap: nowrap;
    gap: clamp(8px, 1vw, 14px);
    margin-left: 0;
  }
  header .main-nav > ul {
    flex-wrap: nowrap !important;
    gap: 0;
    padding: 0 !important;
  }
  header .main-nav > ul > li {
    flex: 1 1 0;
    min-width: 0;
  }
  header .top-actions .btn-top,
  header .top-actions .btn-call .phone {
    font-size: clamp(10px, 0.5vw + 8px, 12px) !important;
  }
}

@media (max-width: 900px) {
  header .occasion-offer-banner {
    display: none !important;
  }
}

@media (max-width: 768px) {
  header .top-nav {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }
  header .occasion-offer-banner,
  header .top-links,
  header .top-actions {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  header .occasion-offer-banner,
  header .occasion-offer-banner::after {
    animation: none !important;
  }
}