/* ─── Apetit Bar shop-chrome overrides (mascot rebrand, white/red/black) ─────
   Loaded by the shop (shop.apetitbar.rs) via the tenant config's
   branding.chromeCssUrls, ON TOP of the injected CSS-var theme map. Everything
   here exists to make the site → shop crossing invisible: same red rule over
   the bar, same ivory solid bar at the same height, same badge-lg crest, same
   red active link + red account pill, same poster-caps section titles with
   the short red rule. Keep selectors AND values in sync with the site's
   src/design/semantic/chrome.css and the shared BrandNavbar markup. */

/* ── Bar surface: the hero's paper, solid, no hairline (site: surface="solid"
   + chrome.css). The 6px red brand rule is the site's `.apetit-topline`; the
   shop has no such element, so it rides on the bar as a top border and
   sticks with it exactly like the site's sticky rule. */
nav[data-scroll-offset] {
  background: var(--color-apetit-ivory, #FBF7F1);
  border-bottom-color: transparent;
  border-top: 6px solid var(--color-apetit-red, #D8121F);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* No SR/EN utility strip above the bar (client ruling 27.08 - the site
   passes language={null}), and no language/theme row in the mobile panel. */
div:has(+ nav[data-scroll-offset]) {
  display: none;
}
nav[data-scroll-offset] ~ div .border-t.pt-3.mt-2 {
  display: none;
}

/* Bar rows at the site's `barHeight="tall"`: 80px desktop, 64px mobile. */
nav[data-scroll-offset] .h-14 {
  height: 5rem;
}
nav[data-scroll-offset] .h-12 {
  height: 4rem;
}

/* The bottle-cap crest at the site's `badge-lg` size (64px, 96px on lg) -
   the config carries no logoWidth on purpose, so this rule owns the width. */
nav[data-scroll-offset] a[aria-label='Apetit Bar'] {
  width: 64px;
}
@media (min-width: 1024px) {
  nav[data-scroll-offset] a[aria-label='Apetit Bar'] {
    width: 96px;
  }
}

/* Nav links: medium weight; the active one red, bold, with the short
   underline from the 28.08 reference (same rule as the site's chrome.css).
   Two selector generations on purpose: `.ow-nav-link` + aria-current are the
   engine hooks this branch introduced, while the shop deployed from main
   still renders the plain `a.body-sm` / `.text-foreground` active classes -
   the sheet has to match whichever build is live. */
nav[data-scroll-offset] .ow-nav-link,
nav[data-scroll-offset] a.body-sm {
  position: relative;
  font-weight: 500;
}
nav[data-scroll-offset] .ow-nav-link[aria-current='page'],
nav[data-scroll-offset] a.body-sm.text-foreground {
  color: var(--color-apetit-red, #D8121F);
  font-weight: 700;
}
nav[data-scroll-offset] .ow-nav-link[aria-current='page']::after,
nav[data-scroll-offset] a.body-sm.text-foreground::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-apetit-red, #D8121F);
}

/* Account entry: the filled red pill at the bar's end (`.ow-auth-entry` is
   the engine's stable hook - the shop's button and the site's anchor share
   it). */
nav[data-scroll-offset] .ow-auth-entry {
  height: 2.5rem;
  padding-inline: 1.25rem;
  border: none;
  background: var(--color-apetit-red, #D8121F);
  color: #fff;
  font-size: var(--font-size-body-sm);
  font-weight: 700;
}
nav[data-scroll-offset] .ow-auth-entry:hover {
  background: var(--color-apetit-red-deep, #A60D18);
  color: #fff;
}

/* Mobile panel + its backdrop hang off the bar's real bottom edge: 6px rule
   + 64px row (the engine positions them for the default 48px row). Same two
   generations as the links: `.ow-mobile-panel` is the hook, `div.fixed.z-40`
   the panel as the main build renders it. */
nav[data-scroll-offset] ~ div .ow-mobile-panel,
nav[data-scroll-offset] ~ div > div.fixed.z-40 {
  top: calc(var(--safe-top, 0px) + 70px);
  background: var(--color-apetit-ivory, #FBF7F1);
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
nav[data-scroll-offset] ~ div > button.fixed {
  top: calc(var(--safe-top, 0px) + 70px);
}

/* Category slider sticks flush under the taller bar (rule + row), on the
   same paper so the whole chrome block reads as one surface; the active chip
   speaks red like every other active state on the site. */
main > div.sticky.z-30 {
  top: calc(var(--safe-top, 0px) + 70px);
  background: var(--color-apetit-ivory, #FBF7F1);
  border-bottom-color: var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (min-width: 1024px) {
  main > div.sticky.z-30 {
    top: calc(var(--safe-top, 0px) + 86px);
  }
}
main > div.sticky.z-30 button.bg-foreground {
  background: var(--color-apetit-red, #D8121F);
  color: #fff;
}

/* Category titles in the site's poster voice (Archivo Black caps, tight
   tracking) with the short red rule the SectionHead motif draws under every
   section title - sized for a menu, one step under the home sections. */
h4.heading-h4 {
  font-family: var(--font-family-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.08;
}
h4.heading-h4::after {
  content: '';
  display: block;
  margin-top: 12px;
  height: 3px;
  width: 48px;
  border-radius: 999px;
  background: var(--color-apetit-red, #D8121F);
}

/* CTA silhouette: the site's tall pill (interactions.css `cta-shape`). */
.cta-shape {
  height: 3rem;
  border-radius: 9999px;
}