/* ==========================================================================
   Navigation — promo strip, header, location pill, mobile sheet, tab bar
   ========================================================================== */

/* The navbar host must not become the sticky header's containing block —
   without this the header stops sticking as soon as the wrapper scrolls off. */
[data-navbar],
[data-footer] {
  display: contents;
}

/* Until navbar.js fills the host, hold the exact height of the promo strip
   plus the header, so the page does not drop when they arrive. */
[data-navbar]:empty {
  display: block;
  height: 115px;
}
@media (max-width: 768px) {
  [data-navbar]:empty {
    height: 97px;
  }
}

/* ---- Promo strip ---------------------------------------------------- */

.promostrip {
  background: var(--kt-plum);
  color: #f3e3ec;
  font-size: 0.8rem;
}
.promostrip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  height: 38px;
}
.promostrip__msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* ---- Live announcement ticker (Phase 12) ---------------------------- */

/*
   Only applied once real announcements have landed; the built-in two-message
   strip keeps the centred flex layout above. The strip is a fixed-height
   band above the header — it never overlays the nav or the hero, it just
   sits on top of them in flow.
*/
.promostrip__inner--ticker {
  display: block;
  justify-content: normal;
  gap: 0;
  /* The wrap padding would clip the marquee mid-message at the gutter. */
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* The clipping window. overflow hidden here is what keeps a long
   announcement from widening the document and giving the whole page a
   horizontal scrollbar. */
.promoticker {
  overflow: hidden;
  height: 38px;
  /* Block, not flex: as a flex item the track's max-content width became
     shrink-to-fit, and a percentage min-width on the sets then resolved
     against the track that the sets were supposed to be sizing. */
  display: block;
}

.promoticker__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
  animation: promoticker-scroll 34s linear infinite;
}

/*
   Two identical sets; the track travels exactly one set's width, so the
   wrap-around lands on a pixel-identical frame and never visibly jumps.

   min-width:100% is what makes that true for a SHORT strip as well as a long
   one. With two brief announcements on a desktop the pair of sets measured
   narrower than the window, so -50% dragged a visible empty gap across the
   strip once per cycle. Forcing each set to at least fill the window makes
   the track exactly two viewports wide, and the shift is exactly one.
*/
.promoticker__set {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  flex: none;
  /* vw, not %, so the measurement is against the viewport and never
     against the track these sets are themselves sizing. */
  min-width: 100vw;
  justify-content: space-around;
}

@keyframes promoticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause while someone is reading it, by pointer or by keyboard. */
.promoticker:hover .promoticker__track,
.promoticker:focus-within .promoticker__track {
  animation-play-state: paused;
}

/*
   Reduced motion gets a static strip, not a frozen one: the animation is
   removed entirely and the duplicate set is hidden so the messages simply
   sit there, centred, scrollable by touch if they overflow.
*/
@media (prefers-reduced-motion: reduce) {
  .promoticker__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .promoticker__set[aria-hidden="true"] { display: none; }
  .promoticker {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .promoticker::-webkit-scrollbar { display: none; }
  .promoticker__set {
    padding-right: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
}
.promostrip__msg svg {
  color: var(--kt-pink-bright);
  flex: none;
}
.promostrip strong {
  color: #fff;
  font-weight: 700;
}

/* ---- Header --------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) linear, box-shadow var(--t-mid) linear,
    background-color var(--t-mid) linear;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(28, 16, 23, 0.05);
  background: var(--surface-glass-strong);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--nav-h);
  transition: height var(--t-mid) var(--ease-out);
}
/* The header keeps one height when it sticks: it sits in the page flow, so
   shrinking it here would jerk everything beneath it by the difference. */

.nav__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.logo {
  display: block;
  flex: none;
  transition: transform var(--t-mid) var(--ease-spring);
}
.logo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  transition: width var(--t-mid) var(--ease-out),
    height var(--t-mid) var(--ease-out);
}
.logo:hover {
  transform: rotate(-4deg) scale(1.04);
}
.logo--sm img {
  width: 44px;
  height: 44px;
}

/* Location pill — the food-delivery tell, in the calmest possible form */
.locpill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 15px 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1.5px solid transparent;
  text-align: left;
  min-width: 0;
  transition: all var(--t-fast) var(--ease-out);
}
.locpill:hover {
  background: var(--kt-pink-50);
  border-color: var(--kt-pink-200);
}
.locpill__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--kt-pink);
  flex: none;
  box-shadow: var(--sh-1);
}
.locpill__text {
  display: block;
  min-width: 0;
  line-height: 1.18;
}
.locpill__text small {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.locpill__text strong {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.87rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.locpill__caret {
  display: inline-flex;
  color: var(--ink-3);
}

/* Links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav__link {
  position: relative;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink-2);
  transition: color var(--t-fast) linear, background-color var(--t-fast) linear;
}
.nav__link:hover {
  color: var(--ink);
  background: var(--surface-3);
}
.nav__link.is-active {
  color: var(--kt-pink);
}
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kt-pink);
  transform: translateX(-50%);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.cartbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface-3);
  transition: transform var(--t-fast) var(--ease-spring),
    background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.cartbtn:hover {
  background: var(--kt-pink);
  color: #fff;
}
.cartbtn:active {
  transform: scale(0.92);
}
.cartbtn__badge,
.tabbar__badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--kt-pink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
}
.cartbtn:hover .cartbtn__badge {
  background: var(--kt-plum);
}
.cartbtn.is-bumped,
.tabbar__item.is-bumped .tabbar__icon {
  animation: kt-bump 420ms var(--ease-spring);
}

.nav__burger {
  display: none;
}
.nav__search {
  display: grid;
}

/* ---- Mobile sheet ---------------------------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 10, 20, 0.42);
  opacity: 0;
  transition: opacity var(--t-mid) linear;
  backdrop-filter: blur(2px);
}
.sheet.is-open .sheet__scrim {
  opacity: 1;
}
.sheet__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(400px, 90vw);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
  box-shadow: var(--sh-3);
}
.sheet.is-open .sheet__panel {
  transform: none;
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}
.sheet__loc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--kt-pink-50);
  color: var(--ink);
  margin-bottom: 18px;
}
.sheet__loc svg:first-child {
  color: var(--kt-pink);
  flex: none;
}
.sheet__loc span {
  flex: 1;
  min-width: 0;
}
.sheet__loc small {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--kt-pink);
}
.sheet__loc strong {
  display: block;
  font-size: 0.88rem;
  line-height: 1.35;
}

.sheet__nav {
  display: grid;
  gap: 2px;
  margin-bottom: 24px;
}
.sheet__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: background-color var(--t-fast) linear;
}
.sheet__link span {
  flex: 1;
}
.sheet__link svg:last-child {
  color: var(--ink-4);
}
.sheet__link:hover {
  background: var(--surface-3);
}
.sheet__link.is-active {
  background: var(--kt-pink-50);
  color: var(--kt-pink);
}

.sheet__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.sheet__catgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 8px;
}
.sheet__cat {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
.sheet__catring {
  width: 62px;
  height: 62px;
}
.sheet__foot {
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
}

/* ---- Bottom tab bar (mobile) ---------------------------------------- */

.tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface-glass-bar);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(5, 1fr);
}
.tabbar__item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-3);
  transition: color var(--t-fast) linear;
}
.tabbar__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 30px;
  border-radius: var(--r-pill);
  transition: background-color var(--t-fast) linear,
    transform var(--t-fast) var(--ease-spring);
}
.tabbar__item.is-active {
  color: var(--kt-pink);
}
.tabbar__item.is-active .tabbar__icon {
  background: var(--kt-pink-100);
}
.tabbar__item:active .tabbar__icon {
  transform: scale(0.88);
}
.tabbar__badge {
  top: -3px;
  right: 2px;
}

/* ---- Sticky "view basket" bar (mobile) ------------------------------ */

.stickycart {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 10px);
  z-index: 65;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 8px 0 10px;
  border-radius: var(--r-pill);
  background: var(--kt-pink);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--sh-pink-lg);
  transform: translateY(140%);
  /* Eases in without the spring overshoot: a fixed bar should not bounce. */
  transition: transform var(--t-slow) var(--ease-out);
}
.stickycart.is-visible {
  transform: none;
}
.stickycart__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.stickycart__count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.24);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.stickycart__right {
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
}

/* Theme toggle — inherits .icon-btn sizing; only the focus ring is spelled out
   so keyboard users get a visible target in both themes. */
.nav__theme {
  color: var(--ink-2);
}
.nav__theme:hover {
  color: var(--kt-pink);
}
.nav__theme:focus-visible {
  outline: 3px solid var(--kt-pink-bright);
  outline-offset: 2px;
}

/* ==========================================================================
   Notification bell
   --------------------------------------------------------------------------
   Sits in the existing .nav__right row. It borrows .cartbtn's size, radius
   and hover so the header keeps one visual language rather than gaining a
   new control that looks bolted on.

   Colours come from the same tokens as everything else, so dark mode needs no
   separate block here — only the panel's own surface is spelled out.
   ========================================================================== */

.nav__notif {
  display: contents;
}

.notifbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface-3);
  transition: transform var(--t-fast) var(--ease-spring),
    background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.notifbtn:hover {
  background: var(--kt-pink);
  color: #fff;
}
.notifbtn:active {
  transform: scale(0.92);
}
.notifbtn:focus-visible {
  outline: 3px solid var(--kt-pink-bright);
  outline-offset: 2px;
}

/* White on --chili (#e4572e) measures 3.68 — under AA for text this size,
   and this badge is a count somebody has to read and act on. Darkened to the
   nearest alert red that clears it (4.91). */
.notifbtn__badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: #c8431c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
  font-variant-numeric: tabular-nums;
}
.notifbtn.has-unread {
  color: var(--kt-pink);
}
.notifbtn.has-unread:hover {
  color: #fff;
}

/* ---- Panel ------------------------------------------------------------- */

/* A body-level layer, because .nav carries a backdrop-filter and would
   otherwise become the containing block for anything fixed inside it. Empty
   and inert until the panel opens, so it never swallows a click. --notif-top
   is measured from the real header at open time. */
.notifhost {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
}
.notifhost.is-open {
  pointer-events: auto;
}

.notifpanel {
  position: fixed;
  top: var(--notif-top, 84px);
  right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  width: min(384px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-3);
  animation: kt-toast-in 180ms var(--ease-out);
}

.notifpanel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 12px 13px 18px;
  border-bottom: 1px solid var(--line);
}
.notifpanel__head strong {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.02rem;
}
.notifpanel__all {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kt-pink);
  padding: 5px 10px;
  border-radius: var(--r-pill);
}
.notifpanel__all:hover {
  background: var(--kt-pink-50);
}
.notifpanel__close {
  width: 32px;
  height: 32px;
  color: var(--ink-3);
}

.notifpanel__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  display: grid;
  gap: 2px;
}

.notifitem {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  text-align: left;
  width: 100%;
  color: inherit;
  transition: background-color var(--t-fast) linear;
}
.notifitem:hover,
.notifitem:focus-visible {
  background: var(--surface-3);
}
.notifitem.is-unread {
  background: var(--kt-pink-50);
}
.notifitem.is-unread:hover {
  background: var(--kt-pink-100);
}

.notifitem__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
}
.notifitem.is-unread .notifitem__icon {
  background: var(--surface);
  color: var(--kt-pink);
}

.notifitem__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.notifitem__text strong {
  font-size: 0.885rem;
  font-weight: 700;
  line-height: 1.3;
}
.notifitem__text span {
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notifitem__text time {
  font-size: 0.72rem;
  color: var(--ink-3);
  font-weight: 600;
}
.notifitem__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--kt-pink);
}

.notifpanel__state {
  padding: 30px 22px;
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.55;
}
.notifpanel__art {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-3);
}

.notifpanel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 13px;
  border-top: 1px solid var(--line);
  background: var(--surface-3);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--kt-pink);
}
.notifpanel__foot:hover {
  background: var(--kt-pink-50);
}

/* ---- Small screens: a bottom sheet, not a dangling dropdown ------------- */

@media (max-width: 560px) {
  .notifhost.is-open {
    z-index: 120;
    background: rgba(28, 10, 20, 0.42);
  }
  .notifpanel {
    inset: auto 0 0 0;
    top: auto;
    right: auto;
    width: 100%;
    max-height: 78vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ---- Push permission offer, inside the bell panel ---------------------- */

.notifpush {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--kt-pink-50);
}
.notifpush.is-on {
  background: var(--mint-50);
}
.notifpush__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--kt-pink);
}
.notifpush.is-on .notifpush__icon {
  /* #0a6e55 clears AA on the mint ground; --mint alone does not. */
  color: #0a6e55;
}
.notifpush__text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.notifpush__text strong {
  font-size: 0.84rem;
  font-weight: 700;
}
.notifpush__text span {
  font-size: 0.775rem;
  color: var(--ink-2);
  line-height: 1.45;
}
.notifpush__text em {
  font-style: normal;
  font-weight: 700;
}
.notifpush__on {
  flex: none;
  align-self: center;
}
.notifpush__off {
  flex: none;
  align-self: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-2);
  padding: 5px 9px;
  border-radius: var(--r-pill);
}
.notifpush__off:hover {
  background: var(--surface);
}

/* ---- Customer notification preferences, inside the bell panel ---------- */

.notifpanel__prefs { width: 30px; height: 30px; color: var(--ink-3); }
.notifpanel__prefs:hover { color: var(--kt-pink); }

.notifprefs {
  border-bottom: 1px solid var(--line);
  background: var(--surface-3);
  padding: 6px;
  display: grid;
  gap: 2px;
}
.notifpref {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.notifpref:hover { background: var(--surface); }
.notifpref input { margin-top: 2px; flex: none; accent-color: var(--kt-pink); width: 16px; height: 16px; }
.notifpref__text { display: grid; gap: 1px; min-width: 0; }
.notifpref__text strong { font-size: 0.82rem; }
.notifpref__text span { font-size: 0.74rem; color: var(--ink-2); line-height: 1.45; }
/* Not a switch: the server ignores preferences for critical types, so this
   row states the rule instead of pretending to control it. */
.notifpref.is-locked { cursor: default; }
.notifpref.is-locked:hover { background: transparent; }
.notifpref__lock {
  flex: none;
  margin-top: 2px;
  width: 16px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}