/* ===== Index Page Header (unique design - NOT our-community header) ===== */
.header-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  box-sizing: border-box;
  height: 581px;
  min-height: 581px;
  padding: 24px max(92px, calc((100vw - 1440px) / 2)) 60px;
  background-color: #181818;
  background-image: radial-gradient(ellipse at 70% 50%, rgba(255, 110, 0, 0.15) 0%, transparent 50%);
  border-radius: 0 0 4px 4px;
  position: relative;
  overflow: hidden;
}

.header-index .header-nav,
.header-index .index-hero {
  width: 100%;
  max-width: 1440px;
}

.header-index .header-index-logo-frame {
  position: absolute;
  top: 0;
  right: 0;
  width: min(732px, 55vw);
  height: 100%;
  min-height: 581px;
  object-fit: cover;
  object-position: right top;
  z-index: 0;
  pointer-events: none;
}

.header-index .header-nav,
.header-index .index-hero,
.header-for-community .header-nav,
.header-for-community .frame-3 {
  position: relative;
  z-index: 1;
}

.header-index .header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
}

.header-index .logo {
  width: 215px;
  height: 86px;
  object-fit: contain;
  display: block;
}

.header-index .nav-links {
  display: flex;
  align-items: center;
  gap: 48px;
}

.header-index .nav-links .nav-link {
  font-family: "Urbanist", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.96px;
}

.header-index .nav-links .nav-link.nav-current {
  text-decoration: underline;
  font-weight: 600;
}

.header-index .download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(255, 176, 116, 1) 0%, rgba(251, 86, 0, 1) 49%, rgba(153, 20, 0, 1) 100%);
  border-radius: 4px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  font-family: "Urbanist", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
}

.header-index .download-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.header-index .index-hero {
  display: flex;
  flex: 1;
  align-items: center;
}

.header-index .index-hero-content {
  max-width: 700px;
}

.header-index .index-hero-lead {
  font-family: "Urbanist", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 28px;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.4;
}

.header-index .index-hero-title {
  font-family: "Tilt Warp", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 64px;
  max-width: 520px;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--variable-collection-primary-joyous);
}

.header-index .index-hero-title-white {
  color: #ffffff;
}

.header-index .index-hero-sub {
  font-family: "Urbanist", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 28px;
  line-height: 1.5;
}

.header-index .index-app-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  margin-left: -12px;
}

/* App store buttons - both 60px height for top alignment */
.header-index .app-store-badge {
  display: inline-block;
  line-height: 0;
  width: 122px !important;
  height: 60px !important;
  max-width: 122px;
  max-height: 60px;
  overflow: hidden;
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Google Play: 155×60 - slightly bigger */
.header-index .app-store-badge:first-child {
  width: 155px !important;
  max-width: 155px;
}

.header-index .app-store-badge:first-child img {
  max-width: 155px !important;
  max-height: 60px !important;
}

.header-index .app-store-badge:hover,
.header-index .app-store-badge:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px);
}

.header-index .app-store-badge img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 122px !important;
  max-height: 60px !important;
  object-fit: contain;
}

/* Index: hide duplicate nav (frame-11) - nav is in header-index */
body.page-index .joyous-site .frame-11 {
  display: none;
}

/* Index: height to fit content + button (below text) + footer */
body.page-index .joyous-site {
  height: 3080px;
}

/* Index: remove gap between header and joyous-is-LOCAL (shift content up 581px) */
body.page-index .joyous-site .joyous-is-LOCAL { top: 50px; }
body.page-index .joyous-site .home-group-eating { top: 65px; }
body.page-index .joyous-site .when-you-order { top: 134px; }
body.page-index .joyous-site .joyous-makes-it-easy { top: 553px; }
body.page-index .joyous-site .neverending { top: 974px; }
body.page-index .joyous-site .you-start-saving-on { top: 1058px; }
body.page-index .joyous-site .iphone-pro-mockup { top: 786px; }
body.page-index .joyous-site .frame-3.support-cta-section,
body.page-index .joyous-site .frame-6,
body.page-index .joyous-site .frame-7 {
  background-color: #181818;
  background-image: radial-gradient(ellipse at 70% 50%, rgba(255, 110, 0, 0.15) 0%, transparent 50%);
}
body.page-index .joyous-site .frame-3.support-cta-section { top: 579px; }
body.page-index .joyous-site .frame-6 { top: 1369px; }
body.page-index .joyous-site .frame-7 { top: 1763px; padding-bottom: 32px; }
body.page-index .joyous-site .that-s-why-we-only { top: 2160px; }
body.page-index .joyous-site .we-started-joyous { top: 2160px; }
body.page-index .joyous-site .only-local { top: 2026px; }
body.page-index .joyous-site .helping-restaurants { top: 2026px; }
body.page-index .joyous-site .frame-8 { top: 2600px; }
body.page-index .joyous-site .frame-9,
.footer-joyous-site .frame-9 {
  height: 351px;
  padding: 32px max(92px, calc((100vw - 1440px) / 2)) 64px;
}
/* Our-community footer: use joyous-site for same styles as index, but in-flow layout */
.joyous-site.footer-joyous-site {
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
}
.joyous-site.footer-joyous-site::after {
  display: none !important;
}
.joyous-site.footer-joyous-site .frame-9 {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}
.joyous-site.footer-joyous-site .frame-9 { border-radius: 4px 4px 0 0; }

/* Index: 4px border-radius to match our-community */
body.page-index .header-nav.header-nav-stuck { border-radius: 0 0 4px 4px !important; }
body.page-index .header-nav .for-restaurants-btn { border-radius: 4px !important; }
body.page-index .header-nav .download-btn { border-radius: 4px !important; }
body.page-index .joyous-site .frame-5,
body.page-index .joyous-site .frame-8,
body.page-index .joyous-site .frame-13 { border-radius: 4px !important; }
body.page-index .joyous-site .rectangle { border-radius: 4px; }
body.page-index .joyous-site .home-group-eating { border-radius: 4px; }
body.page-index .joyous-site .iphone-pro-mockup { border-radius: 4px; }
body.page-index .joyous-site .frame-3.support-cta-section { border-radius: 4px; }
body.page-index .joyous-site .div-wrapper { border-radius: 4px; }
body.page-index .joyous-site .div-wrapper::before { border-radius: 4px; }
body.page-index .joyous-site .frame-6 { border-radius: 4px; }
body.page-index .joyous-site .frame-7 { border-radius: 4px; }
.joyous-site .frame-7 .aloha-restaurants a {
  color: #ff6e00;
  text-decoration: none;
}
.joyous-site .frame-7 .aloha-restaurants a:hover,
.joyous-site .frame-7 .aloha-restaurants a:focus-visible {
  text-decoration: underline;
}
body.page-index .joyous-site .frame-9 { border-radius: 4px 4px 0 0; }
body.page-index .joyous-site .frame { border-radius: 0 0 4px 4px; }
body.page-index .joyous-site::after {
  top: 577px;
  width: 4px;
  height: 4px;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 3px, #000 4px);
  mask: radial-gradient(circle at 0 0, transparent 3px, #000 4px);
}

/* Sticky nav clone - fixed at top when scrolled */
.header-nav.header-nav-stuck {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  z-index: 9999 !important;
  padding: 24px max(92px, calc((100vw - 1440px) / 2)) !important;
  background-color: #181818 !important;
  background-image: radial-gradient(ellipse at 70% 50%, rgba(255, 110, 0, 0.15) 0%, transparent 50%) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}
.header-nav.header-nav-stuck.nav-visible {
  transition: visibility 0.2s ease, opacity 0.2s ease;
  pointer-events: auto !important;
}

/* ===== Shared nav bar - identical across index, our-community, for-restaurants ===== */
/* All three pages now use the same header-nav HTML structure */
.header-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 42px !important;
}

/* Spacing below nav - 48px between nav and hero content */
.header-index .header-nav {
  margin-bottom: 48px !important;
}
/* header-for-community uses gap: 48px - omit margin to avoid double spacing */
.header-for-community .header-nav {
  margin-bottom: 0 !important;
}

/* Our Community: navbar identical to index - same layout and spacing */
.header-for-community .header-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 42px !important;
  padding: 0 !important;
}
.header-for-restaurants .header-nav {
  margin-bottom: 0 !important;
}

.header-nav .logo {
  width: 215px !important;
  height: 86px !important;
  object-fit: contain !important;
  display: block !important;
}

.header-nav .nav-menu {
  display: flex !important;
  align-items: center !important;
  gap: 42px !important;
}

.header-nav .nav-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Hamburger - hidden on desktop */
.header-nav .nav-hamburger {
  display: none !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 56px;
  height: 56px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation; /* removes 300ms tap delay on mobile */
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.header-nav .nav-hamburger:hover,
.header-nav .nav-hamburger:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  outline: none;
}
.header-nav .nav-hamburger-bar {
  display: block;
  width: 28px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* Invisible spacer on for-restaurants to match 2-button width - prevents nav shift */
.header-nav .nav-buttons-spacer {
  visibility: hidden !important;
  pointer-events: none !important;
  white-space: nowrap;
  font: 700 18px "Urbanist", Helvetica, sans-serif;
  padding: 16px 28px;
  box-sizing: border-box;
  border: 2px solid transparent;
}

.header-nav .for-restaurants-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 28px !important;
  background-color: #181818 !important;
  border: 2px solid rgba(255, 176, 116, 1) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: "Urbanist", Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.header-nav .for-restaurants-btn:hover,
.header-nav .for-restaurants-btn:focus-visible {
  background-color: #252525 !important;
  border-color: rgba(255, 110, 0, 0.6) !important;
  transform: translateY(-1px);
}

.header-nav .nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 48px !important;
  min-width: 400px !important; /* Match 3-link width - prevents nav shift between pages */
}

.header-nav .nav-link {
  font-family: "Urbanist", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  letter-spacing: 0.96px !important;
}

.header-nav .nav-link.nav-current {
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.header-nav .nav-link:hover {
  color: var(--variable-collection-primary-joyous) !important;
}

.header-nav .download-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 28px !important;
  background: linear-gradient(180deg, rgba(255, 176, 116, 1) 0%, rgba(251, 86, 0, 1) 49%, rgba(153, 20, 0, 1) 100%) !important;
  border-radius: 8px !important;
  box-shadow: var(--joyous-shadow) !important;
  color: #ffffff !important;
  font-family: "Urbanist", Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  transition:
    background-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}

.header-nav .download-btn:hover,
.header-nav .download-btn:focus-visible {
  background: #ffffff !important;
  box-shadow: var(--joyous-shadow), inset 0 0 0 2px var(--variable-collection-primary-joyous) !important;
  transform: translateY(-1px);
}

.header-nav .download-btn:hover span,
.header-nav .download-btn:focus-visible span {
  color: var(--variable-collection-primary-joyous) !important;
}

.header-nav .download-btn:hover .download-icon,
.header-nav .download-btn:focus-visible .download-icon {
  filter: brightness(0) saturate(100%) invert(48%) sepia(84%) saturate(1896%) hue-rotate(3deg) brightness(106%) contrast(105%) !important;
}

.header-nav .download-icon {
  width: 24px !important;
  height: 24px !important;
  filter: brightness(0) invert(1) !important;
}

.header-nav .download-btn span {
  color: #ffffff !important;
}

/* ===== Shared header design (match index.php) for our-community & for-restaurants ===== */
/* Header height: 581px to match index */
body.page-our-community .header-for-community {
  height: 581px !important;
  min-height: 581px !important;
}

/* Constrain hero section so header stays 500px */
body.page-our-community .header-for-community .frame-3 {
  min-height: 0 !important;
  flex: 1 !important;
}

body.page-for-restaurants .header-for-restaurants {
  height: 500px !important;
  min-height: 500px !important;
}

/* Header as direct body child - matches header-index structure for consistent nav */
.header-for-community {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  box-sizing: border-box;
  background-color: #181818 !important;
  background-image: radial-gradient(ellipse at 70% 50%, rgba(255, 110, 0, 0.15) 0%, transparent 50%) !important;
  border-radius: 0 0 4px 4px !important;
  overflow: hidden !important;
  padding: 24px max(92px, calc((100vw - 1440px) / 2)) 60px !important;
  height: 581px !important;
  min-height: 581px !important;
  gap: 48px !important;
  position: relative !important;
}

.header-for-community .header-nav,
.header-for-community .frame-3 {
  width: 100%;
  max-width: 1440px;
}

/* Header hero: text left, food-cart image right (desktop) */
.header-for-community .frame-3 {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
}

.header-for-community .frame-4 {
  max-width: 700px;
  gap: 12px;
  align-items: flex-start !important;
  text-align: left !important;
}

.header-for-community .frame-4 .p,
.header-for-community .frame-4 .text-wrapper-5,
.header-for-community .frame-4 .text-wrapper-6 {
  text-align: left !important;
}

.header-for-community .frame-4 .p {
  font-family: "Urbanist", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
  white-space: normal !important;
}

.header-for-community .frame-4 .text-wrapper-5 {
  font-family: "Tilt Warp", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 64px !important;
  line-height: 1.1 !important;
  margin: 0 0 16px 0 !important;
  width: fit-content !important;
  height: auto !important;
  white-space: normal !important;
  filter: none !important;
  color: var(--variable-collection-primary-joyous) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}
.header-for-community .frame-4 .text-wrapper-5-white {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.header-for-community .frame-4 .text-wrapper-6 {
  font-family: "Urbanist", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  max-width: 450px !important;
  width: 100% !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

/* Header as direct body child - matches header-index structure for consistent nav */
.header-for-restaurants {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 48px !important;
  width: 100vw;
  box-sizing: border-box;
  background-color: #181818 !important;
  background-image: radial-gradient(ellipse at 70% 50%, rgba(255, 110, 0, 0.15) 0%, transparent 50%) !important;
  border-radius: 0 0 8px 8px !important;
  overflow: hidden !important;
  padding: 24px max(92px, calc((100vw - 1440px) / 2)) 60px !important;
  position: relative;
}

.header-for-restaurants .header-nav {
  width: 100% !important;
  max-width: 1440px !important;
  margin-bottom: 0 !important;
}

.header-for-restaurants .for-restaurants-hero {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  max-width: 700px;
}

/* For-restaurants header hero text - match index.php formatting */
.header-for-restaurants .for-restaurants-hero .div {
  font-family: "Tilt Warp", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 64px !important;
  line-height: 1.1 !important;
  margin: 0 0 16px 0 !important;
  width: fit-content !important;
  height: auto !important;
  white-space: normal !important;
  background: linear-gradient(167deg, rgba(255, 176, 116, 1) 0%, rgba(251, 86, 0, 1) 49%, rgba(153, 20, 0, 1) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.header-for-restaurants .for-restaurants-hero .p {
  font-family: "Urbanist", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  margin: 0 0 12px 0 !important;
  width: fit-content !important;
}

.header-for-restaurants .for-restaurants-hero .new-customers-more {
  font-family: "Urbanist", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  margin: 0 !important;
  width: fit-content !important;
  height: auto !important;
}

.header-for-restaurants .for-restaurants-hero .text-wrapper-2 {
  filter: none !important;
}

/* Inner page layout (Our Community, For Restaurants) */
.joyous-inner-page {
  min-height: 100vh;
  height: auto;
  padding-bottom: 319px; /* footer height */
}

.joyous-inner-page .frame-11 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  padding: 24px 92px;
  background-color: #181818;
}

.joyous-inner-page .frame-9 {
  position: absolute;
  bottom: 0;
}

/* Nav links */
.frame-12 a:hover,
.frame-11 a:hover,
.frame-4 a:hover {
  color: var(--variable-collection-primary-joyous) !important;
}

/* Anchor buttons - preserve flex display */
a.frame-8,
a.frame-12,
a.frame-13,
a.frame-2,
a.frame-5 {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* ===== Shared orange gradient button style (Order & Save style) - site-wide ===== */
/* Base: gradient, shadow, padding, radius, font - matches nav Order & Save */
.joyous-site .frame-5,
.joyous-site .frame-8,
.joyous-site .frame-13,
.for-restaurants .frame-2,
.for-restaurants .frame-5,
.header-for-restaurants .for-restaurants-hero a.frame-2 {
  background: var(--joyous-gradient) !important;
  box-shadow: var(--joyous-shadow) !important;
  border-radius: 8px !important;
  padding: 16px 28px !important;
  border: 0 !important;
  cursor: pointer;
  font-size: 18px !important;
  font-family: "Urbanist", Helvetica, sans-serif !important;
  font-weight: 700 !important;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease, color 180ms ease;
}

/* Button text - 18px to match nav buttons, white on gradient buttons */
.joyous-site .frame-5 .text-wrapper-6,
.joyous-site .frame-8 .text-wrapper-6,
.joyous-site .frame-8 p,
.joyous-site .frame-13 .text-wrapper-13,
.for-restaurants .frame-2 .text-wrapper-2,
.for-restaurants .frame-5 .text-wrapper-6,
.header-for-restaurants .for-restaurants-hero a.frame-2 .text-wrapper-2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hover: white bg, orange border, lift - matches Order & Save hover */
.joyous-site .frame-5:hover,
.joyous-site .frame-8:hover,
.joyous-site .frame-13:hover,
.joyous-site .frame-5:focus-visible,
.joyous-site .frame-8:focus-visible,
.joyous-site .frame-13:focus-visible,
.for-restaurants .frame-2:hover,
.for-restaurants .frame-5:hover,
.for-restaurants .frame-2:focus-visible,
.for-restaurants .frame-5:focus-visible,
.header-for-restaurants .for-restaurants-hero a.frame-2:hover,
.header-for-restaurants .for-restaurants-hero a.frame-2:focus-visible {
  background: #ffffff !important;
  box-shadow: var(--joyous-shadow), inset 0 0 0 2px var(--variable-collection-primary-joyous) !important;
  transform: translateY(-1px);
}

/* Hover text color - orange */
.joyous-site .frame-5:hover .text-wrapper-6,
.joyous-site .frame-8:hover .text-wrapper-6,
.joyous-site .frame-13:hover .text-wrapper-13,
.joyous-site .frame-5:focus-visible .text-wrapper-6,
.joyous-site .frame-8:focus-visible .text-wrapper-6,
.joyous-site .frame-13:focus-visible .text-wrapper-13,
.for-restaurants .frame-2:hover .text-wrapper-2,
.for-restaurants .frame-5:hover .text-wrapper-6,
.for-restaurants .frame-2:focus-visible .text-wrapper-2,
.for-restaurants .frame-5:focus-visible .text-wrapper-6,
.header-for-restaurants .for-restaurants-hero a.frame-2:hover .text-wrapper-2,
.header-for-restaurants .for-restaurants-hero a.frame-2:focus-visible .text-wrapper-2 {
  color: var(--variable-collection-primary-joyous) !important;
  -webkit-text-fill-color: var(--variable-collection-primary-joyous) !important;
}

/* Hover icon tint - orange */
.joyous-site .frame-13:hover .vector,
.joyous-site .frame-13:focus-visible .vector,
.for-restaurants .frame-5:hover .vector,
.for-restaurants .frame-5:focus-visible .vector {
  filter: brightness(0) saturate(100%) invert(48%) sepia(84%) saturate(1896%) hue-rotate(3deg) brightness(106%) contrast(105%);
}

.text-wrapper-active {
  font-weight: 600 !important;
  text-decoration: underline;
}

/* Page hero */
.page-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 140px 92px 60px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.page-hero-content {
  flex: 1;
  min-width: 280px;
}

.page-title {
  font-family: "Tilt Warp", Helvetica;
  font-weight: 400;
  font-size: 50px;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 16px;
}

.page-subtitle {
  font-family: "Urbanist", Helvetica;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  color: #181818;
}

.page-hero-img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 1.36;
}

.page-hero-restaurants .page-hero-img {
  display: none;
}

/* Page content */
.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 92px 80px;
}

.page-section {
  margin-bottom: 56px;
}

.page-section:last-child {
  margin-bottom: 0;
}

.page-section-title {
  font-family: "Tilt Warp", Helvetica;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.page-section-text {
  font-family: "Urbanist", Helvetica;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: transparent;
  margin-bottom: 16px;
}

.page-section-text:last-child {
  margin-bottom: 0;
}

.page-list {
  font-family: "Urbanist", Helvetica;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.8;
  color: #000000;
  list-style: none;
  padding-left: 0;
}

.page-list li {
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}

.page-list li::before {
  content: "•";
  color: var(--variable-collection-primary-joyous);
  font-weight: 700;
  position: absolute;
  left: 0;
}

.page-cta-section {
  text-align: center;
  padding: 48px 24px;
  background-color: #181818;
  border-radius: 8px;
  box-shadow: var(--joyous-shadow);
}

.page-cta-section .support-local {
  font-size: 36px;
  margin-bottom: 16px;
}

/* SMS link success state - bigger message + large green tick */
.joyous-site .frame-3.support-cta-section .sms-link-success.text-wrapper-7,
.joyous-site .frame-6 .sms-link-success.text-wrapper-7 {
  font-size: clamp(24px, 5vw, 36px) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
}
.joyous-site .frame-3.support-cta-section .sms-link-success-tick,
.joyous-site .frame-6 .sms-link-success-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.joyous-site .frame-3.support-cta-section .sms-link-success-tick[hidden],
.joyous-site .frame-6 .sms-link-success-tick[hidden] {
  display: none !important;
}
.joyous-site .frame-3.support-cta-section .sms-link-success-tick svg,
.joyous-site .frame-6 .sms-link-success-tick svg {
  width: 100%;
  height: 100%;
}

.page-cta-section .page-section-text {
  color: #ffffff;
  margin-bottom: 24px;
}

.page-cta-section .page-section-text .text-wrapper-3 {
  color: #ffffff;
}

.page-cta-section .frame-8,
.page-cta-section .frame-13 {
  display: inline-flex;
}

/* Our Community - logo matches index nav (logo for nav.svg) */
body.page-our-community .header-for-community .LOGO-SVG-for-cliff {
  width: 215px !important;
  height: 86px !important;
  object-fit: contain !important;
}

/* Footer logo - same size (215×86) across all pages, all screen sizes */
.joyous-site .frame-9 .LOGO-SVG-for-cliff,
.joyous-site .frame-11 .LOGO-SVG-for-cliff,
.footer-joyous-site .frame-9 .LOGO-SVG-for-cliff,
.for-restaurants .frame-6 .LOGO-SVG-for-cliff {
  width: 215px !important;
  min-width: 215px !important;
  height: 86px !important;
  min-height: 86px !important;
  max-width: 215px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}
/* Ensure anchor wrapper doesn't constrain footer logo */
.joyous-site .frame-9 > a:first-child,
.footer-joyous-site .frame-9 > a:first-child,
.for-restaurants .frame-6 > a:first-child {
  flex-shrink: 0 !important;
  display: block !important;
}

/* Our Community - food cart visibility (opacity 0.2 mobile only - see media query) */
body.page-our-community .header-for-community .food-cart {
  display: block !important;
  visibility: visible !important;
}

/* Our Community - uniform card sizes */
body.page-our-community .community-restaurant-cards .frame-2,
body.page-our-community .community-restaurant-cards .frame-5-grid {
  display: grid !important;
  gap: 24px !important;
  align-items: stretch !important;
}
/* minmax(0,1fr) prevents grid blowout from large images forcing unequal column widths */
body.page-our-community .community-restaurant-cards .frame-5-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.page-our-community .community-restaurant-cards .frame-6 {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.page-our-community .community-restaurant-cards .frame-2 .frame-3,
body.page-our-community .community-restaurant-cards .frame-6 .frame-3 {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
body.page-our-community .community-restaurant-cards .card-img-wrap {
  overflow: hidden !important;
  border-radius: 4px 4px 0 0 !important;
  flex-shrink: 0 !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
}
/* All card images (.rectangle, .img) - same size via filling card-img-wrap container */
/* Override .our-community img { height: auto } and .our-community img.rectangle { height: 247px } */
body.page-our-community .community-restaurant-cards .card-img-wrap img,
body.page-our-community .community-restaurant-cards .card-img-wrap img.rectangle,
body.page-our-community .community-restaurant-cards .card-img-wrap img.img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}
body.page-our-community .header-for-community .card-img-wrap-hero {
  flex-shrink: 0;
  overflow: hidden !important;
  border-radius: 4px !important;
}
body.page-our-community .card-img-wrap-hero img,
body.page-our-community .header-for-community .food-cart {
  display: block !important;
  width: 375px !important;
  height: 404px !important;
  min-width: 375px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}

/* Scroll to top button - fixed bottom right, above all content */
.scroll-to-top-btn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  top: auto !important;
  left: auto !important;
  z-index: 99999 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 4px;
  box-shadow: var(--joyous-shadow);
  background: var(--joyous-gradient);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.scroll-to-top-btn .vector-2 {
  width: 22px;
  height: 22px;
}

.scroll-to-top-btn.scroll-to-top-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.scroll-to-top-btn .text-wrapper-5 {
  filter: none !important;
  font-family: "Urbanist", Helvetica, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 18px !important;
  letter-spacing: 0;
  line-height: 1.2;
}

/* Same hover effect as other buttons (frame-5, frame-8, frame-13) */
.scroll-to-top-btn:hover,
.scroll-to-top-btn:focus-visible {
  background: #ffffff !important;
  box-shadow: var(--joyous-shadow), inset 0 0 0 2px var(--variable-collection-primary-joyous) !important;
  transform: translateY(-1px);
}

.scroll-to-top-btn:hover .text-wrapper-5,
.scroll-to-top-btn:focus-visible .text-wrapper-5 {
  color: var(--variable-collection-primary-joyous) !important;
}

.scroll-to-top-btn:hover .vector-2,
.scroll-to-top-btn:focus-visible .vector-2 {
  filter: brightness(0) saturate(100%) invert(48%) sepia(84%) saturate(1896%) hue-rotate(3deg) brightness(106%) contrast(105%);
}

/* Our Community - restaurant cards visibility overrides */
body.page-our-community .community-restaurant-cards {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  position: relative !important;
  padding: 60px 92px 80px !important;
  gap: 52px !important;
}

body.page-our-community .community-restaurant-cards .p,
body.page-our-community .community-restaurant-cards .our-forest-grove {
  color: #181818 !important;
  font-family: "Tilt Warp", Helvetica, sans-serif !important;
  font-weight: 400 !important;
}
body.page-our-community .community-restaurant-cards .our-forest-grove .span {
  color: #ff6e00 !important;
}

/* Aloha section: center title and card */
body.page-our-community .community-restaurant-cards .div:has(> .frame-2) .p {
  text-align: center !important;
}

body.page-our-community .community-restaurant-cards .p .text-wrapper,
body.page-our-community .community-restaurant-cards .our-forest-grove .text-wrapper {
  color: #181818 !important;
}

/* Our Community: eliminate empty gap - html, body and content size to actual content */
html.page-our-community {
  height: auto !important;
  min-height: 0 !important;
}
body.page-our-community {
  height: auto !important;
  min-height: 0 !important;
}
body.page-our-community .our-community,
html.page-our-community .our-community {
  min-height: 0 !important;
  height: auto !important;
}
body.page-our-community .our-community > .frame {
  flex-grow: 0 !important;
}

body.page-our-community .community-restaurant-cards .frame-2 .frame-3,
body.page-our-community .community-restaurant-cards .frame-6 .frame-3 {
  background-color: #ffffff !important;
  border-radius: 0 0 4px 4px !important;
}

/* Our Community: smaller curves (4px) on ALL containers - header, nav buttons, footer */
body.page-our-community .header-for-community {
  border-radius: 0 0 4px 4px !important;
}
body.page-our-community .header-nav .for-restaurants-btn {
  border-radius: 4px !important;
}
body.page-our-community .header-nav .download-btn {
  border-radius: 4px !important;
}
body.page-our-community .scroll-to-top-btn {
  border-radius: 4px !important;
}

/* ===== Desktop: ensure 4px curves apply (max-width media below overrides at smaller sizes) ===== */
@media (min-width: 1025px) {
  body.page-our-community .header-for-community {
    border-radius: 0 0 4px 4px !important;
  }
  body.page-our-community .community-restaurant-cards .card-img-wrap {
    border-radius: 4px 4px 0 0 !important;
  }
  /* Desktop: 3 restaurant cards across, equal sizing */
  body.page-our-community .community-restaurant-cards .frame-5-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  body.page-our-community .community-restaurant-cards .frame-5 {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* Aloha section: frame-2 same size as one frame-5 card, centered (3-column grid) */
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) .p {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    justify-self: center !important;
  }
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) .frame-2 {
    grid-column: 2 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }
  body.page-our-community .card-img-wrap-hero,
  body.page-our-community .card-img-wrap-hero img,
  body.page-our-community .header-for-community .food-cart {
    border-radius: 4px !important;
  }
  body.page-our-community .community-restaurant-cards .frame-2 .frame-3,
  body.page-our-community .community-restaurant-cards .frame-6 .frame-3 {
    border-radius: 0 0 4px 4px !important;
  }
  body.page-our-community .header-nav .for-restaurants-btn,
  body.page-our-community .header-nav .download-btn {
    border-radius: 4px !important;
  }
  body.page-our-community .scroll-to-top-btn {
    border-radius: 4px !important;
  }
}

/* ===== Hamburger menu: logo + hamburger only below 930px ===== */
@media (max-width: 930px) {
  .header-nav .nav-hamburger {
    display: flex !important;
  }
  /* Logo and X stay above overlay - ensure they're clickable */
  .header-nav .logo,
  .header-nav .nav-hamburger {
    position: relative;
    z-index: 101;
  }
  .header-nav .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 80px 24px 32px;
    background-color: #181818;
    background-image: radial-gradient(ellipse at 70% 20%, rgba(255, 110, 0, 0.15) 0%, transparent 50%);
    max-height: none;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 220ms ease;
    z-index: 100;
  }
  /* Ensure nav-menu content is above any overlapping elements when open */
  .header-nav.nav-menu-open .nav-menu .nav-links,
  .header-nav.nav-menu-open .nav-menu .nav-buttons {
    position: relative;
    z-index: 1;
  }
  .header-nav.nav-menu-open .nav-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* When menu open: top bar (logo+X) above portal so X is clickable */
  .header-nav.header-nav-stuck.nav-menu-open {
    z-index: 100002 !important;
    box-shadow: none !important; /* Remove shadow so nav and menu read as one surface */
  }
  /* Stuck nav menu portal: when moved to body, menu has no .header-nav parent so we reapply base overlay styles */
  .nav-menu-stuck-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    pointer-events: auto;
    touch-action: none;
  }
  .nav-menu-stuck-overlay .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 110px 24px 32px;
    background-color: #181818;
    background-image: radial-gradient(ellipse at 70% 50%, rgba(255, 110, 0, 0.15) 0%, transparent 50%); /* Match stuck nav gradient for seamless blend */
    max-height: none;
    overflow-y: auto;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-links,
  .nav-menu-stuck-overlay .nav-menu .nav-buttons {
    position: relative;
    z-index: 1;
    flex-direction: column !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-links {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .nav-menu-stuck-overlay .nav-menu .nav-links .nav-link {
    display: block;
    padding: 14px 0;
    font-size: 22px !important;
    font-family: "Urbanist", Helvetica, sans-serif !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    letter-spacing: 0.96px !important;
    text-align: center !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-links .nav-link.nav-current {
    text-decoration: underline !important;
    font-weight: 600 !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-links .nav-link:hover {
    color: var(--variable-collection-primary-joyous) !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    padding-top: 40px;
    margin-top: 16px;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .for-restaurants-btn,
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100%;
    min-height: 56px !important;
    padding: 16px 24px !important;
    text-align: center;
    font-family: "Urbanist", Helvetica, sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    transition: border-color 180ms ease, background-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .for-restaurants-btn {
    background-color: #181818 !important;
    border: 2px solid rgba(255, 176, 116, 1) !important;
    color: #ffffff !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .for-restaurants-btn:hover,
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .for-restaurants-btn:focus-visible {
    background-color: #252525 !important;
    border-color: rgba(255, 110, 0, 0.6) !important;
    transform: translateY(-1px);
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn {
    gap: 10px !important;
    background: linear-gradient(180deg, rgba(255, 176, 116, 1) 0%, rgba(251, 86, 0, 1) 49%, rgba(153, 20, 0, 1) 100%) !important;
    box-shadow: var(--joyous-shadow) !important;
    color: #ffffff !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn span {
    color: #ffffff !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn:hover,
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn:focus-visible {
    background: #ffffff !important;
    box-shadow: var(--joyous-shadow), inset 0 0 0 2px var(--variable-collection-primary-joyous) !important;
    transform: translateY(-1px);
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn:hover span,
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn:focus-visible span {
    color: var(--variable-collection-primary-joyous) !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn .download-icon {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) invert(1) !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn:hover .download-icon,
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn:focus-visible .download-icon {
    filter: brightness(0) saturate(100%) invert(48%) sepia(84%) saturate(1896%) hue-rotate(3deg) brightness(106%) contrast(105%) !important;
  }
  body.page-index .nav-menu-stuck-overlay .nav-menu .nav-buttons .for-restaurants-btn,
  body.page-index .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn,
  body.page-our-community .nav-menu-stuck-overlay .nav-menu .nav-buttons .for-restaurants-btn,
  body.page-our-community .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn {
    border-radius: 4px !important;
  }
  .header-nav .nav-menu .nav-links {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .header-nav .nav-menu .nav-links .nav-link {
    display: block;
    padding: 14px 0;
    font-size: 22px !important;
    text-align: center !important;
  }
  .header-nav .nav-menu .nav-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    padding-top: 40px;
    margin-top: 16px;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .header-nav .nav-menu .nav-buttons .for-restaurants-btn,
  .header-nav .nav-menu .nav-buttons .download-btn {
    width: 100% !important;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    padding: 16px 24px !important;
  }
  .header-nav .nav-menu .nav-buttons-spacer {
    display: none !important;
  }
  /* Hamburger to X when open - thicker bars need adjusted transform */
  .header-nav.nav-menu-open .nav-hamburger-bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }
  .header-nav.nav-menu-open .nav-hamburger-bar:nth-child(2) {
    opacity: 0;
  }
  .header-nav.nav-menu-open .nav-hamburger-bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }
  /* Hamburger overlay: always column layout - override header-nav-stuck row rules */
  .header-nav.nav-menu-open .nav-menu .nav-links,
  .header-nav.nav-menu-open .nav-menu .nav-buttons,
  .header-nav.header-nav-stuck.nav-menu-open .nav-menu .nav-links,
  .header-nav.header-nav-stuck.nav-menu-open .nav-menu .nav-buttons {
    flex-direction: column !important;
  }
  /* Regular nav needs position relative for overlay; stuck nav must stay fixed */
  .header-nav:not(.header-nav-stuck) {
    position: relative;
  }
  /* Ensure nav stays above hero on our-community (frame-3 can overlap) */
  .header-for-community .header-nav {
    z-index: 10;
  }
}

/* Below 600px: hamburger menu buttons full width */
@media (max-width: 600px) {
  .header-nav .nav-menu .nav-buttons {
    align-items: stretch !important;
  }
  .header-nav .nav-menu .nav-buttons .for-restaurants-btn,
  .header-nav .nav-menu .nav-buttons .download-btn {
    width: 100% !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .for-restaurants-btn,
  .nav-menu-stuck-overlay .nav-menu .nav-buttons .download-btn {
    width: 100% !important;
  }
}

/* Prevent scroll when hamburger menu is open - JS uses position:fixed on body to preserve scroll */
html.hamburger-menu-open,
html.hamburger-menu-open body {
  overflow: hidden !important;
  height: 100%;
}

/* Hide scroll-to-top when menu open - prevents z-index overlap */
html.hamburger-menu-open .scroll-to-top-btn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide hero content when hamburger menu is open */
html.hamburger-menu-open .index-hero,
html.hamburger-menu-open .header-for-community .frame-3,
html.hamburger-menu-open .header-for-community .food-cart,
html.hamburger-menu-open .header-for-restaurants .for-restaurants-hero,
html.hamburger-menu-open .header-for-restaurants .salad {
  visibility: hidden !important;
}

/* ===== Tablet & smaller: single column layout, no rows ===== */
@media (max-width: 1024px) {
  /* Header-index / header-for-community: constrain to viewport, ensure content fits */
  .header-index,
  .header-for-community,
  body.page-our-community .header-for-community {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: auto !important;
    height: auto !important;
    padding: 24px !important;
    padding-bottom: 60px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .header-index .header-nav,
  .header-index .index-hero,
  .header-for-community .header-nav {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .header-for-community .header-nav,
  .header-for-community .frame-3 {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Decorative logo frame - right side, shifted right */
  .header-index .header-index-logo-frame {
    left: auto !important;
    right: -80px !important;
    width: 100% !important;
    max-width: 660px !important;
    object-position: right top !important;
    min-height: 581px !important;
  }

  /* Logo - scale down on tablet */
  .header-nav .logo {
    max-width: 100% !important;
    width: min(180px, 45vw) !important;
    height: auto !important;
  }

  /* Footer logo - keep same size as navbar desktop throughout */
  .joyous-site .LOGO-SVG-for-cliff,
  .our-community .LOGO-SVG-for-cliff,
  .for-restaurants .LOGO-SVG-for-cliff {
    width: 215px !important;
    height: 86px !important;
  }

  /* Navbar - keep row layout on tablet */
  .header-nav,
  .header-for-community .header-nav,
  .header-for-restaurants .header-nav {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .header-nav .nav-links {
    min-width: unset !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
  }

  .header-nav .nav-links .nav-link {
    font-size: clamp(16px, 2.5vw, 24px) !important;
  }

  .header-nav .download-btn,
  .header-nav .for-restaurants-btn {
    font-size: 16px !important;
    padding: 12px 18px !important;
  }

  .header-nav .nav-buttons {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Sticky nav: keep row layout when scrolling (only when menu closed - overlay uses column) */
  .header-nav.header-nav-stuck:not(.nav-menu-open) .nav-links,
  .header-nav.header-nav-stuck:not(.nav-menu-open) .nav-buttons {
    flex-direction: row !important;
  }

  .header-nav.header-nav-stuck {
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* App store buttons - keep in row */
  .header-index .index-app-buttons {
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  /* Our Community header hero - text and image in row, left-aligned */
  .header-for-community .frame-3 {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 32px !important;
  }

  /* Our Community: match header-index layout at tablet - same container and navbar */
  body.page-our-community .header-for-community {
    border-radius: 0 0 4px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 48px !important;
  }
  body.page-our-community .header-for-community .header-nav,
  body.page-our-community .header-for-community .frame-3 {
    width: 100% !important;
    max-width: 1440px !important;
  }

  /* Our Community: 4px curves at tablet size - card-img-wrap only */
  body.page-our-community .card-img-wrap {
    border-radius: 4px 4px 0 0 !important;
  }
  body.page-our-community .card-img-wrap-hero,
  body.page-our-community .card-img-wrap-hero img,
  body.page-our-community .header-for-community .food-cart {
    border-radius: 4px !important;
  }
  body.page-our-community .community-restaurant-cards .frame-2 .frame-3,
  body.page-our-community .community-restaurant-cards .frame-6 .frame-3 {
    border-radius: 0 0 4px 4px !important;
  }
  body.page-our-community .header-nav .for-restaurants-btn,
  body.page-our-community .header-nav .download-btn,
  body.page-our-community .scroll-to-top-btn {
    border-radius: 4px !important;
  }

  /* For Restaurants header - ensure column layout */
  .header-for-restaurants {
    flex-direction: column !important;
  }

  .header-for-restaurants .salad {
    max-width: 100% !important;
    width: auto !important;
  }

  /* Support CTA section - ensure content fits on tablet, smaller + wrap */
  .joyous-site .frame-3.support-cta-section,
  .joyous-site .frame-6 {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: min(100%, calc(100vw - 48px)) !important;
    width: 100% !important;
    padding: 16px 12px !important;
    gap: 20px !important;
    overflow: hidden !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
  }
  /* Success state: tick above message, no wrap - ensure vertical stack on all screen sizes */
  body.sms-link-success-active .joyous-site .frame-3.support-cta-section,
  body.sms-link-success-active .joyous-site .frame-6 {
    flex-wrap: nowrap !important;
    flex-direction: column !important;
  }
  body.sms-link-success-active .joyous-site .frame-3.support-cta-section .sms-link-success-tick,
  body.sms-link-success-active .joyous-site .frame-6 .sms-link-success-tick {
    flex-shrink: 0 !important;
  }
  body.sms-link-success-active .joyous-site .frame-3.support-cta-section .sms-link-success,
  body.sms-link-success-active .joyous-site .frame-6 .sms-link-success {
    flex-shrink: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  .joyous-site .frame-3.support-cta-section .support-local,
  .joyous-site .frame-6 .support-local {
    font-size: clamp(18px, 4.5vw, 32px) !important;
    line-height: 1.25 !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .joyous-site .frame-3.support-cta-section .frame-4.support-cta-form,
  .joyous-site .frame-6 .frame-4.support-cta-form {
    min-width: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  .joyous-site .frame-3.support-cta-section .div-wrapper,
  .joyous-site .frame-6 .div-wrapper {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 120px !important;
  }
  .joyous-site .frame-3.support-cta-section .cta-phone-input,
  .joyous-site .frame-6 .cta-phone-input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .joyous-site .frame-3.support-cta-section .frame-4 .frame-5,
  .joyous-site .frame-6 .frame-4 .frame-5 {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  .joyous-site .frame-3.support-cta-section .frame-4 .text-wrapper-6,
  .joyous-site .frame-6 .frame-4 .text-wrapper-6 {
    font-size: clamp(14px, 2vw, 18px) !important;
    white-space: normal !important;
  }
  .joyous-site .frame-3.support-cta-section .text-wrapper-7,
  .joyous-site .frame-6 .text-wrapper-7 {
    font-size: clamp(12px, 2.5vw, 16px) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
  }
  .joyous-site .frame-3.support-cta-section .sms-link-success.text-wrapper-7,
  .joyous-site .frame-6 .sms-link-success.text-wrapper-7 {
    font-size: clamp(22px, 4.5vw, 32px) !important;
  }
  .joyous-site .frame-3.support-cta-section .sms-link-success-tick,
  .joyous-site .frame-6 .sms-link-success-tick {
    width: 64px;
    height: 64px;
  }

  /* Frame-7 city links - ensure content fits on tablet, smaller + wrap */
  .joyous-site .frame-7 {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: min(100%, calc(100vw - 48px)) !important;
    width: 100% !important;
    padding: 16px 12px !important;
    gap: 16px !important;
    overflow: hidden !important;
    flex-wrap: wrap !important;
  }
  .joyous-site .frame-7 .text-wrapper-8 {
    font-size: clamp(18px, 4.5vw, 32px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .joyous-site .frame-7 .aloha-restaurants {
    font-size: clamp(14px, 3vw, 24px) !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .header-index .index-hero-content {
    max-width: 100% !important;
  }

  /* Index hero - single column */
  .header-index .index-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Joyous-site: switch from absolute to flow layout - text in column, images below */
  body.page-index .joyous-site {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
    padding: 32px 24px 0 !important;
    gap: 32px !important;
    overflow-x: visible;
  }

  /* Override absolute positioning - let content flow in document order */
  body.page-index .joyous-site .joyous-is-LOCAL,
  body.page-index .joyous-site .neverending,
  body.page-index .joyous-site .only-local,
  body.page-index .joyous-site .helping-restaurants,
  body.page-index .joyous-site .rectangle,
  body.page-index .joyous-site .home-group-eating,
  body.page-index .joyous-site .when-you-order,
  body.page-index .joyous-site .joyous-makes-it-easy,
  body.page-index .joyous-site .you-start-saving-on,
  body.page-index .joyous-site .that-s-why-we-only,
  body.page-index .joyous-site .we-started-joyous,
  body.page-index .joyous-site .iphone-pro-mockup,
  body.page-index .joyous-site .frame-3.support-cta-section,
  body.page-index .joyous-site .frame-6,
  body.page-index .joyous-site .frame-7,
  body.page-index .joyous-site .frame-8,
  body.page-index .joyous-site .frame-9,
  body.page-index .joyous-site .frame-11 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  /* Flex order: text first, then images below each section */
  body.page-index .joyous-site .joyous-is-LOCAL { order: 1; }
  body.page-index .joyous-site .home-group-eating { order: 2; }
  body.page-index .joyous-site .when-you-order { order: 3; }
  body.page-index .joyous-site .joyous-makes-it-easy { order: 4; }
  body.page-index .joyous-site .iphone-pro-mockup { order: 5; }
  body.page-index .joyous-site .neverending { order: 6; }
  body.page-index .joyous-site .you-start-saving-on { order: 7; }
  body.page-index .joyous-site .frame-6 { order: 8; }
  body.page-index .joyous-site .only-local { order: 9; }
  body.page-index .joyous-site .that-s-why-we-only { order: 10; }
  body.page-index .joyous-site .frame-3.support-cta-section { order: 11; }
  body.page-index .joyous-site .helping-restaurants { order: 12; }
  body.page-index .joyous-site .we-started-joyous { order: 13; }
  body.page-index .joyous-site .rectangle { order: 14; display: none; }
  body.page-index .joyous-site .frame-7 { order: 15; }
  body.page-index .joyous-site .frame-8 { order: 16; }
  body.page-index .joyous-site .frame-9 { order: 17; }
  body.page-index .joyous-site .frame-11 { order: 18; }

  /* Images: full width for home-group-eating */
  body.page-index .joyous-site .home-group-eating {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto;
  }

  /* iPhone mockup: smaller, phone-sized */
  body.page-index .joyous-site .iphone-pro-mockup {
    width: auto !important;
    max-width: 280px !important;
    height: auto !important;
    aspect-ratio: auto;
  }

  /* Joyous-site main content - constrain width (for other pages) */
  .joyous-site {
    max-width: 100% !important;
    overflow-x: clip;
  }

  /* Footer: full viewport width, shrink to content, no space below */
  .joyous-site .frame-9,
  body.page-index .joyous-site .frame-9,
  .footer-joyous-site .frame-9 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
    padding: 24px 24px !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  .joyous-site .frame-9,
  .footer-joyous-site .frame-9 {
    padding: 24px 24px !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
  }

  /* City links - allow wrap, prevent overflow */
  .joyous-site .aloha-restaurants {
    white-space: normal !important;
    word-wrap: break-word;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Main content blocks - constrain to viewport */
  .joyous-site .joyous-is-LOCAL,
  .joyous-site .neverending,
  .joyous-site .only-local,
  .joyous-site .helping-restaurants {
    max-width: calc(100vw - 48px) !important;
    left: 24px !important;
  }

  /* Helping-restaurants - constrain width so text wraps on smaller screens */
  .joyous-site .helping-restaurants {
    width: auto !important;
    max-width: min(320px, calc(100vw - 48px)) !important;
    align-self: flex-start !important;
    display: block !important;
    white-space: normal !important;
  }
  .joyous-site .helping-restaurants br {
    display: none !important;
  }
  .joyous-site .helping-restaurants .span,
  .joyous-site .helping-restaurants .text-wrapper-2 {
    display: inline !important;
    white-space: normal !important;
  }

  .joyous-site .when-you-order,
  .joyous-site .joyous-makes-it-easy,
  .joyous-site .you-start-saving-on,
  .joyous-site .that-s-why-we-only,
  .joyous-site .we-started-joyous {
    max-width: calc(100vw - 48px) !important;
    width: auto !important;
    left: 24px !important;
    right: 24px !important;
  }

  .joyous-site .home-group-eating {
    max-width: calc(100vw - 48px) !important;
  }

  .joyous-site .frame-3.support-cta-section,
  .joyous-site .frame-6,
  .joyous-site .frame-7 {
    left: 24px !important;
    right: 24px !important;
    width: calc(100% - 48px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  /* frame-8: compact button, same size as frame-5/frame-13 */
  body.page-index .joyous-site .frame-8,
  .joyous-site .frame-8 {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
    align-self: center !important;
  }

  .joyous-site .frame-8 .text-wrapper-6,
  .joyous-site .frame-8 p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Sticky nav mobile footer */
  .joyous-site .frame-11 {
    left: 24px !important;
    right: 24px !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
  }

  /* Footer frame-9 - stack logo and links */
  .joyous-site .frame-9,
  .footer-joyous-site .frame-9 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  /* Footer frame-10 - stack link columns vertically */
  .joyous-site .frame-10,
  .footer-joyous-site .frame-10 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    max-width: 100% !important;
  }

  /* Footer text - allow wrap, prevent cutoff */
  .joyous-site .frame-9 .text-wrapper-9,
  .footer-joyous-site .frame-9 .text-wrapper-9 {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Mobile nav frame-11 - stack */
  .joyous-site .frame-11 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .joyous-site .frame-11 .frame-12 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* CTA form - stack phone input and button */
  .joyous-site .frame-4.support-cta-form,
  .joyous-site .frame-4 {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .joyous-site .frame-4 .div-wrapper,
  .joyous-site .frame-4 .frame-5 {
    width: 100% !important;
  }

  /* For Restaurants: flow layout - text in column, images below */
  body.page-for-restaurants .for-restaurants {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: auto !important;
    padding: 32px 24px 48px !important;
    gap: 32px !important;
  }

  body.page-for-restaurants .for-restaurants .joyous-makes-you,
  body.page-for-restaurants .for-restaurants .joyous-provided,
  body.page-for-restaurants .for-restaurants .frame-5,
  body.page-for-restaurants .for-restaurants .joyous-invests-in,
  body.page-for-restaurants .for-restaurants .we-conducted-an,
  body.page-for-restaurants .for-restaurants .restaurant-ipad,
  body.page-for-restaurants .for-restaurants .frame-8,
  body.page-for-restaurants .for-restaurants .frame-10,
  body.page-for-restaurants .for-restaurants .text-wrapper-14 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  body.page-for-restaurants .for-restaurants .restaurant-ipad {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* For Restaurants - frame-6 footer: full width, no space below */
  .for-restaurants .frame-6 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    text-align: center !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
  }

  body.page-for-restaurants .for-restaurants {
    padding-bottom: 0 !important;
  }

  .for-restaurants .frame-6 .frame-7 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* For Restaurants - frame-8 (New Customers, More Orders, For Less) stack */
  .for-restaurants .frame-8 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }

  /* For Restaurants - frame-10 (marketing section) stack */
  .for-restaurants .frame-10 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: center !important;
  }

  .for-restaurants .frame-10 .marketing {
    max-width: 100% !important;
  }

  /* Our Community - restaurant cards: full-width sections so all card images are same size */
  body.page-our-community .community-restaurant-cards {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 52px !important;
  }
  body.page-our-community .community-restaurant-cards .div {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body.page-our-community .community-restaurant-cards .frame-2,
  body.page-our-community .community-restaurant-cards .frame-5,
  body.page-our-community .community-restaurant-cards .frame-6 {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tablet: 2 restaurant cards across, equal sizing */
  body.page-our-community .community-restaurant-cards .frame-5-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Aloha section: frame-2 same 50% width as frame-5 cards, centered */
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) .p {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    justify-self: center !important;
  }
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) .frame-2 {
    grid-column: 2 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  /* Restaurant cards: text first, image below */
  body.page-our-community .community-restaurant-cards .frame-3 {
    order: 1 !important;
  }
  body.page-our-community .community-restaurant-cards .card-img-wrap {
    order: 2 !important;
  }

  body.page-our-community .community-restaurant-cards > .frame {
    flex-direction: column !important;
    align-items: center !important;
  }

  body.page-our-community .community-restaurant-cards .div {
    width: auto !important;
    max-width: 100% !important;
  }


  body.page-our-community .community-restaurant-cards,
  body.page-for-restaurants .for-restaurants {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Our Community - constrain frame-8 */
  body.page-our-community .our-community .frame-8 {
    left: 24px !important;
    right: 24px !important;
    width: auto !important;
    max-width: calc(100% - 48px) !important;
  }

  /* For Restaurants page - prevent overflow */
  .for-restaurants .frame-6 {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .for-restaurants .frame-8 {
    width: calc(100% - 48px) !important;
    left: 24px !important;
    right: 24px !important;
    max-width: none !important;
  }

  /* Scroll-to-top button */
  .scroll-to-top-btn {
    right: 24px !important;
  }

  /* Frame-7 (city links section) - constrain width */
  .joyous-site .frame-7 {
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  /* Force row layout for some frames (exclude footer frame-9/10, nav frame-11/12) */
  /* Note: community-restaurant-cards .frame-5/.frame-6 override to column below for uniform image sizing */
  .joyous-site .frame,
  .joyous-site .frame-2,
  .joyous-site .frame-3,
  .joyous-site .frame-4,
  .joyous-site .frame-5,
  .joyous-site .frame-6,
  .joyous-site .frame-7,
  .joyous-site .frame-8,
  .joyous-site .frame-13,
  .joyous-site .div-wrapper,
  .joyous-site .download,
  .for-restaurants .frame-2,
  .for-restaurants .frame-5,
  .for-restaurants .frame-6,
  .for-restaurants .frame-7,
  .for-restaurants .frame-8,
  .for-restaurants .frame-9,
  .for-restaurants .frame-10,
  .for-restaurants .for-restaurants-hero,
  .our-community .frame,
  .our-community .frame .div,
  .our-community .frame-2,
  .our-community .frame-5,
  .our-community .frame-6,
  .our-community .frame-7,
  .our-community .frame-8,
  .our-community .frame-9,
  .our-community .frame-10,
  .header-for-community .frame-3 {
    flex-direction: row !important;
    align-items: center !important;
  }
  .header-for-community .frame-4 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .header-for-community .div {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Single-button elements: keep icon+text horizontal */
  .joyous-site .frame-13,
  .joyous-site .frame-8 {
    flex-direction: row !important;
  }

  /* Remove white-space: nowrap that causes overflow */
  .joyous-site .text-wrapper,
  .joyous-site .div,
  .joyous-site .p,
  .our-community .frame .p,
  .for-restaurants .text-wrapper-14 {
    white-space: normal !important;
  }

  /* Images - constrain width */
  .joyous-site img,
  .for-restaurants img,
  .our-community img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Card images: must fill container for uniform sizing - exclude from height:auto above */
  body.page-our-community .community-restaurant-cards .card-img-wrap img {
    height: 100% !important;
  }

  /* Ensure body doesn't overflow */
  body {
    overflow-x: clip !important;
  }
}

/* Smaller tablets - additional constraints */
@media (max-width: 768px) {
  .header-index,
  .header-nav.header-nav-stuck {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Header-index / header-for-community - tighter padding, smaller elements */
  .header-index,
  .header-for-community {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .header-index .header-index-logo-frame {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.2;
    transform: scale(1.4);
  }

  .header-nav .logo {
    width: min(160px, 40vw) !important;
  }

  /* Footer logo - keep same size as navbar desktop throughout */
  .joyous-site .LOGO-SVG-for-cliff,
  .our-community .LOGO-SVG-for-cliff,
  .for-restaurants .LOGO-SVG-for-cliff {
    width: 215px !important;
    height: 86px !important;
  }

  .header-index .index-hero-title {
    font-size: clamp(38px, 9vw, 60px) !important;
  }

  .header-index .index-hero-lead {
    font-size: 24px !important;
  }

  .header-index .index-hero-sub {
    font-size: 22px !important;
  }

  /* Our Community: frame-3 full screen width on mobile */
  body.page-our-community .header-for-community .frame-3 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Our Community: food-cart behind text + opacity 0.2 on mobile */
  body.page-our-community .header-for-community .food-cart {
    opacity: 0.2 !important;
  }
  body.page-our-community .header-for-community .card-img-wrap-hero {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
  }
  body.page-our-community .header-for-community .frame-4 {
    position: relative;
    z-index: 1;
  }

  /* Our Community: .div p line spacing, our-forest-grove two lines on mobile */
  body.page-our-community .community-restaurant-cards .div .p {
    line-height: 1.3;
  }
  body.page-our-community .community-restaurant-cards .p,
  body.page-our-community .community-restaurant-cards .our-forest-grove {
    white-space: normal !important;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
  }

  /* Our Community header text: sizes for mobile */
  .header-for-community .frame-4 .p {
    font-size: 24px !important;
  }
  .header-for-community .frame-4 .text-wrapper-5 {
    font-size: clamp(38px, 9vw, 60px) !important;
  }
  .header-for-community .frame-4 .text-wrapper-6 {
    font-size: 22px !important;
  }

  .header-index .index-app-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
  }

  .joyous-site .frame-11 {
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
  }

  .joyous-site .joyous-is-LOCAL,
  .joyous-site .neverending,
  .joyous-site .only-local,
  .joyous-site .helping-restaurants,
  .joyous-site .when-you-order,
  .joyous-site .joyous-makes-it-easy,
  .joyous-site .you-start-saving-on,
  .joyous-site .that-s-why-we-only,
  .joyous-site .we-started-joyous {
    left: 16px !important;
  }

  /* Smaller headers and paragraphs on mobile */
  .joyous-site .joyous-is-LOCAL,
  .joyous-site .neverending,
  .joyous-site .only-local,
  .joyous-site .helping-restaurants {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  .joyous-site .when-you-order,
  .joyous-site .joyous-makes-it-easy,
  .joyous-site .you-start-saving-on,
  .joyous-site .that-s-why-we-only,
  .joyous-site .we-started-joyous {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  .joyous-site .frame-3.support-cta-section,
  .joyous-site .frame-6,
  .joyous-site .frame-7 {
    left: 16px !important;
    right: 16px !important;
    width: calc(100% - 32px) !important;
  }

  /* Support CTA - smaller content on mobile */
  .joyous-site .frame-3.support-cta-section,
  .joyous-site .frame-6 {
    padding: 12px 10px !important;
    gap: 12px !important;
  }
  .joyous-site .frame-3.support-cta-section .support-local,
  .joyous-site .frame-6 .support-local {
    font-size: clamp(16px, 4vw, 22px) !important;
  }
  .joyous-site .frame-3.support-cta-section .frame-4.support-cta-form,
  .joyous-site .frame-6 .frame-4.support-cta-form {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  .joyous-site .frame-3.support-cta-section .div-wrapper,
  .joyous-site .frame-6 .div-wrapper {
    flex: 1 1 auto !important;
  }
  .joyous-site .frame-3.support-cta-section .text-wrapper-7,
  .joyous-site .frame-6 .text-wrapper-7 {
    font-size: 13px !important;
  }
  .joyous-site .frame-3.support-cta-section .sms-link-success.text-wrapper-7,
  .joyous-site .frame-6 .sms-link-success.text-wrapper-7 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  .joyous-site .frame-3.support-cta-section .sms-link-success-tick,
  .joyous-site .frame-6 .sms-link-success-tick {
    width: 56px;
    height: 56px;
  }

  /* Frame-7 - smaller content on mobile */
  .joyous-site .frame-7 {
    padding: 12px 10px !important;
    gap: 10px !important;
  }
  .joyous-site .frame-7 .text-wrapper-8 {
    font-size: clamp(16px, 4vw, 20px) !important;
  }
  .joyous-site .frame-7 .aloha-restaurants {
    font-size: clamp(12px, 2.5vw, 18px) !important;
  }

  .joyous-site .frame-8 {
    left: 16px !important;
    right: 16px !important;
  }

  .joyous-site .frame-9,
  .footer-joyous-site .frame-9 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Footer frame-10 - single column, wrap text */
  .joyous-site .frame-10,
  .footer-joyous-site .frame-10 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    max-width: 100% !important;
  }

  .joyous-site .frame-9 .text-wrapper-9,
  .footer-joyous-site .frame-9 .text-wrapper-9 {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
  }

  /* Footer/nav - smaller text on mobile */
  .joyous-site .frame-11 .text-wrapper-10,
  .joyous-site .frame-11 .text-wrapper-11,
  .joyous-site .frame-11 .text-wrapper-12 {
    font-size: 18px !important;
  }
  .joyous-site .frame-11 .text-wrapper-13,
  .joyous-site .frame-13 .text-wrapper-13 {
    font-size: 20px !important;
  }

  /* Our Community: match header-index at smaller tablet, 4px curves */
  body.page-our-community .header-for-community {
    border-radius: 0 0 4px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 48px !important;
  }

  /* Our Community: 1 per row at mobile */
  body.page-our-community .community-restaurant-cards .div {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  /* Mobile: 1 restaurant card across, equal sizing */
  body.page-our-community .community-restaurant-cards .frame-5-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }
  /* Aloha section: frame-2 full width, centered (1-column) */
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) {
    grid-template-columns: 1fr !important;
  }
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) .p {
    text-align: center !important;
  }
  body.page-our-community .community-restaurant-cards .div:has(> .frame-2) .frame-2 {
    grid-column: 1 !important;
  }

  /* Our Community: 4px curves at mobile size - card-img-wrap only */
  body.page-our-community .card-img-wrap {
    border-radius: 4px 4px 0 0 !important;
  }
  body.page-our-community .card-img-wrap-hero,
  body.page-our-community .card-img-wrap-hero img,
  body.page-our-community .header-for-community .food-cart {
    border-radius: 4px !important;
  }
  body.page-our-community .community-restaurant-cards .frame-2 .frame-3,
  body.page-our-community .community-restaurant-cards .frame-6 .frame-3 {
    border-radius: 0 0 4px 4px !important;
  }
  body.page-our-community .header-nav .for-restaurants-btn,
  body.page-our-community .header-nav .download-btn,
  body.page-our-community .scroll-to-top-btn {
    border-radius: 4px !important;
  }
}

/* ===== Our Community: force 4px food image corners at ALL screen sizes ===== */
/* No media query - applies everywhere; overrides any conflicting rules */
html.page-our-community body.page-our-community .our-community .card-img-wrap {
  border-radius: 4px 4px 0 0 !important;
  overflow: hidden !important;
}
html.page-our-community body.page-our-community .header-for-community .card-img-wrap-hero,
html.page-our-community body.page-our-community .header-for-community .card-img-wrap-hero img,
html.page-our-community body.page-our-community .header-for-community .food-cart {
  border-radius: 4px !important;
}