/* Shared styles for the shop pages (home + full menu) */
header.top { background: rgba(20,20,20,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 12px; }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.7rem; letter-spacing: .03em; color: var(--ink); text-decoration: none; }
.logo img { height: 30px; width: auto; }
nav { display: flex; align-items: center; gap: 18px; }
nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
nav a:hover { color: var(--brand); }
nav .btn { color: var(--brand-ink); }
@media (max-width: 640px) { nav a.hide-sm { display: none; } }

/* hero = the flyer */
.hero { position: relative; overflow: hidden; padding: 48px 0 40px;
  background: radial-gradient(ellipse 60% 70% at 78% 40%, #2c2c2c 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 10% 90%, #242424 0%, transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } }
/* "JANE'S KITCHEN" stays on one line like the flyer: sized to the screen (phone) or to its column (desktop) */
.brand-mark { position: relative; display: inline-block; padding-top: .45em; white-space: nowrap; font-size: clamp(2.6rem, 13.5vw, 6.6rem); }
@media (min-width: 821px) { .brand-mark { font-size: clamp(3rem, 8vw, 5.6rem); } }
.hero .brand-mark h1 { font-size: 1em; }

/* Chef hat worn by the N: sized in em so it scales with whatever text size the logo uses,
   tilted to the right like the flyer, brim resting on the top of the letter. */
.logo-word { white-space: nowrap; }
.cap-n { position: relative; display: inline-block; }
.cap-n .cap {
  position: absolute; pointer-events: none;
  width: 1.4em; aspect-ratio: 264 / 200; left: 50%; bottom: 64%;
  transform: translateX(calc(-50% - .08em)) rotate(14deg); transform-origin: 40% 100%;
}
/* Solid inside (hides the tops of the letters, as if they're tucked into the hat),
   then the white outline drawn on top. --cap-fill matches the background behind each logo. */
.cap-n .cap::before, .cap-n .cap::after { content: ''; position: absolute; inset: 0; }
.cap-n .cap::before {
  background: var(--cap-fill, var(--bg));
  -webkit-mask: url(media/chef-hat-shape.png) center / contain no-repeat;
          mask: url(media/chef-hat-shape.png) center / contain no-repeat;
}
.cap-n .cap::after { background: url(media/chef-hat.png) center / contain no-repeat; }
.hero { --cap-fill: #1d1d1d; }
header.top { --cap-fill: #141414; }
footer { --cap-fill: var(--bg-2); }
.brand-mark { padding-top: .6em; }
/* the small logos (top bar, footer) get a slightly smaller hat so it fits the bar */
.logo { padding-top: .5em; }
.logo .cap-n .cap { width: 1.1em; }
header .logo { padding-top: .6em; }
.hero h1 { font-size: clamp(3.6rem, 11vw, 6.6rem); margin: 0; line-height: .9; }
.hero .tagline { font-family: var(--script); color: var(--brand); font-size: clamp(1.7rem, 4.6vw, 2.6rem); margin: 4px 0 18px; line-height: 1.1; }
.hero p.lead { font-size: 1.05rem; max-width: 470px; color: var(--muted); margin: 0 0 22px; }
@media (max-width: 820px) { .hero p.lead { margin-left: auto; margin-right: auto; } }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 820px) { .cta { justify-content: center; } }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
@media (max-width: 820px) { .facts { justify-content: center; } }

/* The picture area keeps the bowls' proportions (it grows in width AND height together),
   so the two bowls always fit inside it and never spill over the text above or below.
   On one-column screens it's capped and centred so the bowls don't get huge. */
.plates { position: relative; width: 100%; aspect-ratio: 1 / .92; max-width: 520px; margin-inline: auto; }
@media (max-width: 820px) { .plates { max-width: 440px; margin-top: 8px; } }
/* each name tag lives inside its own bowl's box, so it moves and scales with that bowl */
.bowl-fig { position: absolute; width: 62%; aspect-ratio: 1; margin: 0; }
.bowl-fig.f1 { left: 0; top: 0; animation: float 7s ease-in-out infinite; }
.bowl-fig.f2 { right: 0; bottom: 0; animation: float 7s ease-in-out -3.5s infinite; }
.bowl-fig img.bowl { display: block; width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 22px 30px rgba(0,0,0,.6)); }
.bowl-fig .tag {
  position: absolute; white-space: nowrap;
  font-size: clamp(.78rem, 2.4vw, .95rem); font-weight: 700; color: var(--ink);
  background: rgba(20, 20, 20, .88); border: 1.5px solid var(--brand); border-radius: 99px;
  padding: .3em .85em; box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
/* Jollof's tag sits at its lower-left edge, Egusi's at its lower-right edge:
   spots the other bowl never covers, at any screen size. */
.bowl-fig.f1 .tag { left: 2%; bottom: 10%; }
.bowl-fig.f2 .tag { right: 2%; bottom: 6%; }
@keyframes float { 50% { transform: translateY(-10px); } }
.leaf { position: absolute; pointer-events: none; opacity: .95; }
.leaf.l1 { width: 70px; right: 0; top: 18%; }
.leaf.l2 { width: 52px; left: 0; bottom: -46px; opacity: .8; }
@media (max-width: 820px) { .leaf.l1 { width: 46px; top: 4%; } .leaf.l2 { display: none; } }
@media (prefers-reduced-motion: reduce) { .bowl-fig { animation: none; } }

.call-strip { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
.call-strip .wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.call-strip .order-online { font-family: var(--display); font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: .03em; color: var(--brand); text-decoration: none; line-height: 1.1; }
.call-strip .order-online:hover { filter: brightness(1.1); }
.call-strip .call-small { font-size: .9rem; }
.call-strip .call-small a { color: var(--ink); font-weight: 700; text-decoration: none; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }

.layout { padding-bottom: 40px; }

.menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.dish { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dish .pic { font-size: 3rem; line-height: 1; background: radial-gradient(circle at 50% 45%, #333 0%, var(--surface) 70%); border-radius: 12px; height: 190px; display: grid; place-items: center; }
/* every dish photo moves like the Jollof: a gentle float all the time,
   and a tilt when pointed at or tapped. Each card floats a little out of step with the next. */
.dish .pic img {
  height: 176px; width: 176px; border-radius: 50%; object-fit: cover;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
  transition: rotate .5s ease, scale .5s ease;
  animation: dish-float 6s ease-in-out infinite;
}
.dish:nth-child(3n+2) .pic img { animation-delay: -2s; }
.dish:nth-child(3n+3) .pic img { animation-delay: -4s; }
.dish:hover .pic img, .dish:focus-within .pic img, .dish:active .pic img { rotate: 8deg; scale: 1.04; }
@keyframes dish-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .dish .pic img { animation: none; transition: none; } }
.dish h3 { font-size: 1.7rem; margin: 6px 0 0; }
.dish p { margin: 0; color: var(--muted); font-size: .92rem; flex: 1; }
.dish .meta { display: flex; justify-content: space-between; align-items: center; }
.price { font-weight: 800; font-size: 1.1rem; }
.bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.bar.low i { background: var(--warn); }
.dish.soldout { opacity: .6; }
.dish.soldout .pic { filter: grayscale(1); }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stepper button { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface-2); font-size: 1.3rem; font-weight: 800; cursor: pointer; color: var(--ink); }
.stepper button[data-inc]:not(:disabled) { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { font-weight: 800; min-width: 2ch; text-align: center; font-size: 1.1rem; }

.see-all { font-weight: 700; text-decoration: none; }
.see-all:hover { text-decoration: underline; }
.menu-more { text-align: center; margin-top: 22px; }
.full-menu-btn { min-width: min(320px, 100%); font-size: 1.05rem; }

/* full menu page */
.menu-hero { padding: 34px 0 10px; }
.menu-hero h1 { font-size: clamp(3rem, 9vw, 5rem); margin: 0; }
.back-home { display: inline-block; margin-bottom: 10px; font-weight: 700; text-decoration: none; }
.cat-nav { position: sticky; top: 72px; z-index: 15; background: rgba(20,20,20,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); margin: 0 -16px 8px; padding: 10px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav button { flex: none; padding: .45em 1em; border-radius: 99px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; min-height: 38px; }
.cat-nav button .n { color: var(--muted); font-weight: 600; margin-left: 2px; }
.cat-nav button:hover { border-color: var(--brand); }
.cat-nav button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cat-nav button[aria-pressed="true"] .n { color: var(--brand-ink); opacity: .7; }
.cat { margin-top: 26px; }
.cat-title { font-size: 2.2rem; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 16px; }

.add-btn { width: 100%; }
.in-basket { font-size: .8rem; color: var(--ok); font-weight: 700; text-align: center; }

/* basket button in the header */
.basket-btn { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.basket-btn:hover { border-color: var(--brand); color: var(--brand); }
.basket-btn svg { width: 24px; height: 24px; }
.basket-btn .badge { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--brand); color: var(--brand-ink); font-size: .78rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--bg); }
.basket-btn .badge:empty { display: none; }
.basket-btn.bump { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.22) rotate(-8deg); } 60% { transform: scale(.94) rotate(4deg); } }

/* photo that flies into the basket */
.fly { position: fixed; z-index: 60; border-radius: 50%; pointer-events: none; transition: transform .7s cubic-bezier(.5,-0.3,.7,.9), opacity .7s; }

/* slide-out basket */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .25s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 50; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -20px 0 40px rgba(0,0,0,.45); display: flex; flex-direction: column; transform: translateX(105%); transition: transform .3s ease; }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 2rem; margin: 0; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.drawer-foot { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }
.bitem { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bitem img, .bitem .ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; font-size: 1.8rem; }
.bitem .nm { font-weight: 700; line-height: 1.25; }
.bitem .stepper { justify-content: flex-start; gap: 10px; margin-top: 6px; }
.bitem .stepper button { width: 32px; height: 32px; font-size: 1rem; }
.bitem .remove { background: none; border: 0; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; padding: 0; margin-top: 6px; }
.bitem .amt { font-weight: 800; text-align: right; }
.empty { text-align: center; padding: 40px 10px; }
.empty svg { width: 64px; height: 64px; color: var(--muted); margin-bottom: 8px; }
details.extra { margin-bottom: 14px; }
details.extra summary { cursor: pointer; font-weight: 700; color: var(--brand); list-style: none; padding: 6px 0; }
details.extra summary::-webkit-details-marker { display: none; }
details.extra[open] summary { color: var(--muted); }
.back-link { background: none; border: 0; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 12px; }

/* small "added" message */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translate(-50%, 30px); opacity: 0; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 99px; font-weight: 700; font-size: .92rem; transition: .25s; pointer-events: none; white-space: nowrap; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 900px) { body.has-cart .toast { bottom: 88px; } }
@media (prefers-reduced-motion: reduce) { .drawer, .fly, .toast { transition: none; } .basket-btn.bump { animation: none; } }

.promo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: 20px; margin: 10px 0 36px; }
@media (max-width: 760px) { .promo { grid-template-columns: 1fr; } }
.promo video { width: 100%; aspect-ratio: 16/9; border-radius: 12px; display: block; background: #000; object-fit: cover; }
.promo h2 { font-size: 2.6rem; }

.mobile-bar { display: none; }
@media (max-width: 900px) {
  .mobile-bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; box-shadow: 0 8px 28px rgba(0,0,0,.6); }
  body.has-cart { padding-bottom: 84px; }
}

.request { padding: 22px; margin: 10px 0 48px; }
.request-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; }
@media (max-width: 760px) { .request-grid { grid-template-columns: 1fr; } }
.request-grid:has(> form.hidden) { grid-template-columns: 1fr; max-width: 640px; }

.confirm { padding: 26px; max-width: 620px; margin: 30px auto 60px; text-align: center; }
.confirm .big { font-size: 3rem; }
.confirm h1 { font-size: 3rem; }
.confirm .code { font-family: ui-monospace, Consolas, monospace; font-size: 1.4rem; font-weight: 800; background: var(--brand-soft); color: var(--brand); padding: 4px 12px; border-radius: 8px; display: inline-block; }
.paybox { text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 18px 0; }

footer { border-top: 1px solid var(--line); padding: 28px 0 44px; background: var(--bg-2); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
footer .logo { font-size: 1.9rem; }
.demo-note { background: var(--warn-soft); color: var(--warn); font-size: .82rem; text-align: center; padding: 6px 16px; font-weight: 700; }

/* one payment option only (card not linked yet) */
.choice.single { grid-template-columns: 1fr; }