/* ============================================================
   App layer: makes the site feel like an ordering app on phones
   and adds polish everywhere. Same brand tokens as site.css.
   ============================================================ */
:root {
  --app-tabbar-h: 68px;
  --app-safe-b: env(safe-area-inset-bottom, 0px);
  --app-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ── Global polish ─────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--bj-gold); outline-offset: 3px; border-radius: 6px; }
.bj-btn { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ── Bottom tab bar (phones) ───────────────────────────────── */
.bj-tabbar { display: none; }
@media (max-width: 768px) {
  :root { --bj-nav-height: 64px; }
  body { padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-b)); }
  .bj-nav__logo-img { height: 52px; }
  .bj-nav__inner { padding: 0 14px; }

  .bj-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    height: calc(var(--app-tabbar-h) + var(--app-safe-b)); padding-bottom: var(--app-safe-b);
    background: rgba(45, 27, 94, .98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(201, 168, 76, .25); box-shadow: 0 -6px 24px rgba(14, 10, 26, .35);
  }
  .bj-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: rgba(253, 246, 227, .72); font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    -webkit-tap-highlight-color: transparent; min-height: 48px;
  }
  .bj-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bj-tab.is-active { color: var(--bj-gold); }
  .bj-tab:active { transform: scale(.94); }
  .bj-tab--main { color: var(--bj-cream); }
  .bj-tab__bubble {
    display: grid; place-items: center; width: 54px; height: 54px; margin-top: -26px; border-radius: 50%;
    background: linear-gradient(145deg, var(--bj-gold-light), var(--bj-gold)); color: var(--bj-purple-deep);
    box-shadow: 0 6px 18px rgba(201, 168, 76, .45), 0 0 0 5px rgba(45, 27, 94, .98);
  }
  .bj-tab__bubble svg { width: 26px; height: 26px; stroke-width: 2; }
  .bj-tab--main.is-active .bj-tab__bubble { box-shadow: 0 6px 22px rgba(232, 201, 110, .7), 0 0 0 5px rgba(45, 27, 94, .98); }
  .bj-tab--main.is-active { color: var(--bj-gold); }

  /* The footer sits above the tab bar */
  .bj-footer { padding-bottom: 24px; }

  /* Menu page: one swipeable row of category chips, like an app */
  .bj-menu-nav { position: sticky; top: var(--bj-nav-height); z-index: 50; }
  .bj-menu-nav__inner { flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap !important; scrollbar-width: none; padding: 10px 14px !important; gap: 8px !important; }
  .bj-menu-nav__inner::-webkit-scrollbar { display: none; }
  .bj-menu-nav__link { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: rgba(253, 246, 227, .1); border: 1px solid rgba(201, 168, 76, .35); }
  .bj-gallery-nav__inner { flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap !important; }
  .bj-gallery-filter { flex-shrink: 0 !important; }

  /* Shorter hero on inner pages so content shows sooner */
  .bj-page-hero { min-height: 230px !important; }
  .bj-page-hero__sub { font-size: .92rem; }
}

/* ── Home: quick actions ───────────────────────────────────── */
.app-quick { max-width: var(--bj-max-width); margin: -36px auto 0; padding: 0 16px; position: relative; z-index: 5; }
.app-quick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.app-quick__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 14px 8px;
  background: var(--bj-white); border-radius: 18px; box-shadow: var(--bj-shadow); color: var(--bj-purple-deep);
  font-weight: 700; font-size: .85rem; text-align: center; transition: transform .2s var(--app-ease), box-shadow .2s;
}
.app-quick__btn:hover { transform: translateY(-3px); box-shadow: var(--bj-shadow-hover); }
.app-quick__btn:active { transform: scale(.97); }
.app-quick__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--bj-purple-deep); color: var(--bj-gold); }
.app-quick__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-quick__btn--main { background: linear-gradient(150deg, var(--bj-purple-mid), var(--bj-purple-deep)); color: var(--bj-cream); }
.app-quick__btn--main .app-quick__icon { background: var(--bj-gold); color: var(--bj-purple-deep); }
@media (max-width: 480px) { .app-quick__btn { min-height: 84px; font-size: .78rem; border-radius: 16px; } .app-quick__grid { gap: 8px; } }

/* ============================================================
   Order screen, app style (overrides order.css)
   ============================================================ */
.oz { padding-bottom: calc(140px + var(--app-safe-b)); }
.oz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 6px; }
.oz-head__title { font-family: var(--bj-font-heading); color: var(--bj-purple-deep); font-size: 1.35rem; }
.oz-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--bj-white); box-shadow: var(--bj-shadow); font-size: .8rem; font-weight: 600; color: var(--bj-purple-deep); white-space: nowrap; }
.oz-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bj-gold); }

.oz-search { position: relative; margin: 10px 0 4px; }
.oz-search input { width: 100%; padding: 13px 16px 13px 44px; border-radius: 14px; border: 1px solid #ddd0ee; background: var(--bj-white); font-size: 16px; color: var(--bj-text); box-shadow: 0 2px 10px rgba(45, 27, 94, .06); }
.oz-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--bj-text-light); stroke-width: 2; }

.oz-tabs { gap: 8px; padding: 10px 0 12px; scrollbar-width: none; background: linear-gradient(var(--bj-cream) 85%, rgba(253, 246, 227, 0)); }
.oz-tabs::-webkit-scrollbar { display: none; }
.oz-tabs a { padding: 9px 16px; box-shadow: none; border: 1px solid #ddd0ee; transition: background .2s, color .2s, border-color .2s; }
.oz-tabs a.is-on { background: var(--bj-purple-deep); color: var(--bj-gold); border-color: var(--bj-purple-deep); }

.oz-cat { padding-top: 18px; }
.oz-cat .oz-h2 { font-size: 1.25rem; display: flex; align-items: baseline; gap: 10px; }
.oz-cat .oz-h2 small { font-family: var(--bj-font-body); font-size: .8rem; color: var(--bj-text-light); font-weight: 500; }

/* Item rows: photo on the right, add button, like delivery apps */
.oz-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.oz-item { flex-direction: row; align-items: stretch; min-height: 118px; border-radius: 18px; box-shadow: 0 2px 14px rgba(45, 27, 94, .09); position: relative; }
.oz-item .oz-item__body { flex: 1; padding: 14px 14px 14px 16px; justify-content: center; }
.oz-item__name { font-size: 1rem; line-height: 1.25; }
.oz-item__desc { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; line-height: 1.35; }
.oz-item__price { margin-top: 4px; font-size: .95rem; color: var(--bj-purple-deep); }
.oz-item img, .oz-item .oz-item__ph { width: 118px; min-width: 118px; height: auto; aspect-ratio: auto; object-fit: cover; border-radius: 0 18px 18px 0; }
.oz-item .oz-item__ph { font-size: 2rem; }
.oz-item__add {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bj-gold); color: var(--bj-purple-deep);
  font-size: 1.5rem; font-weight: 700; line-height: 1; box-shadow: 0 4px 12px rgba(45, 27, 94, .25);
}
.oz-item.is-out .oz-item__add { display: none; }
.oz-item:active:not(:disabled) { transform: scale(.985); }
.oz-empty { padding: 30px 0; text-align: center; color: var(--bj-text-light); }

/* Item sheet: slides up from the bottom on phones */
.oz-dialog { border-radius: 24px; overflow: hidden; }
.oz-dialog[open] { animation: oz-pop .25s var(--app-ease); }
@keyframes oz-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.oz-dialog__inner { padding: 0 0 0; max-height: calc(100vh - 32px); overflow-y: auto; }
.oz-sheet-body { padding: 18px 20px 8px; }
.oz-item-img { border-radius: 0; margin: 0; aspect-ratio: 16 / 11; }
.oz-x { top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); font-size: 1.5rem; display: grid; place-items: center; }
.oz-opt { min-height: 52px; border-radius: 14px; }
.oz-opt:has(input:checked) { border-color: var(--bj-purple-mid); background: #f6f1ff; }
.oz-opt input { width: 20px; height: 20px; accent-color: var(--bj-purple-mid); }
.oz-sheet-foot {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + var(--app-safe-b));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--bj-cream-dark);
}
.oz-sheet-foot .oz-qty { margin: 0; gap: 10px; }
.oz-sheet-foot #oz-add { flex: 1; min-height: 52px; border-radius: 999px; font-size: 1rem; }
.oz-cart-inner { padding: 22px 20px calc(24px + var(--app-safe-b)); }

/* Floating cart pill above the tab bar */
.oz-cartbar { background: none; box-shadow: none; padding: 0 14px; bottom: calc(16px + var(--app-safe-b)); pointer-events: none; }
.oz-cartbar__btn {
  pointer-events: auto; align-items: center; min-height: 58px; padding: 0 8px 0 20px; font-size: 1rem;
  background: linear-gradient(150deg, var(--bj-purple-mid), var(--bj-purple-deep)); box-shadow: 0 10px 30px rgba(45, 27, 94, .45);
  animation: oz-rise .3s var(--app-ease);
}
.oz-cartbar__btn #oz-cart-total { background: var(--bj-gold); color: var(--bj-purple-deep); padding: 10px 16px; border-radius: 999px; }
@keyframes oz-rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Rewards card */
.oz-punch { scroll-margin-top: 90px; background: linear-gradient(150deg, var(--bj-purple-mid), var(--bj-purple-deep)); color: var(--bj-cream); position: relative; overflow: hidden; }
.oz-punch::after { content: "\263E"; position: absolute; right: -10px; top: -30px; font-size: 9rem; color: rgba(201, 168, 76, .12); }
.oz-punch .oz-h2 { color: var(--bj-gold); }
.oz-punch .oz-muted { color: rgba(253, 246, 227, .85); }
.oz-punch-demo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 360px; margin: 16px 0; }
.oz-punch-demo span, .oz-dot { width: auto; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(201, 168, 76, .7); display: grid; place-items: center; font-size: 1.1rem; }
.oz-punch-demo span:last-child { border-style: solid; background: rgba(201, 168, 76, .18); }
.oz-dots { display: grid; grid-template-columns: repeat(5, 44px); gap: 10px; }
.oz-dot.is-on { background: var(--bj-gold); border-style: solid; }
.oz-punch .bj-btn--primary { background: var(--bj-gold); color: var(--bj-purple-deep); }
.oz-punch-result { color: var(--bj-cream); }

@media (max-width: 768px) {
  .oz { padding-top: 10px; }
  .bj-page-hero--short { display: none; }
  .oz-tabs { top: var(--bj-nav-height) !important; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .oz-grid { grid-template-columns: 1fr; gap: 10px; }
  .oz-item { min-height: 112px; }
  .oz-item img, .oz-item .oz-item__ph { width: 108px; min-width: 108px; }
  .oz-cartbar { bottom: calc(var(--app-tabbar-h) + 10px + var(--app-safe-b)); }

  .oz-dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .oz-dialog[open] { animation: oz-sheet .32s var(--app-ease); }
  .oz-dialog__inner { max-height: 92vh; }
  .oz-dialog::before { content: ""; position: absolute; top: 8px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 9px; background: rgba(255, 255, 255, .85); z-index: 3; }
  @keyframes oz-sheet { from { transform: translateY(100%); } to { transform: none; } }
  .oz-dots { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   Computers: two-column order screen, slimmer header
   ============================================================ */
.oz-side { display: none; }
@media (min-width: 769px) {
  :root { --bj-nav-height: 92px; }
  .bj-nav__logo-img { height: 76px; }
  .bj-page-hero--short { min-height: 220px; }
}
@media (min-width: 1024px) {
  .oz { max-width: 1280px; padding: 28px 32px 80px; }
  .oz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
  .oz-head__title { font-size: 1.7rem; }
  .oz-tabs { top: var(--bj-nav-height) !important; }
  .oz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .oz-item { min-height: 132px; }
  .oz-item img, .oz-item .oz-item__ph { width: 132px; min-width: 132px; }
  .oz-item:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(45, 27, 94, .16); }
  .oz-cartbar { display: none !important; }

  .oz-side { display: block; position: sticky; top: calc(var(--bj-nav-height) + 20px); }
  .oz-side__card { background: var(--bj-white); border-radius: 22px; padding: 22px; box-shadow: 0 10px 40px rgba(45, 27, 94, .14); border-top: 4px solid var(--bj-gold); }
  .oz-side__meta { color: var(--bj-text-light); font-size: .85rem; margin: -6px 0 14px; }
  .oz-side__lines { list-style: none; margin: 0 0 12px; max-height: 46vh; overflow-y: auto; }
  .oz-side__lines li { display: grid; grid-template-columns: 28px 1fr auto 24px; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--bj-cream-dark); font-size: .9rem; }
  .oz-side__qty { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--bj-cream-dark); font-weight: 700; font-size: .8rem; color: var(--bj-purple-deep); }
  .oz-side__name { font-weight: 600; color: var(--bj-purple-deep); }
  .oz-side__name small { display: block; font-weight: 400; color: var(--bj-text-light); font-size: .78rem; }
  .oz-side__empty { display: block !important; color: var(--bj-text-light); text-align: center; padding: 26px 0 !important; border: 2px dashed var(--bj-cream-dark) !important; border-radius: 14px; }
  .oz-side__total { display: flex; justify-content: space-between; font-size: 1.05rem; margin: 6px 0 14px; color: var(--bj-purple-deep); }
  .oz-side #oz-side-checkout { min-height: 54px; border-radius: 999px; font-size: 1rem; }
  .oz-side #oz-side-checkout:disabled { opacity: .45; cursor: not-allowed; }
  .oz-side__note { margin-top: 12px; font-size: .8rem; color: var(--bj-text-light); text-align: center; }
  .oz-punch { margin-top: 36px; }
}
@media (min-width: 1440px) { .oz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oz { max-width: 1440px; } }

/* ── Computers: left category list + round photo grid (order screen) ── */
@media (min-width: 1024px) {
  .oz-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .oz-main { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .oz-main > * { grid-column: 2; }
  .oz-main > .oz-tabs {
    grid-column: 1; grid-row: 1 / span 6; position: sticky; top: calc(var(--bj-nav-height) + 20px) !important;
    display: flex; flex-direction: column; gap: 2px; overflow: visible; padding: 4px 0; margin: 0; background: none;
  }
  .oz-main > .oz-tabs::before { content: "Menu"; font-family: var(--bj-font-heading); font-size: 1.25rem; color: var(--bj-purple-deep); margin: 0 0 10px 12px; }
  .oz-tabs a { border: 0; border-radius: 10px; background: none; padding: 9px 12px; font-size: .95rem; font-weight: 500; color: var(--bj-text-light); white-space: normal; border-left: 3px solid transparent; }
  .oz-tabs a:hover { background: rgba(45, 27, 94, .06); color: var(--bj-purple-deep); }
  .oz-tabs a.is-on { background: rgba(45, 27, 94, .08); color: var(--bj-purple-deep); font-weight: 700; border-left-color: var(--bj-gold); }

  .oz-cat { padding-top: 34px; }
  .oz-cat .oz-h2 { font-size: 1.9rem; margin-bottom: 22px; }
  .oz-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 34px 20px !important; }
  .oz-item {
    flex-direction: column; align-items: center; text-align: center; min-height: 0; background: none; box-shadow: none; overflow: visible; border-radius: 0;
  }
  .oz-item:hover:not(:disabled) { transform: none; box-shadow: none; }
  .oz-item img, .oz-item .oz-item__ph {
    order: -1; width: 168px !important; min-width: 0 !important; height: 168px; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
    background: radial-gradient(circle at 50% 40%, var(--bj-purple-light), var(--bj-purple-deep));
    box-shadow: 0 10px 26px rgba(45, 27, 94, .22); transition: transform .25s var(--app-ease), box-shadow .25s;
  }
  .oz-item:hover:not(:disabled) img, .oz-item:hover:not(:disabled) .oz-item__ph { transform: scale(1.05); box-shadow: 0 16px 34px rgba(45, 27, 94, .3); }
  .oz-item .oz-item__body { padding: 14px 4px 0; align-items: center; }
  .oz-item__name { font-size: 1.08rem; }
  .oz-item__desc { -webkit-line-clamp: 2; max-width: 220px; }
  .oz-item__add { right: auto; left: 50%; top: 128px; bottom: auto; margin-left: 46px; width: 40px; height: 40px; }
}
/* Browse-only menu (live site before ordering opens): no add buttons, normal colors. */
.oz-item.is-browse { cursor: default; opacity: 1; }
.oz-item.is-browse .oz-item__add { display: none; }