/* Native phone layouts. Desktop styling and commerce logic are unchanged. */
@layer mp-native-mobile {
  @media (max-width: 749px) {
    html { scroll-padding-top: 72px; }
    body { min-width: 0; }
    .page-wrapper { width: 100%; min-width: 0; }
    .cart-title h1 { min-width: 0 !important; font-size: clamp(32px,9vw,44px) !important; }
    .cart-page { grid-template-columns: minmax(0,1fr) !important; }
    .cart-page > * { min-width: 0 !important; }
    .mp-wrap { width: 100% !important; max-width: 100% !important; }
    header-component .header__icon--menu,
    header-component .header-actions__action { min-width: 44px !important; min-height: 44px !important; }
    .mp :is(input,select,textarea) { font-size: 16px !important; }
    .mp :is(.mp-btn,.mp-add,.mp-more,.mp-tab),
    .mp-pm :is(button,[role="tab"]),
    .mp-wlw button { min-height: 44px !important; font-size: 14px !important; }
    .mp :is(.mp-lede,.mp-meal__blurb) { font-size: 16px !important; line-height: 1.5 !important; }
    /* Keep the rotating proof badge above a full-width, separate action row. */
    .mp-hero--review .mp-hero__art { bottom: 148px !important; }
    .mp-hero--review .mp-float--a > span:last-child { display: flex !important; flex-direction: column !important; gap: 4px !important; }
    .mp-hero--review .mp-float--a br { display: none !important; }
    .mp-hero--review .mp-hero__cta { width: 100% !important; justify-self: stretch !important; }
    .mp-hero--review .mp-hero__cta .mp-btn { min-height: 48px !important; white-space: nowrap !important; }
    .mp-plan-router { padding: 12px !important; height: 100dvh !important; }
    .mp-plan-router__dialog { overflow-y: auto !important; max-height: 100% !important; }
    .mp-plan-router__grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .mp-plan-router__option { padding: 16px !important; min-height: 100px !important; }
    .mp-plan-router__text strong { font-size: 18px !important; }
    .mp-plan-router__text small,.mp-plan-router__arrow { font-size: 14px !important; }
    #start .mp-tiles { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
    #start .mp-tile { padding: 148px 16px 16px !important; }
    #start .mp-tile::after { height: 132px !important; }
    #start .mp-tile b { font-size: 20px !important; min-height: 0 !important; }
    #start .mp-tile p,#start .mp-tile__go { font-size: 14px !important; }
    #mp-starter-sets .mp-sets { grid-template-columns: 1fr !important; gap: 16px !important; }
    #mp-starter-sets .mp-set__media { height: 180px !important; }
    #mp-starter-sets .mp-set__body { padding: 16px !important; }
    #mp-starter-sets .mp-set h3 { font-size: 20px !important; min-height: 0 !important; }
    #mp-starter-sets .mp-set p,#mp-starter-sets .mp-set a { font-size: 14px !important; }
    #mp-starter-sets .mp-set a { min-height: 44px !important; }
    #menu .mp-meal__title { font-size: 16px !important; min-height: 0 !important; }
    #menu .mp-meal__body { padding: 12px !important; }
    .mp .mp-meal[hidden] { display: none !important; }
    #menu :is(.mp-more,.mp-add) { font-size: 14px !important; min-height: 44px !important; }
    .mp-pm { inset: 0 !important; width: 100% !important; height: 100dvh !important; padding: 12px !important; }
    .mp-pm__card { width: 100% !important; max-width: none !important; max-height: 100% !important; overflow-y: auto !important; }
    .mp-pm__x { min-width: 44px !important; min-height: 44px !important; }
    .mp-pm__panel { font-size: 16px !important; line-height: 1.5 !important; }
    .mp-wlw__dialog { width: 100% !important; height: 100dvh !important; min-height: 0 !important; max-height: 100dvh !important; }
    .mp-wlw__wizard-close { width: 44px !important; height: 44px !important; }
    .mp-wlw__steps { width: 100% !important; gap: 6px !important; }
    .mp-wlw__steps button { flex: 1 1 0 !important; padding: 6px !important; font-size: 12px !important; }
    .mp-wlw__steps button span { display: inline !important; }
    .mp-wlw__steps button b { display: none !important; }
    .mp-wlw__steps > i { display: none !important; }
    .mp-wlw__wizard-body { overflow-y: auto !important; min-height: 0 !important; overscroll-behavior: contain; }
    .mp-wlw__wizard-panel--config .mp-wlw__heading { font-size: 30px !important; }
    .mp-wlw__tip { font-size: 14px !important; }
    .mp-wlw__choices { flex-wrap: wrap !important; }
    .mp-wlw__choices button { font-size: 14px !important; padding: 10px 8px !important; }
    .mp-wlw__day-tabs { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; overflow: visible !important; gap: 8px !important; }
    .mp-wlw__day-tabs button { width: 100% !important; min-width: 0 !important; }
    .mp-wlw__meals { display: grid !important; grid-template-columns: 1fr !important; margin-inline: 0 !important; padding: 0 !important; overflow: visible !important; gap: 16px !important; }
    .mp-wlw__meal { width: 100% !important; min-width: 0 !important; }
    .mp-wlw__swap-grid { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; gap: 12px !important; }
    .mp-wlw__swap-option { width: 100% !important; min-width: 0 !important; }
    .mp-wlw__swap-head { flex-wrap: wrap !important; }
    .mp-wlw__swap-head button { max-width: none !important; }
    .mp-wlw__swap-cats { flex-wrap: wrap !important; overflow: visible !important; }
    .mp-wlw__swap-cats button { flex: 1 1 120px !important; white-space: normal !important; }
    .mp-wlw__wizard-foot { padding-bottom: max(12px,env(safe-area-inset-bottom)) !important; }
    body:has(.mp-wlw--wizard:not([hidden])) :is(.mp-cta-bar,.mp-plan-hook,.mp-menu-dock) { display: none !important; }
    .mp-transform-proof__grid,.mp-google-reviews { grid-template-columns: 1fr !important; }
    .mp-proof-story__media { height: 220px !important; }
    .mp-proof-story__body { padding: 16px !important; }
    .mp-proof-story__quote,.mp-proof-story__toggle,.mp-proof-story__name { font-size: 14px !important; }
    .mp-google-card__excerpt,.mp-google-card__quote { font-size: 14px !important; }
    .mp-google-review__toggle { min-height: 44px !important; font-size: 13px !important; }
  }
}

@layer mp-native-mobile {
  @media (max-width: 749px) {
    html[data-mp-canvas-mobile] .mp.mp-hero {
      padding: 92px 0 18px !important;
      min-height: 0 !important;
      position: relative !important;
      overflow: hidden !important;
      isolation: isolate;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero > .mp-wrap {
      position: static !important;
      padding-inline: 18px !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__grid {
      display: block !important;
      position: static !important;
      min-height: 0 !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__grid > div:first-child {
      display: block !important;
      position: relative !important;
      width: 100% !important;
      max-width: none !important;
      min-height: 0 !important;
      padding: 0 !important;
      z-index: 2 !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-eyebrow {
      display: inline-flex !important;
      width: fit-content !important;
      max-width: 100% !important;
      margin: 0 0 18px !important;
      padding: 7px 8px !important;
      font-size: 8px !important;
      letter-spacing: .06em !important;
      line-height: 1.3 !important;
      white-space: normal !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-eyebrow::before { display: none !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero--review .mp-eyebrow { max-width: calc(100% - 120px) !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-h-xl {
      width: 65% !important;
      max-width: 65% !important;
      margin: 0 0 14px !important;
      font-size: clamp(23px,6.1vw,36px) !important;
      line-height: 1.06 !important;
      letter-spacing: -.04em !important;
      text-shadow: none !important;
      text-wrap: balance;
      background: none !important;
      box-shadow: none !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-lede {
      width: 59% !important;
      max-width: 59% !important;
      margin: 0 0 18px !important;
      font-size: clamp(12px,3.25vw,17px) !important;
      line-height: 1.5 !important;
      text-shadow: none !important;
      background: none !important;
      box-shadow: none !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero :is(.mp-h-xl,.mp-lede)::after { display: none !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__body-desktop { display: inline !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__body-mobile { display: none !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__art {
      position: absolute !important;
      inset: 60px 0 0 auto !important;
      width: 56% !important;
      min-width: 0 !important;
      max-width: 56% !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 0 !important;
      aspect-ratio: auto !important;
      opacity: 1 !important;
      overflow: visible !important;
      border-radius: 0 !important;
      z-index: -1 !important;
      pointer-events: none !important;
      mask: none !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__art::before,
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__art::after { display: none !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-frame {
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      border-radius: 0 !important;
      -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 18%,#000 45%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%) !important;
      mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 18%,#000 45%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%) !important;
      mask-composite: intersect !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__slide .mp-img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: 56% 32% !important;
      transform: none !important;
      border-radius: 0 !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__cta {
      display: grid !important;
      grid-template-columns: repeat(2,minmax(0,1fr)) !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-hero__cta .mp-btn {
      flex: 0 1 auto !important;
      align-self: stretch !important;
      width: auto !important;
      min-width: 0 !important;
      min-height: 44px !important;
      max-width: 100% !important;
      padding: 10px 12px !important;
      font-size: 12px !important;
      line-height: 1.25 !important;
      white-space: normal !important;
      border-radius: 8px !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero--review .mp-hero__cta { width: 230px !important; max-width: 100% !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero--consistency .mp-hero__slide .mp-img { object-position: 100% 50% !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-float--a {
      inset: 8px 10px auto auto !important;
      width: auto !important;
      max-width: 112px !important;
      min-height: 0 !important;
      padding: 8px !important;
      border-radius: 6px !important;
      gap: 6px !important;
      box-shadow: 0 4px 12px #0002 !important;
      background: #2c3025 !important;
    }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-float__n { font-size: 13px !important; line-height: 1.1 !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-float__l { font-size: 10px !important; line-height: 1.25 !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-float__dot { display: none !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-micro { width: 100% !important; max-width: 100% !important; margin-top: 12px !important; font-size: 10px !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-afterpay { text-align: left !important; margin: 14px 0 0 !important; font-size: 10px !important; }
    html[data-mp-canvas-mobile] #start .mp-tiles { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
    html[data-mp-canvas-mobile] .mp-plan-router__grid { grid-auto-flow: row !important; grid-auto-columns: auto !important; grid-template-columns: minmax(0,1fr) !important; overflow: visible !important; }
    html[data-mp-canvas-mobile] .mp-plan-router__option { width: auto !important; min-width: 0 !important; }
    html[data-mp-canvas-mobile] .mp-proof b { font-size: clamp(13px,4vw,16px) !important; }
    html[data-mp-canvas-mobile] #start .mp-tile { padding: 104px 9px 12px !important; }
    html[data-mp-canvas-mobile] #start .mp-tile::after { height: 92px !important; }
    html[data-mp-canvas-mobile] #start .mp-tile b { font-size: 15px !important; min-height: 36px !important; }
    html[data-mp-canvas-mobile] #start .mp-tile p { font-size: 12px !important; line-height: 1.4 !important; }
    html[data-mp-canvas-mobile] #start .mp-tile__go { font-size: 12px !important; min-height: 44px !important; display: flex !important; align-items: center !important; }
    html[data-mp-canvas-mobile] #mp-starter-sets .mp-sets { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
    html[data-mp-canvas-mobile] #mp-starter-sets .mp-set__media { height: 130px !important; }
    html[data-mp-canvas-mobile] #mp-starter-sets .mp-set__body { padding: 12px !important; }
    html[data-mp-canvas-mobile] #mp-starter-sets .mp-set h3 { font-size: 17px !important; }
    html[data-mp-canvas-mobile] #mp-starter-sets .mp-set p { font-size: 12px !important; }
    html[data-mp-canvas-mobile] #mp-starter-sets .mp-set a { font-size: 12px !important; }
  }
}


/* Preserve the desktop card anatomy and order in horizontal phone rows. */
@layer mp-native-mobile {
  @media (max-width: 749px) {
    html[data-mp-canvas-mobile] #MainContent[data-template="index"] {
      & :where(#start .mp-tiles,[id$="__mp_how"] .mp-steps,#mp-starter-sets .mp-sets,#menu .mp-meals,.mp-transform-proof__grid,.mp-home-google__track) {
        display: grid !important;
        grid-template-columns: none !important;
        grid-template-rows: auto !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 88% !important;
        gap: 14px !important;
        align-items: stretch !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 2px !important;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #8b9052 transparent;
        padding: 5px 2px 14px !important;
      }
      & :is(.mp-tile,.mp-step,.mp-set,.mp-meal,.mp-proof-story,.mp-google-card) {
        grid-column: auto !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        scroll-snap-align: start;
        transform: none !important;
      }
      & :is(.mp-meal,.mp-google-card)[hidden] { display: none !important; }
      & #start .mp-tile {
        display: flex !important;
        flex-direction: column !important;
        min-height: 210px !important;
        padding: 22px 20px !important;
        gap: 12px !important;
        border-radius: 14px !important;
      }
      & #start .mp-tile::after {
        inset: 0 0 0 auto !important;
        width: 52% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
        -webkit-mask-image: linear-gradient(90deg,transparent 0%,#0006 26%,#000c 52%,#000 76%) !important;
        mask-image: linear-gradient(90deg,transparent 0%,#0006 26%,#000c 52%,#000 76%) !important;
      }
      & #start .mp-tile :is(b,p,.mp-tile__go) { width: 65% !important; max-width: 65% !important; }
      & #start .mp-tile b { min-height: 0 !important; font-size: 22px !important; line-height: 1.1 !important; }
      & #start .mp-tile p { margin: 0 !important; font-size: 14px !important; line-height: 1.45 !important; }
      & #start .mp-tile__go { min-height: 36px !important; font-size: 13px !important; margin-top: auto !important; }
      & [id$="__mp_how"] .mp-steps { grid-template-columns: repeat(3,minmax(0,1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 8px !important; overflow: visible !important; padding: 5px 0 !important; scroll-snap-type: none !important; }
      & [id$="__mp_how"] .mp-step { display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-height: 150px !important; padding: 12px 8px 24px !important; gap: 10px !important; text-align: left !important; border-radius: 10px !important; }
      & [id$="__mp_how"] .mp-step__n { width: 24px !important; height: 24px !important; font-size: 12px !important; margin: 0 0 4px !important; }
      & [id$="__mp_how"] .mp-step h3 { min-height: 36px !important; font-size: clamp(13px,3.6vw,17px) !important; line-height: 1.2 !important; text-align: left !important; margin: 0 !important; }
      & [id$="__mp_how"] .mp-step__short { font-size: 11px !important; line-height: 1.3 !important; text-align: left !important; margin: 0 !important; }
      & [id$="__mp_how"] .mp-step__icon { width: 28px !important; height: 28px !important; top: 10px !important; right: 5px !important; }
      & :is(.mp-step-mobile-detail,.mp-step-mobile-detail__inner) { background: #35382c !important; color: #f4f4eb !important; border-color: #66694c !important; }
      & #mp-starter-sets .mp-sets { grid-auto-columns: calc((100% - 14px) / 2) !important; gap: 10px !important; }
      & #mp-starter-sets .mp-set { display: flex !important; flex-direction: column !important; }
      & #mp-starter-sets .mp-set__media { position: relative !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 11 !important; }
      & #mp-starter-sets .mp-set__media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
      & #mp-starter-sets .mp-set__body { padding: 12px 10px !important; gap: 10px !important; }
      & #mp-starter-sets .mp-set__body h3 { min-height: 38px !important; font-size: 16px !important; line-height: 1.2 !important; }
      & #mp-starter-sets .mp-set__desc p { font-size: 12px !important; line-height: 1.4 !important; }
      & #mp-starter-sets .mp-set__body > .mp-btn { font-size: 12px !important; min-height: 40px !important; padding: 8px !important; }
      & #menu .mp-tabs { display: grid !important; grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap: 6px !important; width: 100% !important; overflow: visible !important; padding: 4px 0 12px !important; }
      & #menu .mp-tab { grid-column: span 2 !important; grid-row: auto !important; width: 100% !important; min-width: 0 !important; min-height: 38px !important; margin: 0 !important; padding: 6px !important; font-size: 11px !important; line-height: 1.2 !important; white-space: normal !important; text-align: center !important; justify-content: center !important; }
      & #menu .mp-tab:nth-child(n+4) { grid-column: span 3 !important; }
      & #menu .mp-meals { grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 14px 10px !important; overflow: visible !important; padding: 4px 0 !important; scroll-snap-type: none !important; }
      & #menu .mp-meal { grid-row: auto !important; border-radius: 10px !important; }
      & #menu .mp-meal__media { height: auto !important; min-height: 0 !important; aspect-ratio: 1 !important; }
      & #menu .mp-meal__body { padding: 12px 10px !important; gap: 8px !important; }
      & #menu .mp-meal__title { display: block !important; min-height: 52px !important; height: auto !important; max-height: none !important; font-size: clamp(13px,3.8vw,15px) !important; line-height: 1.25 !important; -webkit-line-clamp: unset !important; overflow: visible !important; overflow-wrap: normal !important; word-break: normal !important; }
      & #menu .mp-meal__title a { font-size: inherit !important; line-height: inherit !important; }
      & #menu .mp-meal__blurb { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden !important; min-height: 34px !important; font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; }
      & #menu .mp-more { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; width: max-content !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 40px !important; padding: 8px 12px !important; font-size: 13px !important; line-height: 1.2 !important; white-space: nowrap !important; position: relative !important; }
      & #menu .mp-more::after { content: none !important; }
      & #menu .mp-meal__foot { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
      & #menu .mp-meal__price { font-size: 17px !important; }
      & #menu .mp-add { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; min-height: 44px !important; padding: 10px 6px !important; font-size: 13px !important; white-space: nowrap !important; }
      & #menu .mp-add__suffix { display: inline !important; }
      & .mp-pm__foot .mp-add { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; min-height: 44px !important; padding: 10px 16px !important; font-size: 14px !important; border-radius: 10px !important; }
      & .mp-pm__foot .mp-add__suffix { display: inline !important; }
      & #menu .mp-tag { font-size: 9px !important; padding: 4px 6px !important; }
      & .mp-transform-proof { padding: 20px 14px !important; }
      & .mp-proof-story .mp-proof-story__media { height: auto !important; aspect-ratio: 4 / 3 !important; }
      & .mp-proof-story .mp-proof-story__media img { object-fit: contain !important; object-position: center !important; }
      & .mp-proof-story .mp-proof-story__body { padding: 18px !important; }
      & .mp-proof-story__detail > summary { min-height: 44px !important; font-size: 14px !important; }
      & .mp-proof-story__customer { font-size: 12px !important; line-height: 1.4 !important; }
      & .mp-proof-story blockquote { font-size: 14px !important; line-height: 1.5 !important; }
      & .mp-proof-story__number { font-size: 36px !important; }
      & .mp-proof-story__photo-label { font-size: 9px !important; }
      & .mp-home-google .mp-google-card { min-height: 0 !important; height: auto !important; padding: 18px !important; border-radius: 14px !important; }
      & .mp-google-card__head { display: flex !important; align-items: center !important; gap: 8px !important; min-height: 0 !important; margin-bottom: 14px !important; }
      & .mp-google-card__avatar { display: grid !important; place-items: center; width: 32px !important; height: 32px !important; flex: 0 0 32px !important; font-size: 11px !important; }
      & .mp-google-card__author { min-width: 0 !important; }
      & .mp-google-card__author b { font-size: 14px !important; line-height: 1.3 !important; }
      & .mp-google-card__author > span { display: block !important; font-size: 11px !important; }
      & .mp-google-card__google { display: block !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important; }
      & .mp-google-card__meta { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
      & .mp-google-card__date { font-size: 11px !important; }
      & .mp-google-card__excerpt { font-size: 15px !important; line-height: 1.5 !important; margin: 0 0 12px !important; }
      & .mp-google-card.is-expanded .mp-google-card__quote { font-size: 14px !important; line-height: 1.6 !important; max-height: none !important; -webkit-line-clamp: unset !important; }
      & .mp-google-review__toggle { min-height: 44px !important; font-size: 12px !important; padding: 10px !important; align-self: flex-start !important; }
      & .mp-google-card__topic { display: block !important; margin-top: 14px !important; font-size: 11px !important; }
      & .mp-home-google__more { min-height: 44px !important; font-size: 14px !important; margin-top: 14px !important; }
      & .mp-guar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; overflow: visible !important; gap: 10px !important; padding-bottom: 12px !important; scroll-snap-type: none; }
      & .mp-guar__item { grid-column: auto !important; grid-row: auto !important; min-width: 0 !important; }
      & .mp-guar__item summary { padding: 10px 8px !important; gap: 5px !important; }
      & .mp-guar__t { font-size: clamp(11px,3vw,12px) !important; overflow-wrap: normal !important; word-break: normal !important; }
    }
  }
}

/* Match the dedicated menu to the compact homepage ordering cards. */
@layer mp-native-mobile {
  @media (max-width: 749px) {
    html[data-mp-canvas-mobile] #MainContent[data-template="page.lunch-dinner-selection"] {
      & #menu .mp-meal { transform: none !important; height: auto !important; min-height: 0 !important; }
      & #menu .mp-meal__media { flex: 0 0 auto !important; }
      & #menu .mp-meal__body { min-height: 0 !important; }
      & #menu .mp-meal__form { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; height: auto !important; }
      & #menu .mp-add { flex: 0 0 auto !important; height: auto !important; border-radius: 8px !important; }
      & #menu .mp-tabs { display: grid !important; grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap: 6px !important; width: 100% !important; overflow: visible !important; padding: 4px 0 12px !important; }
      & #menu .mp-tab { grid-column: span 2 !important; grid-row: auto !important; width: 100% !important; min-width: 0 !important; min-height: 38px !important; margin: 0 !important; padding: 6px !important; font-size: 11px !important; line-height: 1.2 !important; white-space: normal !important; text-align: center !important; justify-content: center !important; }
      & #menu .mp-tab:nth-child(n+4) { grid-column: span 3 !important; }
      & #menu .mp-meals { grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-flow: row !important; grid-auto-columns: auto !important; gap: 14px 10px !important; overflow: visible !important; padding: 4px 0 !important; scroll-snap-type: none !important; }
      & #menu .mp-meal { grid-row: auto !important; border-radius: 10px !important; }
      & #menu .mp-meal__media { height: auto !important; min-height: 0 !important; aspect-ratio: 1 !important; }
      & #menu .mp-meal__body { padding: 12px 10px !important; gap: 8px !important; }
      & #menu .mp-meal__title { display: block !important; min-height: 52px !important; height: auto !important; max-height: none !important; font-size: clamp(13px,3.8vw,15px) !important; line-height: 1.25 !important; -webkit-line-clamp: unset !important; overflow: visible !important; overflow-wrap: normal !important; word-break: normal !important; }
      & #menu .mp-meal__title a { font-size: inherit !important; line-height: inherit !important; }
      & #menu .mp-meal__blurb { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden !important; min-height: 34px !important; font-size: 12px !important; line-height: 1.4 !important; margin: 0 !important; }
      & #menu .mp-more { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; width: max-content !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 40px !important; padding: 8px 12px !important; font-size: 13px !important; line-height: 1.2 !important; white-space: nowrap !important; position: relative !important; }
      & #menu .mp-more::after { content: none !important; }
      & #menu .mp-meal__foot { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
      & #menu .mp-meal__price { font-size: 17px !important; }
      & #menu .mp-add { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; min-height: 44px !important; padding: 10px 6px !important; font-size: 13px !important; white-space: nowrap !important; }
      & #menu .mp-add__suffix { display: inline !important; }
      & #menu .mp-tag { font-size: 9px !important; padding: 4px 6px !important; }
    }
    html[data-mp-canvas-mobile] header-component summary.header__icon--menu {
      width: 44px !important;
      height: 44px !important;
      padding: 10px !important;
      align-items: center !important;
      justify-content: center !important;
      color: #f5f5ed !important;
    }
    html[data-mp-canvas-mobile] header-component summary.header__icon--menu .svg-wrapper,
    html[data-mp-canvas-mobile] header-component summary.header__icon--menu svg {
      width: 24px !important;
      height: 24px !important;
    }
  }
}

/* Compact mobile hero composition for the remaining custom page templates. */
@layer mp-native-mobile {
  @media (max-width: 749px) {
    html[data-mp-canvas-mobile] #MainContent:is([data-template="page.about"],[data-template="page.faq"],[data-template="page.supplement-page"]) {
      & :is(.au-hero-inner,.mpb__hero-copy,.mc-hero-content) { min-height: 0 !important; width: 100% !important; max-width: 100% !important; }
      & :is(.au-hero-title,.mpb__hero h1,.mc-hero-title) { width: 65% !important; max-width: 65% !important; margin: 0 0 14px !important; font-size: clamp(23px,6.1vw,36px) !important; line-height: 1.08 !important; }
      & .au-hero-brandline { font-size: 8px !important; margin-bottom: 10px !important; }
      & :is(.au-hero-sub,.mpb__hero .mpb__lede,.mc-hero-lede) { width: 59% !important; max-width: 59% !important; margin: 0 0 18px !important; font-size: clamp(12px,3.25vw,17px) !important; line-height: 1.5 !important; }
      & :is(.au-hero-actions,.mpb__hero-actions,.mc-hero-actions) { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; width: 100% !important; max-width: 100% !important; gap: 8px !important; margin: 0 0 18px !important; }
      & :is(.au-hero-actions,.mpb__hero-actions,.mc-hero-actions) > :is(a,button) { width: auto !important; min-width: 0 !important; min-height: 44px !important; padding: 10px 8px !important; font-size: 12px !important; line-height: 1.25 !important; }
      & :is(.au-hero-inner .au-kicker,.mpb__hero .mpb__kicker,.mc-hero-eyebrow) { max-width: 100% !important; font-size: 8px !important; letter-spacing: .04em !important; margin: 0 0 18px !important; }
      & .mc-hero-content { width: calc(100% - 36px) !important; max-width: calc(100% - 36px) !important; margin-inline: 18px !important; }
      & .mc-hero-badge { position: relative !important; inset: auto !important; width: fit-content !important; max-width: 100% !important; margin: 12px 0 4px !important; }
      & :is(.au-hero-art,.mpb__hero-media,.mc-hero-bg) { min-height: 0 !important; }
      & .mpb__hero-slide img { object-position: center top !important; }
    }
    html[data-mp-canvas-mobile] #MainContent[data-template="page.contact"] .rte,
    html[data-mp-canvas-mobile] #MainContent[data-template="page.contact"] .rte :is(p,span,strong,a,u) { color: #20231b !important; }
    html[data-mp-canvas-mobile] .mp.mp-hero .mp-float--a :is(span,.mp-float__l) { min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
    html[data-mp-canvas-mobile] .menu-drawer-container.menu-open > .menu-drawer { visibility: visible !important; transform: translateX(0) !important; transition: none !important; }
    html[data-mp-canvas-mobile] .menu-drawer-container[open] .menu-drawer__animated-element { animation: none !important; opacity: 1 !important; transform: none !important; }
  }
}

@layer mp-native-mobile {
  #MainContent[data-template="page.contact"] .rte,
  #MainContent[data-template="page.contact"] .rte :is(p,span,strong,a,u) { color: #20231b !important; }
}