:root {
  --ink: #080808;
  --green: #111111;
  --gold: #111111;
  --muted: #686868;
  --line: #e4e4e4;
  --cream: #f7f7f7;
}

/* Immersive restaurant menu */
#vr-panorama {
  width: 100%;
  height: 100%;
  background: url("meddina-restaurant-vr.png") 50% 50% / auto 100% no-repeat;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
#vr-panorama.dragging {
  cursor: grabbing;
}
.vr-top,
.vr-controls {
  position: absolute;
  left: 22px;
  display: flex;
  gap: 8px;
}
.vr-top {
  top: 20px;
  color: #fff;
}
.vr-top span {
  background: rgba(20, 16, 12, 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.26);
  padding: 7px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
}
.vr-top span:first-child {
  background: #fff;
  color: #050505;
  font-weight: 800;
}
.vr-controls {
  bottom: 24px;
}
.vr-controls button {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(20, 16, 12, 0.7);
  color: #fff;
  border-radius: 22px;
  padding: 10px 14px;
}
.vr-controls button.active {
  background: #fff;
  color: var(--ink);
}
.drag-copy {
  position: absolute;
  right: 22px;
  bottom: 28px;
  margin: 0;
  color: #fff;
  font-size: 0.74rem;
  text-shadow: 0 1px 8px #000;
}
.menu-item .tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  grid-column: 1;
}
.menu-item .tags span {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 7px;
  font-size: 0.64rem;
  color: var(--muted);
}
.menu-item .menu-actions {
  grid-column: 2;
  grid-row: 2/5;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-self: end;
}
.menu-item .menu-actions button {
  position: static;
  grid-column: auto;
  grid-row: auto;
}
.menu-item .view-dish {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
}
.menu-note {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 18px;
}
.diet.active {
  background: var(--ink);
  color: #fff;
}
.ai-menu-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}.ai-menu-tools label,.ai-menu-tools button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-weight:750}.ai-menu-tools select{border:0;background:transparent;font:inherit}.menu-assistant{margin-top:34px;padding:24px;border:1px solid var(--line);background:var(--cream)}.menu-assistant>span{font-size:.68rem;font-weight:900;letter-spacing:.14em}.menu-assistant h2{font:400 1.7rem Georgia,serif;margin:9px 0 15px}.menu-assistant>div{display:flex;gap:8px}.menu-assistant input{flex:1;min-width:0;border:1px solid #ccc;background:#fff;padding:13px;font-size:1rem}.menu-assistant button{border:0;background:var(--ink);color:#fff;padding:0 20px;font-weight:800}.menu-assistant small{display:block;color:var(--muted);margin-top:13px}.menu-assistant p:empty{display:none}.menu-assistant p{line-height:1.55}
@media (max-width: 760px) {
  .venue-media {
    height: 310px;
  }
  .drag-copy {
    display: none;
  }
  .vr-controls {
    left: 14px;
    bottom: 16px;
  }
  .vr-top {
    left: 14px;
    top: 14px;
  }
  .section-heading {
    flex-direction: column;
  }
}
@media(max-width:480px){.menu-assistant>div{flex-direction:column}.menu-assistant button{padding:13px}}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  background: #fff;
}
.menu-header {
  height: 78px;
  display: flex;
  align-items: center;
  padding: 0 max(20px, 5vw);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  z-index: 10;
}
.menu-header img {
  width: 105px;
  height: 58px;
  object-fit: contain;
}
.menu-header > span {
  margin-left: auto;
  margin-right: 18px;
  font-size: 0.78rem;
  color: var(--muted);
}
button {
  font: inherit;
}
.menu-header button,
.checkout {
  border: 0;
  border-radius: 24px;
  background: var(--ink);
  color: white;
  padding: 11px 17px;
  font-weight: 750;
}
.menu-header b {
  background: var(--gold);
  color: var(--ink);
  padding: 3px 7px;
  border-radius: 12px;
  margin-left: 6px;
}
.venue {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 430px;
  background: var(--cream);
}
.venue-media {
  position: relative;
  overflow: hidden;
}
.venue-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.venue-media button {
  position: absolute;
  left: 24px;
  bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(15, 46, 42, 0.82);
  color: #fff;
  border-radius: 24px;
  padding: 12px 17px;
}
.venue-copy {
  padding: 70px clamp(28px, 7vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eyebrow {
  color: var(--green);
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 800;
  margin: 0;
}
.venue h1 {
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.96;
  margin: 10px 0 20px;
}
.venue-copy > p:not(.eyebrow) {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  color: var(--muted);
  line-height: 1.6;
}
.venue-copy > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.venue-copy span {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 7px 10px;
  font-size: 0.75rem;
  background: #fff;
}
.menu-nav {
  position: sticky;
  top: 78px;
  z-index: 9;
  display: flex;
  gap: 6px;
  overflow: auto;
  padding: 12px 5vw;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.menu-nav button {
  border: 0;
  background: #eff2f1;
  border-radius: 20px;
  padding: 9px 16px;
  white-space: nowrap;
  color: var(--ink);
}
.menu-nav button.active {
  background: var(--green);
  color: white;
}
.menu-section,
.discover {
  padding: 58px max(20px, 7vw);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 24px;
}
.section-heading h2 {
  font-family: Georgia, serif;
  font-size: 2rem;
  margin: 7px 0 0;
}
.section-heading p:not(.eyebrow) {
  color: var(--muted);
  margin: 7px 0 0;
}
.diet {
  border: 1px solid var(--line);
  background: white;
  border-radius: 20px;
  padding: 9px 14px;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.menu-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}
.menu-item h3,
.menu-item p {
  margin: 0;
}
.menu-item h3 {
  font-family: Georgia, serif;
  font-size: 1.2rem;
}
.menu-item p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
.menu-item strong {
  grid-column: 2;
  grid-row: 1;
}
.menu-item .menu-actions button {
  grid-column: 2;
  grid-row: 2/4;
  align-self: end;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 1.1rem;
}
.discover {
  background: #080808;
  color: #fff;
}
.discover .eyebrow {
  color: #fff;
}
.discover .section-heading p {
  color: #bdbdbd;
}
.discover .section-heading > a {
  color: #fff;
}
.ad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ad-card {
  position: relative;
  min-height: 360px;
  border-radius: 13px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.ad-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 35%, rgba(5, 24, 22, 0.9));
}
.ad-card img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
}
.ad-card > div {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
}
.ad-card h3 {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  margin: 0;
}
.ad-card p {
  color: #d7d7d7;
}
.ad-card strong {
  font-size: 0.8rem;
}
.sponsored {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  background: rgba(10, 42, 38, 0.83);
  padding: 7px 10px;
  border-radius: 16px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}
#basket {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  background: white;
  z-index: 30;
  padding: 28px;
  transform: translateX(100%);
  transition: 0.25s;
  box-shadow: -20px 0 60px rgba(10, 35, 32, 0.2);
}
#basket.open {
  transform: none;
}
#close-basket {
  position: absolute;
  right: 20px;
  top: 20px;
  border: 0;
  background: #edf1ef;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
}
#basket h2 {
  font-family: Georgia, serif;
  font-size: 2rem;
  margin: 8px 0 25px;
}
.basket-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  font-size: 0.88rem;
}
.basket-total {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}
.checkout {
  width: 100%;
}
#shade {
  position: fixed;
  inset: 0;
  background: rgba(4, 24, 21, 0.5);
  z-index: 20;
  display: none;
}
#shade.show {
  display: block;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 20px);
  opacity: 0;
  background: var(--ink);
  color: white;
  border-radius: 22px;
  padding: 11px 17px;
  transition: 0.2s;
  z-index: 40;
  font-size: 0.82rem;
}
#toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
@media (max-width: 760px) {
  .menu-header > span {
    display: none;
  }
  .venue {
    grid-template-columns: 1fr;
  }
  .venue-media {
    height: 280px;
  }
  .venue-copy {
    padding: 35px 22px;
  }
  .menu-section,
  .discover {
    padding: 42px 20px;
  }
  .menu-grid,
  .ad-grid {
    grid-template-columns: 1fr;
  }
  .section-heading {
    align-items: flex-start;
    gap: 15px;
  }
  .ad-card {
    min-height: 310px;
  }
  .menu-nav {
    top: 78px;
  }
}

.menu-header{flex-wrap:wrap;gap:12px}.customer-login{font-size:16px;color:#111;text-decoration:underline;min-height:44px;display:inline-flex;align-items:center;padding:8px}
/* Medina.online shared wordmark */
.menu-wordmark img{display:block;width:145px;max-width:28vw;height:auto}