@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

.modern-grid {
  --mg-blue: #2f5a76;
  --mg-blue-dark: #264a61;
  --mg-blue-light: #496f87;
  --mg-bg: #ffffff;
  --mg-soft: #f5f5f5;
  --mg-soft-border: #d9e6f0;
  --mg-disabled-bg: #9fb3c3;
  --mg-footer-muted: #d9e6f0;
  --mg-footer-link: #e7f1f8;
  --mg-primary-rgb: 47, 90, 118;
  --mg-text: #2f5a76;
  --mg-muted: #496f87;
  --mg-border: #2f5a76;
  --mg-shadow: 0 14px 30px rgba(27, 43, 53, 0.14);
  --mg-pill-shadow: 0 12px 24px rgba(27, 43, 53, 0.2);
  font-family: "Poppins", sans-serif;
  background: var(--mg-bg);
  color: var(--mg-text);
  min-height: 100vh;
  position: relative;
}

.modern-grid *,
.modern-grid *::before,
.modern-grid *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.modern-grid img {
  max-width: 100%;
  display: block;
}

.modern-grid a {
  color: inherit;
  text-decoration: none;
}

.modern-grid button {
  font-family: inherit;
}

.modern-grid .mg-container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* Header */
.modern-grid .mg-header {
  background: transparent;
  padding: 20px 0 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.modern-grid .mg-header-inner {
  display: flex;
}

.modern-grid .mg-nav-shell {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  background: var(--mg-blue);
  border-radius: 999px;
  padding: 6px 18px;
  box-shadow: var(--mg-pill-shadow);
  height: 94px;
}

.modern-grid .mg-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: var(--mg-blue);
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 700;
  /* Slightly stronger ring so the logo chip reads as a highlight on the blue bar. */
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  white-space: nowrap;
  height: 82px;
}

.modern-grid .mg-brand img {
  /* Larger logo so it fills the chip and stands out (was 36px). */
  height: 56px;
  width: auto;
}

.modern-grid .mg-logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mg-blue);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.modern-grid .mg-logo-text {
  font-size: 0.95rem;
  letter-spacing: 0.4px;
}

.modern-grid .mg-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 0 14px;
  border-radius: 999px;
  flex-wrap: wrap;
  justify-content: center;
  height: 82px;
  box-shadow: inset 0 0 0 1px #e6edf2;
}

.modern-grid .mg-nav-links a {
  color: var(--mg-blue);
  padding: 10px 18px;
  font-size: 0.82rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.modern-grid .mg-nav-links a.active,
.modern-grid .mg-nav-links a:hover {
  background: var(--mg-blue);
  color: #ffffff;
}

.modern-grid .mg-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.modern-grid .mg-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  box-shadow: none;
  font-size: 1.2rem;
}

.modern-grid .mg-icon .cart-item-count {
  position: absolute;
  top: -10px;
  right: -12px;
  background: var(--mg-blue);
  color: #ffffff;
  border-radius: 999px;
  font-size: 10px;
  padding: 1px 6px;
  border: 2px solid #ffffff;
}

.modern-grid .mg-lang,
.modern-grid .mg-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #ffffff;
  padding: 0;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  width: 36px;
  height: 36px;
  justify-content: center;
  border: 2px solid #ffffff;
  flex-direction: column;
  line-height: 1;
}

.modern-grid .mg-login {
  color: #ffffff;
}

.modern-grid .mg-login span {
  display: none;
}

.modern-grid .mg-lang i {
  display: inline-flex;
}

.modern-grid .mg-lang span,
.modern-grid .mg-lang .fa-chevron-down {
  display: none;
}

.modern-grid .mg-lang::after {
  content: "LAN";
  font-size: 0.6rem;
  letter-spacing: 0.6px;
}

.modern-grid .mg-lang-menu {
  position: absolute;
  top: 110%;
  right: 0;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: var(--mg-shadow);
  padding: 8px;
  display: none;
  min-width: 160px;
  z-index: 10;
}

.modern-grid .mg-lang:hover .mg-lang-menu {
  display: grid;
  gap: 6px;
}

.modern-grid .mg-lang-menu a {
  color: var(--mg-blue);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.modern-grid .mg-lang-menu a:hover {
  background: var(--mg-soft);
}

/* Hero */
.modern-grid .mg-hero {
  min-height: 736px;
  height: 736px;
  margin-top: 0;
  background-image: var(--mg-hero-image);
  background-size: cover;
  background-position: center;
  border-radius: 0;
  display: flex;
  align-items: center;
  text-align: center;
  color: #ffffff;
  padding-top: 120px;
  padding-bottom: 120px;
}

.modern-grid .mg-hero .mg-container {
  display: flex;
  justify-content: center;
}

.modern-grid .mg-hero-content {
  max-width: 720px;
  padding: 0;
  text-align: center;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
}

.modern-grid .mg-hero-content h1 {
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: 12px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

.modern-grid .mg-hero-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #f1f5f9;
  margin-bottom: 24px;
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.modern-grid .mg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  height: 40px;
  line-height: 40px;
  border-radius: 999px;
  background: var(--mg-blue);
  color: #ffffff;
  font-weight: 600;
  min-width: 190px;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 10px 18px rgba(47, 90, 118, 0.35);
}

.modern-grid .mg-btn:hover {
  background: var(--mg-blue-dark);
}

/* About */
.modern-grid .mg-about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
  padding: 70px 0 60px;
}

.modern-grid .mg-about-oval {
  background: var(--mg-blue);
  color: #ffffff;
  padding: 44px 56px 46px;
  border-radius: 40px 260px 260px 40px;
  box-shadow: 0 18px 30px rgba(27, 43, 53, 0.2);
}

.modern-grid .mg-eyebrow {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #e5edf4;
  margin-bottom: 12px;
  display: inline-block;
}

.modern-grid .mg-about-oval .mg-eyebrow {
  color: #e5edf4 !important;
  font-family: "Poppins", sans-serif;
}

.modern-grid .mg-about-oval h2 {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 14px;
  color: #ffffff !important;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

.modern-grid .mg-about-oval p {
  font-size: 14px;
  line-height: 1.7;
  color: #eaf1f6 !important;
  font-family: "Poppins", sans-serif;
  margin-bottom: 20px;
}

.modern-grid .mg-about-oval .mg-btn {
  background: #ffffff;
  color: var(--mg-blue);
  box-shadow: 0 10px 16px rgba(15, 23, 42, 0.18);
  width: 390px !important;
  height: 49px;
  line-height: 49px;
  padding: 0 28px;
  font-size: 16px;
  justify-content: flex-start;
  gap: 16px;
  max-width: 100%;
}

.modern-grid .mg-about-media {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-grid .mg-about-photo {
  position: absolute;
  border-radius: 50%;
  border: 5px solid var(--mg-blue);
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.22);
  object-fit: cover;
}

.modern-grid .mg-about-photo.photo-1 {
  width: 260px;
  height: 260px;
  left: 4%;
  z-index: 3;
}

.modern-grid .mg-about-photo.photo-2 {
  width: 230px;
  height: 230px;
  right: 8%;
  opacity: 0.45;
  z-index: 2;
  border-color: #d5dbe1;
}

.modern-grid .mg-about-photo.photo-3 {
  width: 210px;
  height: 210px;
  right: -2%;
  opacity: 0.35;
  z-index: 1;
  border-color: #cfd6dc;
}

/* Menu */
.modern-grid .mg-menu {
  background: #ffffff;
  padding: 70px 0 40px;
  font-family: "Poppins", sans-serif;
}

.modern-grid .mg-menu-head {
  text-align: center;
  margin-bottom: 30px;
}

.modern-grid .mg-menu-head .mg-eyebrow {
  color: var(--mg-blue);
  font-size: 12px;
}

.modern-grid .mg-menu-head h2 {
  color: var(--mg-blue);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
}

.modern-grid .mg-menu-row {
  overflow: visible;
  background: var(--mg-soft);
  margin: 26px calc(50% - 50vw) 0;
  padding: 32px calc(50vw - 50%) 40px;
  overflow-x: hidden;
  overflow-y: visible;
}

.modern-grid .mg-menu-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 318px;
  gap: 32px;
  overflow-x: auto;
  padding: 10px 10px 40px;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  will-change: transform;
}

.modern-grid .mg-menu-track.is-auto-scroll {
  display: flex;
  width: max-content;
  scroll-snap-type: none;
  animation: mg-menu-marquee 40s linear infinite;
}

.modern-grid .mg-menu-track.is-auto-scroll:hover {
  animation-play-state: paused;
}

.modern-grid .mg-menu-track.is-auto-scroll .mg-card {
  flex: 0 0 318px;
}

@keyframes mg-menu-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.modern-grid .mg-menu-track::-webkit-scrollbar {
  height: 0;
}

.modern-grid .mg-menu-track.is-static {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  overflow: visible;
}

.modern-grid .mg-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1.5px solid var(--mg-border);
  box-shadow: 0 14px 24px rgba(var(--mg-primary-rgb), 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  height: 420px;
  font-family: "Poppins", sans-serif;
}

.modern-grid .mg-card-image {
  position: relative;
}

.modern-grid .mg-card-image img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.modern-grid .mg-card-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ffffff;
  color: var(--mg-blue);
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(27, 43, 53, 0.16);
  border: 1px solid var(--mg-soft-border);
}

.modern-grid .mg-card-body {
  padding: 18px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.modern-grid .mg-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modern-grid .mg-card-title h3 {
  font-size: 18px;
  color: var(--mg-blue);
  font-family: "Poppins", sans-serif;
}

.modern-grid .mg-price {
  font-weight: 700;
  color: var(--mg-blue);
  font-size: 18px;
  font-family: "Poppins", sans-serif;
}

.modern-grid .mg-card-body p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mg-muted);
  flex: 1;
  font-family: "Poppins", sans-serif;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.modern-grid .mg-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--mg-blue);
  color: #ffffff;
  border-radius: 12px;
  height: 44px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 15px;
  width: 85%;
  margin: 8px auto 0;
  margin-top: auto;
  font-family: "Poppins", sans-serif;
}

.modern-grid .mg-add-btn::before {
  content: "+";
  font-size: 1rem;
  font-weight: 700;
}

.modern-grid .mg-add-btn.disabled {
  background: var(--mg-disabled-bg);
  cursor: not-allowed;
}

.modern-grid .mg-menu-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.modern-grid .mg-load-more {
  border: none;
  background: var(--mg-blue);
  color: #ffffff;
  padding: 0 64px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  font-size: 20px;
  min-width: 366px;
  min-height: 98px;
  line-height: 98px;
  box-shadow: 0 10px 18px rgba(var(--mg-primary-rgb), 0.3);
}

/* CTA */
.modern-grid .mg-cta {
  padding: 34px 0 60px;
  text-align: center;
}

.modern-grid .mg-cta-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--mg-blue);
  font-weight: 600;
}

.modern-grid .mg-cta h2 {
  color: var(--mg-blue);
  margin: 10px 0 22px;
  font-size: 28px;
  line-height: 1.4;
}

.modern-grid .mg-cta-pill {
  margin: 0 auto;
  width: min(1000px, 94%);
  background: var(--mg-blue);
  border-radius: 999px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  box-shadow: var(--mg-shadow);
  flex-wrap: wrap;
  min-height: 140px;
}

.modern-grid .mg-cta-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  border: 6px solid #ffffff;
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.2);
}

.modern-grid .mg-cta-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery */
.modern-grid .mg-gallery {
  padding: 46px 0 12px;
}

.modern-grid .mg-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.modern-grid .mg-gallery-item {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.modern-grid .mg-gallery-item img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.modern-grid .mg-gallery-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 860px) {
  .modern-grid .mg-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modern-grid .mg-gallery-item img {
    height: 170px;
  }
}

@media (max-width: 520px) {
  .modern-grid .mg-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer */
.modern-grid .mg-footer {
  background: var(--mg-blue-dark);
  color: #ffffff;
  padding: 60px 0 20px;
  margin-top: 10px;
}

.modern-grid .mg-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.modern-grid .mg-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: var(--mg-blue-dark);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 16px;
}

.modern-grid .mg-footer-brand img {
  height: 32px;
  width: auto;
}

.modern-grid .mg-footer-grid p,
.modern-grid .mg-footer-grid span {
  color: var(--mg-footer-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  display: block;
  margin-bottom: 8px;
}

.modern-grid .mg-footer-grid h5 {
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.modern-grid .mg-footer-grid a {
  color: var(--mg-footer-link);
  display: block;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.modern-grid .mg-footer-meta {
  text-align: center;
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--mg-footer-muted);
}

/* Responsive */
@media (max-width: 992px) {
  .modern-grid .mg-nav-shell {
    flex-wrap: wrap;
    justify-content: center;
    min-height: auto;
  }

  .modern-grid .mg-actions {
    justify-content: center;
    width: 100%;
  }

  .modern-grid .mg-brand,
  .modern-grid .mg-nav-links {
    height: auto;
    padding: 10px 16px;
  }

  .modern-grid .mg-nav-links a {
    padding: 8px 14px;
  }

  .modern-grid .mg-hero {
    min-height: 520px;
    height: auto;
    padding-top: 110px;
    padding-bottom: 110px;
  }

  .modern-grid .mg-hero-content {
    padding: 0;
  }

  .modern-grid .mg-about {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .modern-grid .mg-about-media {
    min-height: 240px;
  }

  .modern-grid .mg-about-oval {
    min-height: auto;
  }

  .modern-grid .mg-about-oval .mg-btn {
    width: auto !important;
    justify-content: center;
  }

  .modern-grid .mg-card {
    height: auto;
  }

  .modern-grid .mg-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .modern-grid .mg-header {
    padding: 14px 0 4px;
  }

  .modern-grid .mg-nav-links {
    padding: 8px;
  }

  .modern-grid .mg-hero {
    margin-top: 12px;
    border-radius: 16px;
    min-height: 420px;
    height: auto;
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .modern-grid .mg-hero-content h1 {
    font-size: 1.9rem;
  }

  .modern-grid .mg-btn {
    min-width: 160px;
    padding: 10px 20px;
    height: auto;
    line-height: normal;
  }

  .modern-grid .mg-about-oval {
    border-radius: 32px;
  }

  .modern-grid .mg-about-oval .mg-btn {
    width: 100% !important;
  }

  .modern-grid .mg-about-photo.photo-1,
  .modern-grid .mg-about-photo.photo-2,
  .modern-grid .mg-about-photo.photo-3 {
    position: relative;
    width: 160px;
    height: 160px;
    left: auto;
    right: auto;
  }

  .modern-grid .mg-about-media {
    gap: 12px;
    flex-wrap: wrap;
  }

  .modern-grid .mg-menu-track {
    grid-auto-columns: minmax(260px, 1fr);
  }

  .modern-grid .mg-footer-grid {
    grid-template-columns: 1fr;
  }

  .modern-grid .mg-cta-pill {
    padding: 16px;
  }

  .modern-grid .mg-cta h2 {
    font-size: 1.4rem;
  }

  .modern-grid .mg-cta-icon {
    width: 70px;
    height: 70px;
  }

  .modern-grid .mg-load-more {
    min-width: 260px;
    min-height: 70px;
    font-size: 1.05rem;
    padding: 14px 32px;
    line-height: normal;
  }
}

/* ---- Mobile navigation: hamburger drawer ---- */
.modern-grid .mg-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  font-size: 1.15rem;
  cursor: pointer;
}

@media (max-width: 992px) {
  .modern-grid .mg-header {
    padding: 12px 0;
  }

  /* One clean row (brand left, actions + hamburger right) instead of a wrapped, bunched-up pill. */
  .modern-grid .mg-nav-shell {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    height: 68px;
    min-height: 68px;
    padding: 6px 12px;
  }

  .modern-grid .mg-brand {
    order: 0;
    margin-right: auto;
    height: 52px;
    padding: 0 14px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .modern-grid .mg-brand img {
    height: 40px;
  }

  .modern-grid .mg-logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .modern-grid .mg-actions {
    order: 2;
    width: auto;
    flex: 0 0 auto;
    gap: 10px;
  }

  .modern-grid .mg-menu-toggle {
    display: inline-flex;
    order: 3;
  }

  /* Nav links collapse into a dropdown anchored under the header pill. */
  .modern-grid .mg-nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    height: auto;
    gap: 4px;
    padding: 10px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: var(--mg-shadow);
    z-index: 40;
  }

  .modern-grid .mg-nav-links.is-open {
    display: flex;
  }

  .modern-grid .mg-nav-links a {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .modern-grid .mg-nav-shell {
    gap: 8px;
    padding: 6px 10px;
  }

  .modern-grid .mg-actions {
    gap: 8px;
  }

  /* On the narrowest phones the language pill is the least essential top-bar control. */
  .modern-grid .mg-lang {
    display: none;
  }
}

/* ---- Inner-page shell: about / contact / reservation share the themed header + footer ---- */
.modern-grid.modern-grid--shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.modern-grid .mg-shell-hero {
  background: var(--mg-blue);
  color: #ffffff;
  /* top padding clears the absolutely-positioned header */
  padding: 150px 0 56px;
  text-align: center;
}

.modern-grid .mg-shell-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.modern-grid .mg-shell-body {
  flex: 1 0 auto;
  padding: 48px 0 64px;
  color: var(--mg-text);
}

@media (max-width: 992px) {
  .modern-grid .mg-shell-hero {
    padding: 108px 0 40px;
  }
}

@media (max-width: 768px) {
  .modern-grid .mg-shell-hero {
    padding: 96px 0 32px;
  }

  .modern-grid .mg-shell-hero h1 {
    font-size: 1.5rem;
  }

  .modern-grid .mg-shell-body {
    padding: 32px 0 48px;
  }
}

/* Order Online (menu) renders inside the shell body. Its search bar + category pills use
   juice-theme classes whose CSS isn't loaded here, so restyle them in the modern_grid theme. */
.modern-grid .mg-shell-body {
  overflow-x: hidden;
}

.modern-grid .mg-shell-body .juice-search-wrap {
  padding: 4px 0 16px;
  background: transparent;
}

.modern-grid .mg-shell-body .juice-search-inner {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.modern-grid .mg-shell-body .juice-search-input {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--mg-soft-border);
  padding: 14px 46px 14px 20px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--mg-text);
}

.modern-grid .mg-shell-body .juice-search-input:focus {
  outline: none;
  border-color: var(--mg-blue);
  box-shadow: 0 0 0 3px rgba(var(--mg-primary-rgb), 0.15);
}

.modern-grid .mg-shell-body .juice-search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mg-blue);
}

.modern-grid .mg-shell-body .ct-menu-categories {
  max-width: 100%;
}

.modern-grid .mg-shell-body .juice-categories-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 12px 0 4px;
  max-width: 100%;
}

.modern-grid .mg-shell-body .ct-menu-category-pill {
  white-space: nowrap;
  padding: 9px 22px;
  border: 1px solid var(--mg-blue);
  border-radius: 999px;
  background: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--mg-blue);
  transition: all 0.25s ease;
  text-decoration: none;
}

.modern-grid .mg-shell-body .ct-menu-category-pill.active,
.modern-grid .mg-shell-body .ct-menu-category-pill:hover {
  background: var(--mg-blue);
  color: #ffffff;
}

/* ----------------------------------------------------------------------
   Shell pages that suppress the title band (login / register /
   forgot-password render their own hero panel) still need the top
   clearance that .mg-shell-hero was providing for the absolutely
   positioned header - without it the auth card slides up underneath the
   nav. Values mirror the .mg-shell-hero top padding at each breakpoint.
   ---------------------------------------------------------------------- */
.modern-grid .mg-shell-body--no-hero {
  padding-top: 150px;
}

@media (max-width: 992px) {
  .modern-grid .mg-shell-body--no-hero {
    padding-top: 108px;
  }
}

@media (max-width: 768px) {
  .modern-grid .mg-shell-body--no-hero {
    padding-top: 96px;
  }
}

/* ----------------------------------------------------------------------
   Auth card inside the themed shell.

   The universal reset at the top of this file zeroes margin and padding on
   every descendant of .modern-grid. That is correct for the theme's own
   markup, but login / register / forgot-password now render inside
   .mg-shell-body and those views bring their own spacing from
   assets/website/css/style.css and frequent_changing/frontend/style.css.
   Both of those are single-class selectors - the same specificity as the
   reset - and both load BEFORE this file, so the reset silently flattened
   the entire auth card: heading welded to the first field, "OR" divider
   with no air, social buttons collapsed to bare text with no padding.

   The values below are the ones the same markup computes on an un-shelled
   tenant, so the card renders identically inside and outside the theme.
   Scoped to the auth card so the rest of the theme's reset is untouched.
   ---------------------------------------------------------------------- */
.modern-grid .auth-head {
  margin-bottom: 18px;
}

.modern-grid .auth-head .subtitle {
  margin-bottom: 15px;
}

.modern-grid .auth-seperator {
  margin: 24px 0 16px;
}

.modern-grid .social-login {
  margin-bottom: 20px;
}

.modern-grid .social-login .ct-social-login {
  padding: 12px 9px;
  margin-bottom: 10px;
}

.modern-grid .register_text {
  margin-bottom: 15px;
}