/* Site-wide shop announcement. Always shown, not dismissible, one line on every screen.
   Fixed above the fixed site header; body padding keeps page content below it. */
:root { --announce-h: 2.75rem; }

.site-announce {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 0 1rem;
  /* Gold strip so it stands apart from the dark site header (a dark bar blended into it). */
  background: linear-gradient(90deg, #a8833f 0%, #d6b56d 28%, #ecd9a6 50%, #d6b56d 72%, #a8833f 100%);
  border-bottom: 1px solid #7d5f27;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  color: #0a0a0a;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.site-announce__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The whole bar opens the shop; "Read the post" sits above this layer. */
.site-announce__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.site-announce__dot {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #0a0a0a;
  box-shadow: 0 0 0 0.2rem rgba(10, 10, 10, 0.18);
}

.site-announce__lead {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.site-announce__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.75rem;
  border-radius: 2px;
  background: #0a0a0a;
  color: #ecd9a6;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

.site-announce__cta-short { display: none; }

.site-announce:hover .site-announce__cta,
.site-announce__link:focus-visible .site-announce__cta { background: #262626; color: #fff; }

.site-announce__link:focus-visible { outline: none; }
.site-announce__link:focus-visible::after { outline: 2px solid #0a0a0a; outline-offset: -3px; }

/* Doubled class beats page and shop link styles. */
.site-announce .site-announce__more {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: #1a1a1a;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-announce .site-announce__more:hover,
.site-announce .site-announce__more:focus-visible { color: #000; }

.site-announce .site-announce__link,
.site-announce .site-announce__link:hover { color: #0a0a0a; text-decoration: none; }

body.has-site-announce { padding-top: var(--announce-h); }
body.has-site-announce header.site-header { top: var(--announce-h); }

@media (max-width: 640px) {
  .site-announce { gap: 0.4rem; padding: 0 0.65rem; font-size: 0.8rem; }
  .site-announce__link { flex: 1 1 auto; gap: 0.5rem; max-width: 100%; min-width: 0; }
  .site-announce .site-announce__more { display: none; }
  /* The lead may ellipsize. The shop button stays whole and never slides under the header. */
  .site-announce__lead { flex: 1 1 auto; }
  .site-announce__cta { flex: 0 0 auto; padding: 0.38rem 0.6rem; font-size: 0.64rem; letter-spacing: 0.08em; }
  .site-announce__cta-long { display: none; }
  .site-announce__cta-short { display: inline; }
}

@media (max-width: 360px) {
  .site-announce__dot { display: none; }
}

/* Next.js pages (shop, delivery) keep the bar in the page flow and stick it to the top. */
.site-announce.site-announce--sticky {
  position: sticky;
  top: 0;
  z-index: 60;
}